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

Content col-3
Content col-3
Content col-3
Content col-2
Content col-3
Content col-4
Content col-6
Content col-3
Content col-4-5
Content 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.