Skip to content

Commit

Permalink
Prepare docs
Browse files Browse the repository at this point in the history 
- Breakpoints
- Behavior
- Grid
  • Loading branch information
@zoglo
zoglo committed Jan 17, 2024
1 parent cffc92d commit a73a3bb
Show file tree
Hide file tree
Showing 10 changed files with 233 additions and 42 deletions.
Binary file added docs/assets/configuration/layout/grid-breakpoints.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/configuration/layout/grid-columns-12.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/configuration/layout/layout-behavior.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/configuration/layout/stylemanager-breakpoints.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 7 additions & 7 deletions docs/pages/docs/configuration/backgrounds.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,15 @@ Hintergrundbildern bedeutet dies, dass jede einzelne CSS-Klasse dem Anwender bek
Der ThemeManager erweitert eine Option im Dateisystem, sodass Bilder als Hintergrundbild definiert werden können.

<figure markdown>
![Bild als Hintergrund festlegen](../../../assets/configuration/background/file-set-as-background.png){ loading=lazy }
![Bild als Hintergrund festlegen](../../../assets/configuration/background/file-set-as-background.png){loading=lazy}
<figcaption>Über die Option kann ein Hintergrundbild festgelegt werden</figcaption>
</figure>

Da das `CSS` für Hintergrundbilder erst generiert werden muss, stehen diese erst nach Kompilieren des Themes zur
Verfügung.

<figure markdown>
![Compiler preview](../../../assets/configuration/background/background-compiler.png){ loading=lazy }
![Compiler preview](../../../assets/configuration/background/background-compiler.png){loading=lazy}
<figcaption>Der Asset-Compiler listet alle verfügbaren Hintergründe auf</figcaption>
</figure>

Expand All @@ -50,7 +50,7 @@ stehen.
Anwender können die Hintergrundbilder unter dem Reiter Background auswählen. Die Beschriftung der Hintergrundbilder
im Backend folgt hierbei dem Schema `BG-[Dateiname]`.

![Hintergrund auswählen](../../../assets/configuration/background/style-manager-background-image.png){ loading=lazy }
![Hintergrund auswählen](../../../assets/configuration/background/style-manager-background-image.png){loading=lazy}

### Wo kann ich Hintergrundbilder einstellen?

Expand Down Expand Up @@ -82,7 +82,7 @@ Der StyleManager ermöglicht es, dass CSS-Klassen an ausgewählten Stellen in ei
(Template-Variablen).

<figure markdown>
![Global, Component und Element](../../../assets/configuration/background/global-component-element.png){ loading=lazy }
![Global, Component und Element](../../../assets/configuration/background/global-component-element.png){loading=lazy}
<figcaption>Hervorhebung der Gruppen anhand einer Bild-Text-Liste. Lila hebt lediglich das gesamte Element (Global) hervor</figcaption>
</figure>

Expand Down Expand Up @@ -113,7 +113,7 @@ Der StyleManager ermöglicht es, dass CSS-Klassen an ausgewählten Stellen in ei
Die im StyleManager verfügbaren Hintergrund-Einstellungen können genutzt werden, um das Verhalten des festgelegten
Hintergrunds zu beeinflussen.

![Einstellungen im StyleManager](../../../assets/configuration/background/background-settings.png){ loading=lazy }
![Einstellungen im StyleManager](../../../assets/configuration/background/background-settings.png){loading=lazy}

Die nachfolgende Tabelle erklärt alle weiteren Optionen, wobei der Standardwert bereits der `Best-Practice` folgt.

Expand Down Expand Up @@ -172,12 +172,12 @@ wurde eine neue Funktion hinzugefügt, welche in diversen Einstellungen von Hint
Werden eigene Hintergrundfarben im StyleManager ergänzt, wird ein Platzhalter angezeigt.

<figure markdown>
![Farbvorschau aktivieren](../../../assets/configuration/background/color-preview-setting.png){ loading=lazy }
![Farbvorschau aktivieren](../../../assets/configuration/background/color-preview-setting.png){loading=lazy}
<figcaption>Aktivieren der Farbvorschau in den Benutzer-Einstellungen</figcaption>
</figure>

