Gridy☺

Dokumentation

01. Projektstruktur

Empfohlene Ordnerstruktur für ein sauberes Gridy-Setup. 

    /assets
      /img
      /js
      /css
        style.css

02. Grid-Variablen

Definiere in style.css zuerst die Grid-Variablen, um das System anzupassen. Ohne diese verwendet Gridy Standardwerte. 

    :root{
      --pl:32px;
      --pr:32px;
      --gp:32px;
      --mw:960px;
    }

Diese steuern:
• --pl / --pr → Seiten-Padding links/rechts
• --gp → Grid-Abstand
• --mw → maximale Breite des Containers

03. Grid-Overlay

Drücke Umschalt + G, um das Grid-Overlay umzuschalten. Nutze es, um Elemente auszurichten und Abstände zu debuggen.

04. Grid-Spalten

Gridy verwendet ein 12-Spalten-System. Die Beispiele sind von 1 Spalte bis zur vollen Breite geordnet.

Die Layoutstruktur besteht aus drei Schichten:
.con legt die Breite des Hauptcontainers und das Seiten-Padding fest,
.grd definiert das 12-Spalten-Grid-System,
und .c-* steuert, wie viele Spalten jedes Element einnimmt.

1 Spalte (12 × 1)
2 Spalten (6 + 6)
3 Spalten (4 + 4 + 4)
4 Spalten (3 + 3 + 3 + 3)
6 Spalten (2 × 6)
Volle Breite (12)

05. Spaltenstart

Verwende s-*-Klassen, um Elemente horizontal zu versetzen.

.c-4 .s-2
.c-3 .s-6
.c-2 .s-11

06. Flex-Utilities

Verwende Flex-Helferklassen für Ausrichtung und Verteilung.

.f-r .j-b .a-c
links
mitte
rechts
.f-c .f-c
Element
Element
Element
.f-c .j-c .a-c
mitte

07. Textausrichtung

Utility-Klassen für horizontale Textausrichtung.

.t-l
linksbündiger Text
.t-c
zentrierter Text
.t-r
rechtsbündiger Text

08. Abstände

Margin- und Padding-Utilities folgen dem Baseline-Rhythmus. Abstandsklassen verwenden konsistente vertikale Inkremente für die Layout-Balance.

Oberer Außenabstand

.mt-8
.mt-16
.mt-32
.mt-44
.mt-64

Unterer Außenabstand

.mb-8
.mb-16
.mb-32
.mb-44
.mb-64

Oberer Innenabstand

.pt-8
Inhalt
.pt-16
Inhalt
.pt-32
Inhalt
.pt-44
Inhalt
.pt-64
Inhalt

Unterer Innenabstand

.pb-8
Inhalt
.pb-16
Inhalt
.pb-32
Inhalt
.pb-44
Inhalt
.pb-64
Inhalt

09. Bildsystem

Bild-Utilities mit fester Höhe für schnelle Layout-Komposition. Kombiniere .img mit Höhen-Utilities, um konsistente Bildblöcke zu erstellen.

.img .img-80
.img .img-160
.img .img-192
.img .img-240
.img .img-320
.img .img-480
.img .img-560
.img .img-640
.img-fit

10. Responsives System

Unter 900px wechselt Gridy automatisch zu 4 Spalten. Alle Spaltenklassen werden zur vollen Breite.

Desktop: .c-3
Desktop: .c-3
Desktop: .c-3
Desktop: .c-3