[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.svg

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

docs/designer/src/design_language.md

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

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