<figure markdown>
![Farbvorschau in Einstellungen](../../../assets/configuration/background/color-preview.png){ loading=lazy }
![Farbvorschau in Einstellungen](../../../assets/configuration/background/color-preview.png){loading=lazy}
<figcaption>Farbvorschau innerhalb der Hintergrundfarben</figcaption>
</figure>

Expand Down
16 changes: 8 additions & 8 deletions docs/pages/docs/configuration/icon-set.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Bei der Verwendung von Icon-Fonts, die über Dienste wie IcoMoon oder Fontello e
stellt sich oft die Herausforderung, die zugehörigen CSS-Dateien einzubinden und die entsprechenden Klassen in Templates
oder CSS-Anpassungen für Komponenten zu integrieren.

![Icon in einer Button-Komponente](../../../assets/configuration/icons/component-icon.png){ loading=lazy }
![Icon in einer Button-Komponente](../../../assets/configuration/icons/component-icon.png){loading=lazy}

Der Contao ThemeManager ermöglicht es Anwendern, ihr Icon-Set direkt in den Systemeinstellungen auszuwählen. Automatisch
generiert der ThemeManager das benötigte CSS, und die festgelegten Optionen stehen systemweit im StyleManager zur
Expand All @@ -29,7 +29,7 @@ entpackt werden.

Im Download einer IcoMoon-Schriftart befinden sich die benötigten Dateien im Ordner `fonts`:

![IcoMoon Download mit Dateien](../../../assets/configuration/icons/font-files.png){ loading=lazy }
![IcoMoon Download mit Dateien](../../../assets/configuration/icons/font-files.png){loading=lazy}

Folgende Dateien müssen in *einen Ordner* abgelegt werden:

Expand All @@ -39,7 +39,7 @@ Folgende Dateien müssen in *einen Ordner* abgelegt werden:
Um die Icon-Schriftart einzubinden, muss die `*.svg` unter `System` -> `Einstellungen` in den ThemeManager-Einstellungen
eingebunden werden.

![Icon-Set einstellen](../../../assets/configuration/icons/settings-icon-set.png){ loading=lazy }
![Icon-Set einstellen](../../../assets/configuration/icons/settings-icon-set.png){loading=lazy}

!!! tip

Expand All @@ -49,17 +49,17 @@ eingebunden werden.
Nach Kompilieren des Themes stehen die neuen Icons in den Komponenten bereit.

<figure markdown>
![Asset Compiler Report](../../../assets/configuration/icons/maintenance-generated-icon-font.png){ width="500" loading=lazy}
![Asset Compiler Report](../../../assets/configuration/icons/maintenance-generated-icon-font.png){loading=lazy}
<figcaption>Asset-Compiler Report</figcaption>
</figure>

<figure markdown>
![Icons innerhalb der Link-Einstellungen](../../../assets/configuration/icons/stylemanager-icon-picker.png){ width="500" loading=lazy}
![Icons innerhalb der Link-Einstellungen](../../../assets/configuration/icons/stylemanager-icon-picker.png){loading=lazy}
<figcaption>Icons innerhalb der Link-Einstellungen</figcaption>
</figure>

<figure markdown>
![Icon-Auswahl im RockSolid Icon-Picker](../../../assets/configuration/icons/rocksolid-icon-picker.png){ width="500" loading=lazy}
![Icon-Auswahl im RockSolid Icon-Picker](../../../assets/configuration/icons/rocksolid-icon-picker.png){loading=lazy}
<figcaption>Icon-Auswahl im RockSolid Icon-Picker</figcaption>
</figure>

Expand All @@ -70,7 +70,7 @@ Nach Kompilieren des Themes stehen die neuen Icons in den Komponenten bereit.

### Hinweise und Fehlermeldungen

![Hinweise und Fehlermeldungen im Asset-Compiler](../../../assets/configuration/icons/maintenance-no-icon-font-woff-file.png){ loading=lazy }
![Hinweise und Fehlermeldungen im Asset-Compiler](../../../assets/configuration/icons/maintenance-no-icon-font-woff-file.png){loading=lazy}

