eliseuamaro/gnu-social
1
0
Fork 0
forked from GNUsocial/gnu-social
Code Issues Pull Requests Releases Wiki Activity

[DOCS][Designer] General guidelines for styling initiated

Browse Source 
Added wireframes of default page, dividing page into 4 distinct general
areas.

Added CSS classes reference table.
This commit is contained in:
Eliseu Amaro 2022-01-03 23:43:09 +00:00
parent d444ea7963
commit a5b5362be2
Signed by: eliseuamaro
GPG Key ID: 96DA09D4B97BC2D5
4 changed files with 246 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/designer/imgs/basic-layout.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

208
docs/designer/imgs/basic-layout.svg Normal file
View File

@ -0,0 +1,208 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="1366"
height="768"
viewBox="0 0 1366 768"
version="1.1"
id="svg5"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
sodipodi:docname="basic-layout.svg"
inkscape:export-filename="/home/booh/Work/gnu-social-documentation/basic-layou.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#070707"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:pageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:document-units="px"
showgrid="false"
showguides="true"
inkscape:zoom="0.8125"
inkscape:cx="667.07692"
inkscape:cy="422.15385"
inkscape:window-width="1920"
inkscape:window-height="1007"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="g138495" />
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:0.1,0.1;stroke-opacity:1;paint-order:stroke markers fill;stroke-miterlimit:4;stroke-dashoffset:0"
id="rect918"
width="1344.7627"
height="46.717339"
x="10.618625"
y="10.618625" />
<text
xml:space="preserve"
style="font-size:32px;line-height:1.25;font-family:'Mx437 IBM XGA-AI 12x20';-inkscape-font-specification:'Mx437 IBM XGA-AI 12x20';fill:#ffffff"
x="626.19995"
y="43.577293"
id="text8019"><tspan
sodipodi:role="line"
id="tspan8017"
x="626.19995"
y="43.577293">Header</tspan></text>
<rect
style="fill:none;stroke:#ffffff;stroke-width:0.977782;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:0.0977782, 0.0977782;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
id="rect16129"
width="301.02222"
height="700.70471"
x="10.607515"
y="57.478703" />
<rect
style="fill:none;stroke:#ffffff;stroke-width:0.977782;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:0.0977782, 0.0977782;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
id="rect16129-3"
width="301.02222"
height="700.70471"
x="1054.3591"
y="57.335964" />
<rect
style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:0.1, 0.1;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
id="rect49857"
width="742.72937"
height="700.56195"
x="311.62973"
y="57.478703" />
<text
xml:space="preserve"
style="font-size:21.3333px;line-height:1.25;font-family:'Mx437 IBM XGA-AI 12x20';-inkscape-font-specification:'Mx437 IBM XGA-AI 12x20'"
x="597.01569"
y="412.55966"
id="text57880"><tspan
sodipodi:role="line"
id="tspan57878"
x="597.01569"
y="412.55966"
style="fill:#ffffff">Current page</tspan></text>
<rect
style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:0.1, 0.1;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
id="rect62142-5"
width="26"
height="26"
x="1319.381"
y="21.461538" />
<text
xml:space="preserve"
style="font-size:13.3333px;line-height:1.25;font-family:'Mx437 IBM XGA-AI 12x20';-inkscape-font-specification:'Mx437 IBM XGA-AI 12x20'"
x="50.911686"
y="36.977287"
id="text68176"><tspan
sodipodi:role="line"
id="tspan68174"
x="50.911686"
y="36.977287"
style="font-size:13.3333px;fill:#ffffff">-&gt; Opens Left panel</tspan></text>
<text
xml:space="preserve"
style="font-size:13.3333px;line-height:1.25;font-family:'Mx437 IBM XGA-AI 12x20';-inkscape-font-specification:'Mx437 IBM XGA-AI 12x20'"
x="1156.0417"
y="36.977287"
id="text88173"><tspan
sodipodi:role="line"
id="tspan88171"
x="1156.0417"
y="36.977287"
style="font-size:13.3333px;fill:#ffffff">Opens Right panel &lt;-</tspan></text>
<g
id="g98259">
<rect
style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:0.1, 0.1;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
id="rect62142"
width="26"
height="26"
x="20.5"
y="20.977295" />
<path
style="fill:#ffffff;stroke:#feffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
d="m 20.5,46.977295 c 26,-26 26,-26 26,-26 l -26,26 26,-26"
id="path97234" />
<path
style="fill:#ffffff;fill-opacity:1;stroke:#feffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 46.5,46.977295 c -26,-26 -26,-26 -26,-26 l 26,26 -26,-26"
id="path97234-6" />
</g>
<g
id="g98259-2"
transform="translate(1060.3462,-63.208064)">
<path
style="fill:#ffffff;fill-opacity:1;stroke:#feffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 259.03478,110.6696 c 26,-25.999998 26,-25.999998 26,-25.999998 l -26,25.999998 26,-25.999998"
id="path97234-1" />
<path
style="fill:#ffffff;fill-opacity:1;stroke:#feffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 285.03478,110.6696 c -26,-25.999996 -26,-25.999996 -26,-25.999996 l 26,25.999996 -26,-25.999996"
id="path97234-6-2" />
<g
id="g138454"
transform="translate(0,-14.04183)">
<text
xml:space="preserve"
style="font-size:21.3333px;line-height:1.25;font-family:'Mx437 IBM XGA-AI 12x20';-inkscape-font-specification:'Mx437 IBM XGA-AI 12x20'"
x="98.718689"
y="420.67288"
id="text24170"
transform="translate(-1060.3462,63.208064)"><tspan
sodipodi:role="line"
id="tspan24168"
x="98.718689"
y="420.67288"
style="fill:#ffffff">Left panel</tspan></text>
<text
xml:space="preserve"
style="font-size:16px;line-height:1.25;font-family:'Mx437 IBM XGA-AI 12x20';-inkscape-font-specification:'Mx437 IBM XGA-AI 12x20'"
x="-1000.0276"
y="496.68094"
id="text110837"><tspan
sodipodi:role="line"
id="tspan110835"
x="-1000.0276"
y="496.68094"
style="fill:#ffffff">[.section-panel-left]</tspan></text>
</g>
<g
id="g138495"
transform="translate(0,-19.454344)">
<text
xml:space="preserve"
style="font-size:21.3333px;line-height:1.25;font-family:'Mx437 IBM XGA-AI 12x20';-inkscape-font-specification:'Mx437 IBM XGA-AI 12x20'"
x="1136.0703"
y="425.94266"
id="text24170-6"
transform="translate(-1060.3462,63.208064)"><tspan
sodipodi:role="line"
id="tspan24168-7"
x="1136.0703"
y="425.94266"
style="fill:#ffffff">Right panel</tspan></text>
<text
xml:space="preserve"
style="font-size:16px;line-height:1.25;font-family:'Mx437 IBM XGA-AI 12x20';-inkscape-font-specification:'Mx437 IBM XGA-AI 12x20'"
x="38.923981"
y="501.95071"
id="text110837-7"><tspan
sodipodi:role="line"
id="tspan110835-0"
x="38.923981"
y="501.95071"
style="fill:#ffffff">[.section-panel-right]</tspan></text>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

31
docs/designer/src/design_language.md
View File

@ -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

38
docs/designer/src/guidelines.md Normal file
View File

@ -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`<br/>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...**_