[DOCS][Designer] General guidelines for styling initiated
Added wireframes of default page, dividing page into 4 distinct general areas. Added CSS classes reference table.
This commit is contained in:
Eliseu Amaro
parent
d444ea7963
commit
a5b5362be2
BIN
docs/designer/imgs/basic-layout.png
Normal file
BIN
docs/designer/imgs/basic-layout.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
208
docs/designer/imgs/basic-layout.svg
Normal file
208
docs/designer/imgs/basic-layout.svg
Normal 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">-> 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 <-</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>
|
||||||
|
After Width: | Height: | Size: 8.2 KiB |
|
|
@ -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
38
docs/designer/src/guidelines.md
Normal 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**
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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...**_
|
||||||
Loading…
Reference in New Issue
Block a user