Prepare docs

- Articles - Grid - CS
contao-thememanager · Jan 18, 2024 · 402af69 · 402af69
1 parent a73a3bb
commit 402af69
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 33 deletions.
diff --git a/docs/pages/docs/configuration/icon-set.md b/docs/pages/docs/configuration/icon-set.md
@@ -36,8 +36,8 @@ Folgende Dateien müssen in *einen Ordner* abgelegt werden:
 - `*.svg`
 - `*.woff` oder `*.woff2`
 
-Um die Icon-Schriftart einzubinden, muss die `*.svg` unter `System` -> `Einstellungen` in den ThemeManager-Einstellungen
-eingebunden werden.
+Um die Icon-Schriftart einzubinden, muss die `*.svg` unter `System` -> `Einstellungen` unter ThemeManager eingebunden
+werden.
 
 ![Icon-Set einstellen](../../../assets/configuration/icons/settings-icon-set.png){loading=lazy}
 

diff --git a/docs/pages/docs/configuration/theme/components.md b/docs/pages/docs/configuration/theme/components.md
@@ -75,10 +75,10 @@ Der Standardwert ist hier die Hintergrundfarbe des `<body>` sofern nicht anders
     $boxed-background-color
     ```
     ```css title="CSS"
-    // Components (.box)
+    /* Components (.box) */
     var(--b-bg)
 
-    // Elements (.box-list)
+    /* Elements (.box-list) */
     var(--i-bg)
     ```
     </div>
@@ -156,7 +156,6 @@ Folgende Einstellungen können hierbei vorgenommen werden:
     $divider-style
     $divider-color
     ```
-
     ```css title="Klassen"
     .line-top /* Top -> Full */
     .line-btm /* Bottom -> Full */

diff --git a/docs/pages/docs/configuration/theme/headings.md b/docs/pages/docs/configuration/theme/headings.md
@@ -175,9 +175,8 @@ eingestellt werden müssen, damit der Effekt sichtbar ist (Im Beispiel werden nu
 
 ??? example "Verfügbare SCSS-Variablen"
 
-    <div class="grid" markdown>
+    <div markdown>
     ```scss title="SCSS"
-    /** Reguläre Farben */
     $h1-font-weight
     $h2-font-weight
     $h3-font-weight

diff --git a/docs/pages/docs/configuration/theme/layout.md b/docs/pages/docs/configuration/theme/layout.md
@@ -12,23 +12,23 @@ ___
 
 `$breakpoints`
 
