This page (revision-10) was last changed on 04-Jul-2024 13:34 by Peter Hormanns 

This page was created on 07-Jun-2024 12:34 by Peter Hormanns

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note
10 04-Jul-2024 13:34 2 KB Peter Hormanns to previous Creatix CSS
9 29-Jun-2024 14:00 2 KB PeterHormanns to previous | to last typo
8 07-Jun-2024 18:30 2 KB Peter Hormanns to previous | to last
7 07-Jun-2024 18:26 2 KB Peter Hormanns to previous | to last
6 07-Jun-2024 16:33 1 KB Peter Hormanns to previous | to last
5 07-Jun-2024 16:29 1 KB Peter Hormanns to previous | to last
4 07-Jun-2024 15:45 1 KB Peter Hormanns to previous | to last
3 07-Jun-2024 15:40 1 KB Peter Hormanns to previous | to last Anpassung CSS
2 07-Jun-2024 13:02 766 bytes Peter Hormanns to previous | to last einfachs CSS Schema
1 07-Jun-2024 12:34 207 bytes Peter Hormanns to last erster Eintrag simple.css

Page References

Incoming links Outgoing links
CSSFrameworks...nobody
CSSFrameworks

Version management

Difference between version and

View first change
!!!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}]
This page (revision-10) was last changed on 04-Jul-2024 13:34 by Peter Hormanns  Top