Teil 3: [Workshop] CSS: Überladene Websites ade - Objektorientierte Stylesheets
- [Workshop] CSS: Überladene Websites ade - Objektorientierte Stylesheets
- Teil 2: [Workshop] CSS: Überladene Websites ade - Objektorientierte Stylesheets
- Teil 3: [Workshop] CSS: Überladene Websites ade - Objektorientierte Stylesheets
- Teil 4: [Workshop] CSS: Überladene Websites ade - Objektorientierte Stylesheets
In grids.css sind kleinere Strukturen zuhause, insbesondere Klassen mit denen Sie ein Block-Element in bis zu fünf Spalten unterteilen können. Dazu legen Sie zuerst eine neue Zeile an:
<div class="line">
In div.line packen Sie dann für jede Spalte ein weiteres div. Gemeinsames Merkmal aller Spalten ist die Klasse unit. Die Breite einer Spalte steuern Sie über eine zusätzliche Klasse, deren Name Sie nach dem Muster
sizeXofY
zusammensetzen. X und Y bilden dabei einen Bruch, sodass Sie beispielsweise mit
size1of2
eine Spalte mit einer Breite von 50 Prozent anlegen. Welche Maße verfügbar sind, lesen Sie in der Datei grids_docs.html. Die letzte Spalte kennzeichnen Sie mit der Klasse lastUnit, die dafür sorgt, dass automatisch der gesamte übrige Raum belegt wird.
Unabhängige Formatierungen
Bis hierhin enthält Blocks lediglich den Code, den Sie benötigen, um das Raster einer Seite solide aufzubauen. Ähnlich essenziell ist die content.css, in der die Objekte definiert werden, mit denen Sie Inhalte layouten - Überschriften, Absätze, Listen, Tabellen und so weiter. Der Schwerpunkt liegt dabei auf der Definition von Abständen, Ausrichtungen und Spezialitäten wie der Größe und Farbe von Text, dem list-style-type von Listen und dem Verhalten von Links.Die content.css zeigt zwar einerseits, dass Sullivan den Einsatz verschachtelter Definitionen vermeidet. Aber sie enthält auch die Ausnahmen von der Regel, beispielsweise .data table und .important a. Um diese Sonderfälle abzudecken, muss man die zweite Regel nur ein wenig erweitern: "Trenne Inhalt und Container. Ausnahmen innerhalb der in der Bibliothek definierten Inhalte und Container sind aber erlaubt."
© Archiv
Module und Skins
Ein Großteil der Blocks-Magie steckt in den Dateien mod.css und mod_skins.css. Deren Funktion erschließt sich am besten, wenn Sie die Datei module.html mit den Entwickler-Tools Ihres Browsers inspizieren, also zum Beispiel mit Firefox und Firebug. Sullivan definiert zunächst einen Container in HTML:
<div class="mod"><b class="top"><b class="tl"></b><b class="tr"></b></b><div class="inner"><div class="hd"><h3>mod</h3></div><div class="bd"><p>Mod ist der Basis-Container ...</p></div></div><b class="bottom"><b class="bl"></b><b class="br"></b></b></div>
Diesen Code können Sie überall dort einsetzen, wo Sie einen Kasten auf einer Webseite benötigen. Dass das HTML weit über ein <div></div> hinausgeht, hat seinen Grund darin, dass der Container genügend Material bieten muss, das sich per CSS stylen lässt.
