From a5b5362be243f342c58a51424853d06a70deea1b Mon Sep 17 00:00:00 2001 From: Eliseu Amaro Date: Mon, 3 Jan 2022 23:43:09 +0000 Subject: [PATCH] [DOCS][Designer] General guidelines for styling initiated Added wireframes of default page, dividing page into 4 distinct general areas. Added CSS classes reference table. --- docs/designer/imgs/basic-layout.png | Bin 0 -> 23982 bytes docs/designer/imgs/basic-layout.svg | 208 +++++++++++++++++++++++++++ docs/designer/src/design_language.md | 31 ---- docs/designer/src/guidelines.md | 38 +++++ 4 files changed, 246 insertions(+), 31 deletions(-) create mode 100644 docs/designer/imgs/basic-layout.png create mode 100644 docs/designer/imgs/basic-layout.svg delete mode 100644 docs/designer/src/design_language.md create mode 100644 docs/designer/src/guidelines.md diff --git a/docs/designer/imgs/basic-layout.png b/docs/designer/imgs/basic-layout.png new file mode 100644 index 0000000000000000000000000000000000000000..b8e402262e680c21ad58578513992eaea8db04e3 GIT binary patch literal 23982 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 + + + + + + + + Header + + + + Current page + + -> Opens Left panel + Opens Right panel <- + + + + + + + + + + Left panel + [.section-panel-left] + + + Right panel + [.section-panel-right] + + + + diff --git a/docs/designer/src/design_language.md b/docs/designer/src/design_language.md deleted file mode 100644 index fd6fcfb1de..0000000000 --- a/docs/designer/src/design_language.md +++ /dev/null @@ -1,31 +0,0 @@ -# Why a design language? -Humans have an innate understanding for common, predictable and repeatable concepts. Our brains are, in fact, hardwired -to take advantage of such phenomena, which is sometimes taken to great effects in optical illusions for example. - -Patterns emerge when concepts and actions, interlinked, construct a predictable outcome. With a common design language, -we hope to achieve such predictability, and supply an innate understanding of user interaction. - -The goal isn't to have one and only design language, but to encourage new themes/interfaces to take similar steps on their -design processes. - -## Predictability and user experience -A good book implies meaning, perhaps through environmental storytelling, or any other thought exercise that assumes -a conscious, and rational reader capable of processing information. Not just present it. -The same is true for a good UI, it shouldn't be explained, there should be an innate understanding. - -### User Interface Universal Language -Web technologies as a whole contain a set of constraints for organizing web pages. This implies that all web pages have -a common structural basis. - -Users accustomed to surfing the Web know which user interactions are acceptable and which aren't. -The key puzzle is how users come to know these restrictions of their Web UI. This is the crux of any -accessible Web page, an hierarchy needs to be followed as well as common standards. - -### Canons of page construction -The aforementioned comparison between books and Web pages isn't just a coincidence, given the resemblance between the -two mediums. From their presentation to fundamental theory, it's only natural to apply core book design ideas to the Web. - - -### User customization - - \ No newline at end of file diff --git a/docs/designer/src/guidelines.md b/docs/designer/src/guidelines.md new file mode 100644 index 0000000000..635a228dc1 --- /dev/null +++ b/docs/designer/src/guidelines.md @@ -0,0 +1,38 @@ +# Design considerations +Humans have an innate understanding for common, predictable and repeatable concepts. Our brains are, in fact, hardwired +to take advantage of such phenomena. Patterns emerge when concepts and actions, interlinked, construct a predictable outcome. +This basic idea should always be employed into the design of a user interface, because it inherently supplies an innate +understanding of user interaction. + +So, just bear this in mind. Try not to reinvent HTML elements, use them properly. + +The designer docs are intended to help out in the development processes of both the Core components, and Plugins. +With an emphasis on the frontend side of things, of course. + +## Basic layout +_Bear in mind **any** of the following assumptions are based upon the **default theme**, your mileage may vary._ + +The layout is subdivided in 4 distinct areas: +- **Header** + - Left panel ~~checkbox~~ button :) + - **Left panel** + - Main instance link / header 1 + - Right panel ~~checkbox~~... I mean, button... + - **Right panel** +- **Current page content** + +![GNU social's basic page layout](../imgs/basic-layout.png "The basic layout of GNU social default theme") + +Each one of these areas **are selectable** with CSS by **using a limited set of classes**. You can use whatever classes +you may want, but bear in mind that any external code made by someone else other than yourself may not account +for your specific class names. + +### CSS classes reference + +| Name | Function | Dependencies | Examples | Sub-classes | +|----------------------|----------------------------------------------------------------------------|--------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------| +| section-panel | Side panel | - Preceded by a checkbox hack (hide/show panel); | Left panel `\App\Component\LeftPanel\templates\left_panel\view.html.twig`
Right `\App\Component\RightPanel\templates\right_panel\view.html.twig` | `section-panel-left`, `section-panel-right` | +| section-widget | A sub-section of a page, commonly a template block of a component / plugin | None | Login template `\App\templates\security\login.html.twig` | `section-widget-title`, `section-widget-subtitle` | +| section-widget-title | A template block's title | - Part of a `section-widget`; | Settings template `\App\templates\settings\base.html.twig` | None | + +_**still in construction...**_ \ No newline at end of file