Kachel-Raster

Das hier verwendete Kachel-Raster ist außerordentlich schlicht. Es ist nicht vergleichbar mit anderen ausgereiften und komplexen Raster-Systemen. Für den hier beabsichtigten Zweck (die Kachelung) scheint es mir allerdings ausreichend, wenn auch mit einigen Stolpersteinen.

Wichtig zu wissen ist, dass alle Kacheln immer nahtlos aneinander kleben – es gibt keine Zwischenräume. Grundsätzlich ist eine Kachel (ohne spezielle CSS-Klasse) immer 100% breit (Browserfenster-Breite), hat einen weißen Hintergrund und schwarze Schrift.

Es gibt nur eine begrenzte Anzahl möglicher Kachelbreiten, die sich (hoffentlich) sinnvoll miteinander kombinieren lassen (siehe unten).

Ab einer Viewportbreite kleiner als 1024px werden alle Kacheln 100% breit!

Einzige Ausnahme sind die 25%-Kacheln. Hier erfolgt die Breitenänderung an anderen Breakpoints:
Viewport < 900px = 50%
Viewport < 600px = 100%
Das muss man bedenken. Eine Zeile wie zum Beipiel „w25 w50 w25“ wird auf kleinen Viewports Probleme durch den Umbruch verursachen.

Hinweis: Die folgende Darstellung der Kacheln ist nur eine Demonstration. Sie verhalten sich nicht responsive! Die Abstände zwischen den Kacheln dienen ebenso lediglich der besseren Veranschaulichung und sind bei den „echten“ nicht vorhanden.

Und übrigens: Ich verwende auf dieser Seite absichtlich nur Weiß und Grautöne für die Kacheln. Niemand hat die Absicht immer nur kunterbunt zu kacheln ;-)

Standard-Kacheln

Um die Breite einer Kachel zu bestimmen, werden folgende CSS-Klassen verwendet (w-Klassen). Ergeben die Breiten aufeinanderfolgender Kacheln zusammen weniger oder gleich 100%, werden sie in einer Zeile stehen.

ohne Breiten-Angabe
w20
w80
w25
w75
w33
w67
w40
w60
w50
w50
w25
w25
w25
w25
w33
w33
w33

Sonderfälle

Lücken

Bei gewollten Lücken setzt man eine leere Kachel und gibt ihr die passende Hintergrundfarbe.

w33
w33 bgGrey
w33
w25 bgGrey
w25
w25 bgGrey
w25

Zeile nur teilweise füllen

Dazu setzt man die gewünschte Kachel-Breite und zusätzlich eine Ausrichtungs-Klasse (pageLeft, pageCenter oder pageRight).

w33 pageLeft
w33 pageCenter
w33 pageRight

Kachel-Inhalte ausrichten

Es ist möglich, die Kacheln nicht in voller Breite zu füllen. Dazu gibt man die gewünschte Inhalts-Breite an und zusätzlich eine Ausrichtungs-Klasse (innerLeft, innerCenter oder innerRight). Die Inhalts-Breiten können die gleichen Werte erhalten wie die oben beschrieben Kacheln, nur statt des Präfix „w“ eben „inner“.

inner50 innerLeft
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum. Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit.
inner50 innerCenter
 Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat. Maecenas vulputate laoreet lectus. Fusce pulvinar ante non sapien. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor. Vivamus posuere.
inner50 innerRight
Vivamus posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis. Fusce imperdiet, augue at dignissim ultricies, tortor libero vehicula neque, ac malesuada lorem dolor et arcu. Quisque accumsan metus vel diam.

Kachel als „Jumbo“

In dieser Demo füllt die Startseite (Home) das gesamte Browser-Fenster. Es gibt viele Namen dafür, zum Beispiel: Jumbotron, Jumbo, Hero, Landingpage … und andere.  Header, Footer und der Button zum Öffnen der Quicklinks (in der Nav-Leiste ganz rechts) sind ausgeblendet und nur die obere Navigationsleiste ist sichtbar. Sämtlicher Inhalt ist sowohl horizontal als auch vertikal zentriert.

Navigation

fhs motley tiles

A template for CMSimple_XH version 1.7 or higher
(-; Made in Middle Saxony ;-)

Template Logo

Click on the picture and let’s go!

Erreicht wird dieser Effekt durch die CSS-Klassen „jumbo bgDeepPurple noQuickLinks“.