1.4 KiB
CSS-Framework Struktur
Layer-Hierarchie
- reset
- base
- layout
- components
- utilities
- 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)