43 lines
1.4 KiB
Markdown
43 lines
1.4 KiB
Markdown
# CSS-Framework Struktur
|
|
|
|
## Layer-Hierarchie
|
|
1. reset
|
|
2. base
|
|
3. layout
|
|
4. components
|
|
5. utilities
|
|
6. overrides
|
|
|
|
## Benennungskonventionen
|
|
- Dateinamen: kebab-case
|
|
- Klassen: BEM oder Utility-First? (optional notieren)
|
|
|
|
|
|
css/
|
|
├── styles.css # Haupt-Importdatei
|
|
├── settings/
|
|
│ ├── colors.css # Farbdefinitionen
|
|
│ ├── typography.css # Schriftgrößen, Fonts
|
|
│ ├── spacing.css # Abstände (margin, padding)
|
|
│ └── variables.css # Dauer, Easing, Radius, Z-Index etc.
|
|
├── base/
|
|
│ ├── reset.css # Reset/Normalize
|
|
│ ├── global.css # globale Stile für html, body, etc.
|
|
│ └── typography.css # h1, p, etc.
|
|
├── components/
|
|
│ ├── header.css
|
|
│ ├── nav.css
|
|
│ ├── footer.css
|
|
│ └── buttons.css
|
|
├── layout/
|
|
│ ├── container.css # .page-container, max-widths, etc.
|
|
│ └── grid.css # evtl. eigenes Grid-System
|
|
├── utilities/
|
|
│ ├── animations.css # .fade-in, .shake, usw.
|
|
│ ├── helpers.css # .skip-link, .hidden, .visually-hidden
|
|
│ └── scroll.css # scroll-behavior, scrollbar-style
|
|
├── forms/
|
|
│ └── inputs.css
|
|
└── themes/
|
|
└── dark.css # Farbanpassungen für Dark-Mode (optional)
|