| Ziel | HTML | Ergebnis |
|---|---|---|
| Seitenbreite begrenzen | <main class="container"> |
Zentriert, mit Rand, passt sich dem Bildschirm an |
| Zebra-Tabelle | <table class="striped"> |
Jede zweite Zeile getönt |
| Breite Tabelle auf dem Handy | <div class="overflow-auto"><table>...</table></div> |
Tabelle scrollt seitlich statt die Seite zu sprengen |
| Karte | <article><header>Titel</header>Inhalt<footer>Fuß</footer></article> |
Umrandeter Kasten |
| Formularfeld mit Beschriftung | <label>Name<input name="name"></label> |
Feld mit Label, volle Breite |
| Feld und Knopf in einer Zeile | <fieldset role="group"><input ...><button>Los</button></fieldset> |
Zusammengefasste Gruppe |
| Spalten | <div class="grid"><div>A</div><div>B</div></div> |
Nebeneinander, auf dem Handy untereinander |
| Knopfvarianten | <button class="secondary">, class="outline", class="contrast" |
Graue, umrandete, kontrastreiche Knöpfe |
| Ladeanzeige | <button aria-busy="true"> |
Knopf mit Drehsymbol |
| Dunkel oder hell erzwingen | <html data-theme="dark"> |
Ohne Angabe richtet sich Pico nach dem Gerät |
Eigene Anpassungen kommen in static/app.css. Pico steuert sein Aussehen über Variablen, die du überschreibst:
css
:root {
--pico-primary: #2b6cb0; /* Hauptfarbe: Links, Hauptknöpfe */
--pico-border-radius: 0.5rem;
}
td.zahl, th.zahl {
text-align: right; /* Zahlen rechtsbündig */
font-variant-numeric: tabular-nums; /* alle Ziffern gleich breit */
}
.negativ { color: #c0392b; }