!!!CSS Frameworks

!!Einfache, klassenlose Frameworks

Diese CSS-Dateien kann man einer sauber strukturierten HTML-Datei zuordnen, um schnell ein ansehnliches Ergebnis ins Netz zu stellen.

* [Simple.css Framework|https://simplecss.org/] von Key Quirk (zum [Github-Projekt|https://github.com/kevquirk/simple.css])
* [Tiny.css|https://ihsan6133.github.io/tinycss/] von Muhammed Ihsan ([auf Github|https://github.com/vinayofc/flycss])
* [Pico CSS|https://picocss.com] ([auf Github|https://github.com/picocss/pico])
* [Lissom.CSS|https://lissomware.github.io/css/] ([auf Github|https://github.com/lissomware/css])
* [Water.css|https://watercss.kognise.dev/] von Lexi Mattick ([auf Github|https://github.com/kognise/water.css])

!!Ein Beispiel für die Anpassung von Simple.css

 :root { --bg: #F8F8F8; --text: #0040B0; --text-light: #004080; --accent-bg: #0040B0; --accent-text: #000000; }
 body > footer { margin-top: 1rem; padding: 0.5rem; }
 body > header { margin: 0; padding: 0; }
 body > header > :only-child { margin-block-start: 0.25em; }
 header > nav { --border: #0040B0; --text: #FFFFE0; margin: 0; padding: 0em; }
 header > nav a { margin: 0 0.5rem 0.25rem 0.5rem; }
 header > nav a:visited { margin: 0 0.5rem 0.25rem 0.5rem; }
 header > nav a:hover { color: var(--text); border-color: var(--text); }

[{Image src='Screenshot-SimpleCSS-Anpassung.png' align='left' }]

!!Beispiel Pico CSS Classless

 :root { --pico-block-spacing-vertical: 3px; } 
 header { position: sticky; top: 0.25em; width:100%; height:36px; background-color: rgba(255,255,255,0.85); }
 main { margin-top: 1.0em; }
 footer { position: sticky; bottom: 0.25em; width:100%; height:36px; background-color: rgba(255,255,255,0.85); }

[{Image src='Screenshot-PicoClassless-Beispiel.png' align='left' }]

!!Beispiel water.css

 :root { --pico-block-spacing-vertical: 3px; } 
 header { position: sticky; top: 0.25em; width:100%; height:36px; background-color: rgba(255,255,255,0.85); }
 main { margin-top: 1.0em; }
 footer { position: sticky; bottom: 0.25em; width:100%; height:36px; background-color: rgba(199,33,38,1.0); color: #F5ECC1; }
 header > nav { background: #C72126; padding: 0.25em; }
 header > nav > a { padding: 0 1em; color: #F5ECC1; }

[{Image src='Screenshot-WaterCSS-Beispiel.png' align='left' }]


!!Etwas mehr

* [Creatix CSS (Github)|https://github.com/laluluny/creatix-css] von Karin Soika [https://www.creatix.org/]

\\ 

[{Tag Web HTML CSS}]