-Breakpoints werden verwendet, um das Layout einer Website auf verschiedene Bildschirmbreiten anzupassen. Dies ermöglicht
-das [responsive Websdesign](https://de.wikipedia.org/wiki/Responsive_Webdesign), bei der das Erscheinungsbild je nach
-Gerät oder Fenstergröße optimiert wird.
+Breakpoints werden verwendet, um das Layout einer Website auf verschiedene Bildschirmbreiten anzupassen, was als
+[Responsive Webdesign](https://de.wikipedia.org/wiki/Responsive_Webdesign) bezeichnet wird. Dadurch kann das
+Erscheinungsbild je nach Gerät oder Fenstergröße optimiert werden.
 
 Typische Breakpoints sind beispielsweise für
 
 - Smartphones (kleine Bildschirme)
 - Tablets (mittelgroße Bildschirme)
 - Desktops (große Bildschirme)
 
-definiert, um ein konsistentes und benutzerfreundliches Erlebnis auf unterschiedlichen Geräten zu gewährleisten.
-Ungleich anderer CSS-Frameworks liegt der Fokus des ThemeManagers auch auf Bildschirme, welche über Full HD
-(1920 x 1080) gehen.
+definiert, um ein konsistentes und benutzerfreundliches Erlebnis auf unterschiedlichen Geräten zu gewährleisten. Im
+Gegensatz zu anderen CSS-Frameworks legt der ThemeManager auch Wert auf Bildschirme, die über Full HD (1920 x 1080)
+hinausgehen.
 ![Breakpoints des ThemeManagers](../../../../assets/configuration/layout/grid-breakpoints.png){loading=lazy}
 
-Der ThemeManager ergänzt sechs Breakpoints, welche sich in den StyleManager Einstellungen als Suffix der Einstellungen
-wieder finden (z.B. `(xs)`).
+Der ThemeManager fügt sechs Breakpoints hinzu, die sich in den StyleManager-Einstellungen als Suffix der Konfigurationen
+widerspiegeln, zum Beispiel `(xs)`.
 
 ![Breakpoints im StyleManager](../../../../assets/configuration/layout/stylemanager-breakpoints.png){loading=lazy}
 
@@ -69,8 +69,9 @@ Jeder Breakpoint kann individuell angepasst werden, der Name kann aber nicht ge
 
 ### Media queries
 
-Sofern der Skin mit [SCSS](https://sass-lang.com/guide/) geschrieben und im Theme eingebunden wird, kann mit den
-folgenden Mixins auf die Breakpoints zugegriffen werden:
+Sofern der Skin mit [SCSS](https://sass-lang.com/guide/) geschrieben und im Theme eingebunden wird, können mit den
+folgenden Mixins auf die
+Breakpoints zugegriffen werden:
 
 ???+ example "Verfügbare SCSS-Mixins"
 
@@ -98,20 +99,21 @@ ___
 ## Verhalten
 
 Die Einstellungen dieser Kategorie beeinflussen das Verhalten des
-[Inhaltslayouts](../../installation/setup.md#inhaltslayout) und ermöglichen hierbei drei einstellbare Breiten
+[Inhaltslayouts](../../installation/setup.md#inhaltslayout) und ermöglichen dabei drei einstellbare Breiten
 (small, medium, large) für die linke und/oder rechte Spalte.
 
 ### Verhaltensänderung
 
 `$layout-column-[small|medium|large]-break` `$layout-column-width-*` `$layout-column-gutter-*`
 
 Diese Optionen erlauben die Auswahl eines [Breakpoints](#breakpoints) für die Verhaltensänderung, bei welcher die linke
-und/oder rechte Spalte in der gleichen Reihe der Hauptspalte angezeigt werden.
+und/oder
+rechte Spalte in der gleichen Reihe wie die Hauptspalte angezeigt werden.
 
 ![Verhalten des Layouts](../../../../assets/configuration/layout/layout-behavior.png){loading=lazy}
 
-Über `$layout-column-width-` lassen sich die Breiten für die linke und rechte Spalte einstellen. Mit
-`$layout-column-gutter` wird der Abstand zur Hauptspalte eingestellt.
+Über `$layout-column-width-*` können die Breiten für die linke und rechte Spalte eingestellt werden. Mit
+`$layout-column-gutter` wird der Abstand zur Hauptspalte konfiguriert.
 
 !!! tip
 
@@ -126,6 +128,35 @@ ___
 
 `$x-spacing-large-m` `$x-spacing-large-l` `$x-spacing-small`
 
+Die horizontale Breite kontrolliert die Breite des Inhalts von Artikeln, um sicherzustellen, dass der Inhalt auf großen
+Bildschirmen nicht übermäßig gedehnt wird. Dies dient dem Lesefluss und verhindert schlechten Fokus, indem eine
+angemessene Begrenzung für die Breite des sichtbaren Inhalts festgelegt wird.
+
+In Artikeln kann die Breite dieser unter `Component > Article-Spacing > Left-Right-Spacing` eingestellt werden. Die
+Einstellungen greifen hier bei folgenden Bildschirmbreiten bzw.
+[Media-Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries):
+
+| Left-Right-Spacing | Media-Query                | Variable             | CSS-Klasse  |
+|--------------------|----------------------------|----------------------|-------------|
+| Small              | Wert in `$x-spacing-small` | `$x-spacing-small`   | `.art-px-1` |
+| Medium             | Breakpoint `l`             | `$x-spacing-large-l` | `.art-px-2` |
+| Large              | Breakpoint `m`             | `$x-spacing-large-m` | `.art-px-3` |
+
+??? example "Verfügbare (S)CSS-Variablen"
+
+    <div class="grid" markdown>
+    ```scss title="SCSS"
+    $x-spacing-small
+    $x-spacing-large-l
+    $x-spacing-large-m
+    ```
+    ```css title="CSS"
+    /* Die Artikelbreite kann durch folgende
+    custom property gesetzt werden: */
+    var(--art-wdth)
+    ```
+    </div>
+
 ### Horizontaler Abstand zum Bildschirmrand
 
 `$article-outer-padding`
@@ -144,17 +175,79 @@ ___
 
 `$grid-columns` `$grid-gutter-width` `$grid-gutter-bottom`
 
-Das CSS-Framework des Contao ThemeManager nutzt ein Flexbox-basiertes 12-Spalten Grid-System, in welches sich die
+Das CSS-Framework des Contao ThemeManagers verwendet ein
+[Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)-basiertes 12-Spalten-Grid-System, in das sich die
 Inhaltselemente in Artikeln einordnen lassen.
 
-Ein Artikel dient hierbei immer als Grid-Container, welches die Ausrichtung der Kinds-Elemente (Inhaltselemente)
-steuern kann. Inhaltselemente lassen sich in dem 12-Spalten Raster einordnen.
+Ein Artikel dient hierbei immer als Grid-Container, der die Ausrichtung der Kind-Elemente (Inhaltselemente) steuern
+kann.
+Inhaltselemente lassen sich in das 12-Spalten-Raster einordnen.
 
 ![12er Grid](../../../../assets/configuration/layout/grid-columns-12.png){loading=lazy}
 !!! danger "Spaltenanzahl von 12 ($grid-columns)"
 
-    Es wird nicht empfohlen die Spaltenanzahl von 12 zu ändern, da die Optionen des StyleManagers nicht angepasst
-    werden!
+    Es wird nicht empfohlen, die Anzahl der Spalten von 12 zu ändern, da die Optionen des StyleManagers nicht
+    aktualisiert werden!
+
+Die Breite zwischen den Spalten lässt sich über `$grid-gutter-width`, der Abstand nach unten über `$grid-gutter-bottom`
+einstellen. Die Optionen finden sich als *Gutter* in den Style-Manager Optionen wieder.
+
+!!! info
+
+    Die hier vorgenommene Konfiguration hat auch Auswirkungen auf das `Gutter: small`, welches die Hälfte der hier
+    eingestellten Werte beträgt.
+
+**Grid-Klassen**
+
+| Breakpoint<br>Auflösung | **~**<br><600px | **xs**<br>≥600px | **s**<br>≥768px | **m**<br>≥1024px | **l**<br>≥1264px |       **xl**<br>≥1921px |
+|------------------------:|----------------:|-----------------:|----------------:|-----------------:|-----------------:|------------------------:|
+|                  Klasse |        `.col-*` |      `.col-xs-*` |      `.col-s-*` |       `.col-m-*` |       `.col-l-*` |             `.col-xl-*` |
+|       Anzahl<br>Spalten |                 |                  |                 |                  |                  | 12<br>*($grid-columns)* |
+
+??? example "Verfügbare (S)CSS-Variablen"
+
+    <div class="grid" markdown>
+    ```scss title="SCSS"
+    // Spalten
+    $grid-columns
+
+    // Gutter
+    $grid-gutter-width
+    $grid-gutter-bottom
+    ```
+    ```css title="CSS"
+    /* Spalten */
+    var(--columns)
+
+    /* Gutter */
+    var(--gtr)
+    var(--gtr-btm)
+
+    /* Hälfte des Gutters (Wird verwendet
+       für Padding nach links/rechts) */
+    var(--gtr-half)
+
+    /* Small gutter */
+    var(--gtr-half-sml)
+    var(--gtr-half-btm)
+    ```
+    </div>
+
+### Exkurs: List (Grid-List) und Alignment
+
+**List**
+
+Unterschiedlich der Spaltenbreite in Artikeln und Inhaltselementen, kann die in Listen-Elementen verfügbare
+StyleManager-Einstellung `Element > List` genutzt werden, um die Kind-Elemente gleichmäßig in einer Reihe zu verteilen.
+
+Ist `Columns` auf `3 Columns` eingestellt, so werden pro Reihe drei Elemente angezeigt, weitere Elemente rutschen in die
+nächste Reihe.
+
+**Horizontales und Vertikales Alignment**
+
+**Vertikales Alignment**
+
+### Exkurs: Columns, Order und Offset
 
 ___
 
@@ -184,7 +277,7 @@ ___
 
 `$top-bottom-margin-*`
 
-### Horizontales Margin 
+### Horizontales Margin
 
 `$left-right-margin-*`
 

diff --git a/docs/pages/docs/configuration/theme/modules.md b/docs/pages/docs/configuration/theme/modules.md
@@ -32,14 +32,10 @@ greifen sollen.
 
     Zum Styling der Haupt-Navigation empfiehlt sich die Verwendung dieser Variable, da hiermit der korrekte Media-Query 
     genutzt werden kann:
-
-    **Minimale Breite**
-    ```scss
+    ```scss title="Minimale Breite (SCSS)"
     @media (min-width: $navigation-behaviour-min-width)
     ```
-
-    **Maximale Breite**
-    ```scss
+    ```scss title="Maximale Breite (SCSS)"
     @media (max-width: #{sub($navigation-behaviour-min-width, .02px)})
     ```