Element · Foundations
Zwölf Spalten, eine Kante.
styles/global.css
Container mx-auto px-6. Gutter 24px. Shell: 7+4, 8+4, 12. Breakpoints von Tailwind, wir nutzen lg und xl. Höhe ohne Schatten: z-index.
1
2
3
4
5
6
7
8
9
10
11
12
Shell
| Layout | Titel | Aside |
|---|---|---|
| split | 12 / xl 7 | 12 / xl 4, Start 9 |
| wide | 12 / xl 8 | 12 / xl 4, Start 9 |
| full | 12 | 12 / xl 6 |
Breakpoints
| Name | ab | Einsatz |
|---|---|---|
| sm | 640px | Zwei Spalten Docs. |
| md | 768px | Tablet. |
| lg | 1024px | Sidebar, Desktop-Nav. |
| xl | 1280px | Shell split/wide. |
| 2xl | 1536px | Weite Monitore, gleiche 12. |
z-index
| Name | Token | Wert | Einsatz |
|---|---|---|---|
| base | z-base | 0 | ASCII, Fläche. |
| content | z-content | 10 | Text über ASCII. |
| overlay | z-overlay | 40 | Scrim. |
| nav | z-nav | 50 | Header, Sidebar. |
| toast | z-toast | 60 | Tooltip, künftig Dialog. |
Viewport-Heroes: min-h-svh, Inhalt nach unten. Auto-Heroes: py-28. Keine Schattenleiter.