Styleguide Küsnacht
Mehrspalten-Grids
Marspalten-Grids ermöglichen Inhalte in nebeneinander stehende Spalten anzuordnen und sollten anstelle von Layout-Tabellen verwendet werden. Alle Spalten müssen von einem Container mit der Klasse .row
umgeben werden. Die Spalten-Container sind auf einem 9-Spalten-Raster aufgebaut. Die Summe der vorkommenden Spalte muss also immer 9 ergeben:
- 1 x 6-Spalten-Container + 1 x 3-Spalten.Container = 9
- 3 x 3-Spalten-Container = 9
- usw.
Die Breite der Spalte wird über den Klassennamen vergeben: col-1
bis col-9
.
Muster-Ausgaben
col-3
col-3
col-3
col-2
col-3
col-4
col-6
col-3
col-4-5
col-4-5
Code
Überbreite Tabellen für Smartphones
Sind tatsächlich Daten-Tabellen nötig, sollten diese Mobil immer getestet werden. Besteht aufgrund vieler Spalten / langer Inhalte keine Möglichkeit die Tabelle auch auf kleinen Viewports (Smartphone) ohne horizontales Scrollen darzustellen, sollte die Tabelle in einen umgebenden Container mit der Klasse .table-responsive
gestellt werden. Dieser ermöglicht auf Smartphones das Scrollen innerhalb der Tabelle anstatt der gesamten Seite.
Überschrift Spalte 1 | Überschrift Spalte 2 | Überschrift Spalte 3 | Überschrift Spalte 4 | Überschrift Spalte 5 | Überschrift Spalte 6 |
---|---|---|---|---|---|
Text | Text | Text | Text | Text | Text |
Text | Text | Text | Text | Text | Text |
Code
Linklisten mit Spalten
Dient primär als Inpage-Navigation. Die Listenpunkte werden bei grösseren Viewports auf 3, bei kleineren Viewports (Smartphone) auf 2 Spalten verteilt. Die Begriffe sollten so kurz gewählt werden, dass möglichst keine umbrechenden, mehrzeiligen Einträge entstehen.
Muster-Ausgabe
Code
Unterstützung: Alle modernen Browser. IE < 10 nur mit JavaScript-Polyfill.
Box
Erstellt eine Text-Box welche grau schattiert ist. Code (gelb markiert) muss im Quellcode eingefügt werden.
<div class="box">
<h2>Boxtitel</h2>
<p>Inhalt</p>
</div>
Boxtitel
Inhalt