Boilerplate
Ein schlankes Grundgerüst für eigene Seiten. Ohne Abhängigkeiten, hell und dunkel.
Typografie
Überschrift 2
Fließtext in der Systemschrift San Francisco. Die Zeilenhöhe von 26px ist die Grundzeile; jede Überschrift hält davor und danach so viel Abstand, dass der Text danach wieder auf dem Raster steht.
Überschrift 3
Fett, kursiv, ein Link, Code und kleiner Text.
Mit <q> setzt die Seite die Anführungszeichen selbst:Sie sagte
Raster
und meinte Ordnung.
Überschrift 4
Alle Größen stehen in rem. Wer im Browser eine größere Schrift einstellt, bekommt die ganze Hierarchie größer.
Typografie ist das, was ein Wort tut, bevor man es liest.
Zitatquelle
Die Stufen
| Stufe | px | Zeile |
|---|---|---|
| h1 | 34 | 39 |
| h2 | 28 | 32,5 |
| h3 | 22 | 26 |
| h4 | 20 | 26 |
| body | 16 | 26 |
| figcaption | 13 | 20 |
Formulare
Meldungen
Danke, die Nachricht ist angekommen.
Das hat nicht geklappt. Bitte später noch einmal versuchen.
Bitte vor dem Absenden den Datenschutzhinweis bestätigen.
Listen
- Erster Punkt
- Zweiter Punkt
- Eingerückt
- Eingerückt
- Dritter Punkt
- Erstens
- Zweitens
- Drittens
- Begriff
- Erklärung zum Begriff
- Noch ein Begriff
- Noch eine Erklärung
Code
<div class="container">
<div class="row">
<div class="eight columns">…</div>
<div class="four columns">…</div>
</div>
</div>Tabelle
| Schrift | Jahr | Gestaltung |
|---|---|---|
| Fira Sans | 2012 | Erik Spiekermann |
| Bitter | 2011 | Huerta Tipográfica |
| Arvo | 2010 | Anton Koovit |
Breite Tabelle
| Person | Hannover | Kassel | Düsseldorf | Hamburg | Berlin | Gesamt |
|---|---|---|---|---|---|---|
| Anna | 3 | 5 | 2 | 4 | 1 | 15 |
| Ben | 2 | 1 | 4 | 3 | 3 | 13 |
| Clara | 4 | 2 | 1 | 2 | 2 | 11 |
Raster
12 Spalten mit 30px Zwischenraum, 100px Abstand zum Browserrand, mobil 30px. Unter 735px stehen die Spalten untereinander.
Bild
Akkordeon
Wofür ist die Boilerplate?
Als Startpunkt für eigene Seiten: Typografie, Raster und Formulare sind gesetzt, der Rest ist deins.
Braucht sie JavaScript?
Nein. Nur der Hell/Dunkel-Schalter und der Pfeil nach oben nutzen ein paar Zeilen.
Darf ich sie verwenden?
Ja, frei, auch für Kundenprojekte. Das Raster stammt aus Skeleton (MIT).
Fenster
Das Fenster ist aus Glas: Was dahinter liegt, scheint verschwommen durch, der Rest der Seite wird nur abgedunkelt. Auf dem Handy kommt es als Blatt von unten.
Farben
--clr-primary#009100rgb(0, 145, 0)--clr-primary-accent#006400rgb(0, 100, 0)--clr-text-muted#6e6e73rgb(110, 110, 115)--clr-text#1b1b1brgb(27, 27, 27)--clr-background#fafaf7rgb(250, 250, 247)Hell und dunkel folgen der Systemeinstellung. Mond und Sonne oben rechts überschreiben sie.
Im Dunkelmodus ist das Grün heller. #009100 hätte auf dem dunklen Hintergrund nur etwa 4 : 1 Kontrast, für Links und grüne Schrift braucht es mindestens 4,5 : 1. Das hellere #48c458 schafft das.
Beide Dateien in denselben Ordner legen. Raster und Klassennamen nach Skeleton von Dave Gamache (MIT).