Folgende Hinweise und Fehlermeldungen können vom Asset-Compiler zurückgegeben werden:

Expand Down Expand Up @@ -105,7 +105,7 @@ gezogen werden, um die Icons zu laden.
eine Dokumentation auf [GitHub](https://github.com/fontello/fontello/wiki/Help).

<figure markdown>
![Übersicht der IcoMoon-App](../../../assets/configuration/icons/icoMoon.png){ loading=lazy }
![Übersicht der IcoMoon-App](../../../assets/configuration/icons/icoMoon.png){loading=lazy}
<figcaption>Übersicht der IcoMoon-App</figcaption>
</figure>

Expand Down
16 changes: 8 additions & 8 deletions docs/pages/docs/configuration/theme/components.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,15 +46,15 @@ Diese Einstellung beeinflusst die Hintergrundfarbe (`background-color`) der Kach

**Components**

```css
.box > .inside
```
```css
.box > .inside
```

**Elements**

```css
.box-list .item > .inside
```
```css
.box-list .item > .inside
```

Der Standardwert ist hier die Hintergrundfarbe des `<body>` sofern nicht anders konfiguriert.

Expand Down Expand Up @@ -253,7 +253,7 @@ Bestandteile einer Tabelle einstellen:
Bis auf die Icon-Schriftart bezieht sich die nachfolgende Konfiguration auf das Aussehen der durch den ThemeManager
bereitgestellten Inhaltselemente `Icon`, `Icon-Text` und `Icon-Text-Liste`.

![Icon-Einstellungen](../../../../assets/configuration/components/icon-settings-stylemanager.png){ loading=lazy }
![Icon-Einstellungen](../../../../assets/configuration/components/icon-settings-stylemanager.png){loading=lazy}

### Icon-Schriftart

Expand Down Expand Up @@ -290,7 +290,7 @@ wird.
`$icon-outlined-width`

Über die Optionen `Design` sowie `Shape` kann das Aussehen von Icons modifiziert werden.
![Icon-Designs](../../../../assets/configuration/components/icons.png){ loading=lazy }
![Icon-Designs](../../../../assets/configuration/components/icons.png){loading=lazy}
Die Auswahl des Designs `Outline` in den zuvor beschriebenen Einstellungen bewirkt das Hinzufügen eines Rahmens um das
Icon. Die Breite des Rahmens kann über `$icon-outlined-width` eingestellt werden.

Expand Down
4 changes: 2 additions & 2 deletions docs/pages/docs/configuration/theme/headings.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,7 +249,7 @@ In den nachfolgenden Abschnitten werden die nachfolgenden Einstellungen beschrie
Wenn das [Global Spacing](#global-spacing-automatisch) nicht aktiviert wird, gelten folgende Regeln für den unteren
Abstand (*Margin*) für Überschriften:

![Headline Spacing normal](../../../../assets/configuration/headline/headline-spacing.png){ loading=lazy }
![Headline Spacing normal](../../../../assets/configuration/headline/headline-spacing.png){loading=lazy}

| Breakpoints | Small | Medium | Large |
|-----------------------|----------------------------|------------------------------|------------------------------|
Expand Down Expand Up @@ -279,7 +279,7 @@ Abstand (*Margin*) für Überschriften:
dies oft die einzig notwendige Einstellung ist. Die nachfolgende Tabelle zeigt an, welche der Config-Variablen genutzt
wird.

![Headline Spacing global](../../../../assets/configuration/headline/headline-spacing-global.png){ loading=lazy }
![Headline Spacing global](../../../../assets/configuration/headline/headline-spacing-global.png){loading=lazy}

| Breakpoints | Small | Medium | Large |
|------------------------------------------|-----------------------------|------------------------------|------------------------------|
Expand Down
176 changes: 176 additions & 0 deletions docs/pages/docs/configuration/theme/layout.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,192 @@ icon: material/view-grid-plus-outline

# Layout

Die nachfolgenden Kapitel beschreiben Einstellungen, welche Auswirkungen auf das visuelle Verhalten der Website haben.

___

## Breakpoints

`$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.

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.
![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)`).

![Breakpoints im StyleManager](../../../../assets/configuration/layout/stylemanager-breakpoints.png){loading=lazy}

| Breakpoint | Bildschirmgröße | Geräte |
|------------|----------------:|--------------------------:|
| - | <600px | Smartphones (portrait) |
| xs | ≥600px | Smartphones (landscape) |
| s | ≥768px | kleine Tablets (portrait) |
| m | ≥1024px | Tablets (portrait) |
| l | ≥1264px | Desktop (1080p) |
| xl | ≥1921px | Desktop (1440p, 4k) |

Jeder Breakpoint kann individuell angepasst werden, der Name kann aber nicht geändert werden.

???+ example "Verfügbare (S)CSS-Variablen"

<div class="grid" markdown>
```scss title="SCSS"
$breakpoints: (
xs: 600px, // 37.5rem
s: 768px, // 48rem
m: 1024px, // 64rem
l: 1264px, // 79rem
xl: 1921px // 120rem
)
```
```css title="CSS"
/* Zu erwähnen ist, dass Custom properties
nicht in Media queries funktionieren */
var(--bp-xs)
var(--bp-s)
var(--bp-m)
var(--bp-l)
var(--bp-xl)
```

</div>

### 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:

???+ example "Verfügbare SCSS-Mixins"

```scss title="Min width"
@include media-breakpoint('xs') { ... } // @media (min-width: 600px) { ... }
@include media-breakpoint('s') { ... } // @media (min-width: 768px) { ... }
@include media-breakpoint('m') { ... } // @media (min-width: 1024px) { ... }
@include media-breakpoint('l') { ... } // @media (min-width: 1264px) { ... }
@include media-breakpoint('xl') { ... } // @media (min-width: 1921px) { ... }
```
```scss title="Max width"
@include max-breakpoint('xs') { ... } // @media (max-width: 599.98px) { ... }
@include max-breakpoint('s') { ... } // @media (max-width: 767.98px) { ... }
@include max-breakpoint('m') { ... } // @media (max-width: 1023.98px) { ... }
@include max-breakpoint('l') { ... } // @media (max-width: 1263.98px) { ... }
@include max-breakpoint('xl') { ... } // @media (max-width: 1920.98px) { ... }
```

!!! info

Mehr zu der Subtraktion von 0.02px kann hier gefunden werden: https://www.w3.org/TR/mediaqueries-4/#mq-min-max

___

## Verhalten

Die Einstellungen dieser Kategorie beeinflussen das Verhalten des
[Inhaltslayouts](../../installation/setup.md#inhaltslayout) und ermöglichen hierbei 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.

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

!!! tip

Sofern nur eine oder zwei Breakpoints gewünscht sind, kann das kleinere `$layout-column-[]-break` auf die gleiche
Einstellung wie die des nachfolgenden eingestellt werden.

___

## Artikel

### Horizontale Breite

`$x-spacing-large-m` `$x-spacing-large-l` `$x-spacing-small`

### Horizontaler Abstand zum Bildschirmrand

`$article-outer-padding`

### Vertikaler Abstand

`$article-spacing-*` `$article-main-spacing-bottom`

### Höhen

`$article-min-vheight` `$article-options-vheight`

___

## Grid

`$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
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.

![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!

___

## Abstände (Innen)

### Paragraphen

`$paragraph-spacing`

### Element-Spacing

`$element-spacing-*`

### Vertikales Padding

`$top-bottom-padding-small`

### Horizontales Padding

`$left-right-padding-small`

___

## Abstände (Außen)

### Vertikales Margin

`$top-bottom-margin-*`

### Horizontales Margin

`$left-right-margin-*`

___

## Bild-Text

`$image-text-behaviour-min-width` `$image-text-ratio-options`
Loading

0 comments on commit a73a3bb

Please sign in to comment.