CSS – Frameworks

Verfasst von Daniel Hallmann, entwickelt unter der Leitung von Michael Zirlewagen im Rahmen der Vorlesung

„Webprogrammierung“ der Fachhochschule Düsseldorf

Stand 01.02.2011

Dieses Werk bzw. Inhalt steht unter einer Creative Commons Namensnennung-

Nicht-kommerziell-Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

1

Inhaltsverzeichnis

Seite

1. Einleitung 2

2. Klein, aber effektiv: CSS Reset 3

3. Grid Frameworks 3

3.1. Grid-Framework: Blueprint 4

3.2. Grid-Framework: 960 Grid System 6

3.3. Grid-Framework: YUI2 Grid CSS 7

3.4. Vergleich Grid-Frameworks 8

4. CSS Framework YAML 8

5. Serverseitiges CSS-Framework: Sass 10

6. Fazit 13

Links 14

2

1. Einleitung

Frameworks im Bereich HTML und CSS stellen meist eine Sammlung von Werkzeugen für immer

wieder kehrende Aufgaben bzw. Problemlösungen im Bereich der Webseitengestaltung zur

Verfügung. Kleinere Frameworks bieten Lösungen für einzelne Probleme wie z.B. Stylesheets für

die Druckansicht von Webseiten oder den Reset von Browser intern verwendeten Styles.

Umfangreichere Frameworks bieten eine Zusammenfassung all dieser Problemlösungen und in

den meisten Fällen auch ein speziell entwickeltes System für das Layout.

Es gibt bereits sehr viele Frameworks für HTML und CSS. In diesem Vergleich liegt die

Konzentration auf den populärsten Frameworks, um repräsentative Beispiele geben zu können.

3

2. Klein, aber effektiv: CSS Reset

In vielen CSS Frameworks werden direkt zu Beginn die Browser internen Stylesheets

zurückgesetzt. Dies macht Sinn, da jeder Browser intern seine eigenen Stylesheets besitzt und

diese automatisch auf unformatierte Elemente anwendet. Diese Stylesheets sind von Browser zu

Browser unterschiedlich und können zu Unterschieden in der Darstellung einer Webseite führen.

Um diese Unterschiede zu verhindern werden mit CSS Reset Tools wie z.B. Eric Meyers Reset

CSS1 oder YUI Reset CSS2 die Attribute der Browser internen Stylesheets meist auf 0 gesetzt, um

eine vom Browser unabhängige Darstellung zu gewährleisten. Dabei ist jedoch zu beachten, dass

in manchen Reset CSS Frameworks auch selbstverständliche Style-Eigenschaften wie z.B. fett bei

<strong> entfernt werden können.

Abbildung 1 – Unterschiede zwischen standardmäßigen Browser Stylesheets (links) und CSS Reset (rechts)

Im Browser geänderte Optionen für die Darstellung (z.B. Einstellungen für Barrierefreiheit in

Opera) sind nicht von diesen Resets betroffen, da die CSS-Resets wie normale Stylesheets

behandelt werden und je nach Einstellung im Browser dann nicht angezeigt werden.

3. Grid Frameworks

Grid-Frameworks sind eine Übertragung der aus dem Grafikdesign bekannten Gestaltungsraster,

welche besonders im Printbereich verwendet werden, auf Webdesign. Für den

Darstellungsbereich wird eine feste Breite festgelegt. Da die meisten Internet-User mit einer

Auflösung von mindestens 1024 x 768 Pixeln im Netz surfen, liegt die Breite bei den

bekanntesten Grid-Frameworks Blueprint und 960 Grid System bei 950 bzw. 960 Pixeln.

Der Darstellungsbereich wird dann durch die Festlegung einer Spaltenanzahl in Spalten mit fester

Größe und etwas Abstand unterteilt, die dann die ganze Weite ausfüllen. Grid-Frameworks

helfen gezielt bei der Erstellung eines Grundgeräts für Webseiten

4

Abbildung 2 - Gestaltungsraster am Beispiel von drupal.org

3.1 Grid-Framework: Blueprint3

Blueprint3 legt die Gesamtbreite des Darstellungsbereichs auf 950 Pixel fest. Der

Darstellungsbereich wird dann in 24 Spalten mit einer Breite von jeweils 30 Pixeln und einem

Abstand von 10 Pixeln auf der rechten Seite unterteilt.

Am Beispiel von Blueprint soll die Funktionsweise von einem Grid-Framework verdeutlicht

werden. Durch die Festlegung eines <div>-Elements mit der Klasse „container“ wird als erstes

der Darstellungsbereich festgelegt:

5

Weitere <div>‘s werden dann in diesen Container eingefügt. Die <div>‘s bekommen dann

eine Klasse, die angibt über wie viele Spalten sich das <div> erstrecken soll. Ein 24 Spalten

breiter Header-Bereich würde die CSS-Klasse „span-24“ bekommen. Weitere Elemente wie

z.B. ein Bereich für den Content mit 18 Spalten Breite und eine Sidebar mit den restlichen 6

Spalten Breite werden einfach mit zwei weiteren <div>‘s und den Klassen „span-18“ und

„span-6“ eingefügt. Das letzte <div> in jeder Zeile muss mit der zusätzlichen Klasse „last“

versehen werden, um den darauf folgenden Abstand zu unterdrücken. Fehlt dieses „last“

werden die Zeile zu breit und umgebrochen.

Nach dem Erstellen der Struktur lassen sich auch der Content-Bereich und auch die Sidebar

durch das Einfügen von weiteren <div>‘s weiter wie benötigt aufsplitten, ein Beispiel:

6

Mit dem Blueprint CSS Generator4 lässt sich Blueprint schnell anpassen. Es können die

Anzahl, Breite und der Abstand der Spalten ausgewählt werden und der Generator liefert

direkt die angepassten Stylesheets mit z.B. mehr als 24 Spalten und/oder einer geänderten

Spaltenbreite.

Bereits am Beispiel von Blueprint lässt sich einer der großen Kritikpunkte an Grid-

Frameworks zeigen: Die Klassennamen. Laut Definition im HTML 5 Draft5 soll das class-

Attribut für die Beschreibung des Inhaltes eines Elements genutzt werden und nicht um die

Präsentation des Elements zu beschreiben. So wäre z.B. der Name „header“ für den Header

besser geeignet als nur „span-24“. Als Entwickler ist man wahrscheinlich zudem auch sehr

eigen was die Namen von Klassen angeht und lässt sich nicht gerne Vorschriften machen.

Als einziges Grid-Framework bietet Blueprint im Download-Paket eine Lösung für die Vergabe

von eigenen Klassennamen: Das Ruby-Skript compress.rb. Nach Entfernen der überflüssigen

Klassen im Quellcode, lassen sich durch Anpassung der settings.yml und dem Ausführen von

compress.rb alle Blueprint CSS-Eigenschaften auf andere Klassen übertragen. Weitere

Informationen zu diesem Thema finden sich hier6.

3.2 Grid-Framework: 960 Grid System7

Das 960 Grid System7 arbeitet wie es der Name bereits sagt mit

einer Breite von 960 Pixeln. Diese können wahlweise in 12 oder

16 Spalten mit einem Abstand von 20 Pixeln unterteilt werden.

Die 10 Pixel mehr im Gegensatz zu Blueprint ergeben sich aus

einem zusätzlichen Rand am Ende der Zeile. Da es sich dabei

aber um keinen nutzbaren Bereich handelt, ist es im Gegensatz

zu Blueprint verschwendeter Platz.

Der generelle Aufbau besteht wie bei Blueprint aus einem Container in dessen Klassenname

die Spaltenanzahl nach einem Unterstrich angegeben wird, also für die beiden

standardmäßigen Anzahl von Spalten „container_12“ oder „container_16“. Im Container

werden dann weitere Elemente mit den Klassen „grid_1“ bis „grid_16“ eingefügt. Durch den

rechten Außenrand muss in den außenliegenden Elementen jedoch keine „last“-Klasse wie

bei Blueprint explizit am Ende jeder Zeile angegeben werden. Dies gilt jedoch nur für

Elemente, die sich hierarchisch direkt unter dem Container befinden. Eine Stufe in der

Hierarchie tiefer, also bei Elementen wie z.B. einer Gruppe von Beiträgen in einem Weblog,

7

die sich meist im Bereich namens „content“ oder Ähnlichem befinden, muss im 960 Grid

System immer das erste Element mit „alpha“ und das letzte Element mit „omega“ in jeder

innen liegenden Zeile gekennzeichnet werden. Beispiel:

Direkt auf der 960 Grid Website finden sich ein HTML Generator und ein CSS Generator für

die Anpassungen des Frameworks an individuelle Wünsche. Durch die vielen mitgelieferten

Templates und eine Sketch Sheet zusätzlich für Bleistift-Fans kann die Zusammenarbeit und

Kommunikation zwischen Web- bzw. Grafikdesigner und Webprogrammierer vereinfacht und

verbessert werden. Der Designer erarbeitet mit einem der Templates seinen Entwurf und der

der Entwickler kann diesen mit weniger Aufwand als Seite umzusetzen.

3.3 Grid-Framework: YUI2 Grid CSS8

YUI8 wird auf allen Seiten eingesetzt, die zum Netzwerk von Yahoo! gehören und ist somit

praxiserprobt. Alle Standard-Layouts basieren auf festen Größen mit 750, 950, 974 Pixeln

oder 100% Fensterbreite. YUI verwendet für die Größenangaben die Einheit „em“. Das wirkt

sich zwar positiv auf die Darstellung aus, wenn der Besucher Zoom im Browser verwendet.

Yahoo! stellt den YUI Grids Builder9 frei zur Verfügung.

Dort lassen sich wie in Generatoren für Blueprint und

960 Grid die Grundstruktur für eine Webseite erzeugen

und an die eigenen Wünsche anpassen.

Im Source-Code findet sich jedoch ein großes Problem

von YUI. Die verwendeten CSS-Klassen für das Layout

besitzen Namen wie „yui-u“ oder „yui-g“ und ohne

weitere Einarbeitung in YUI lässt sich die Bedeutung

nicht erkennen.

8

3.4 Vergleich Grid-Frameworks

Anfänglicher Skepsis entgegen dass Grid-Frameworks gestalterische Freiheiten durch die

Vorgaben bei den Seitendimensionen einschränken, lassen sich diese jedoch sehr gut durch

Generatoren online so generieren, dass sie den gewünschten Vorstellungen entsprechen.

Die Verwendung eines Grid-Frameworks ist immer mit der Voraussetzung verbunden, dass

das Layout auch in einem Gestaltungsraster erarbeitet worden ist. Das grenzt das

Einsatzgebiet ein. Steht das Design bzw. Layout der Seite im Fokus eines Webprojekts sollte

es nicht in ein Grid-Framework gezwängt werden. Die persönliche Note z.B. bei

künstlerischen Seiten (z.B. von Künstlern oder Fotografen-Portfolios) würde durch die

Gestaltungsraster in vielen Fällen unterdrückt.

Wurde das Layout bereits auf Basis eines Gestaltungsraster entwickelt bzw. ist die Webseite

die Umsetzung eines Printmediums sind Grid-Frameworks eine sehr gute Möglichkeit schnell

Browserkompatibilitätsproblemen zu umschiffen und auch nach Release der Website eine

gute und komfortable Möglichkeit zu besitzen Änderungen vorzunehmen.

Innerhalb der Grid-Frameworks ist Blueprint klarer Favorit, da es möglich ist die Attribute der

Blueprint-Klassen mit dem kleinen Ruby-Skript compress.rb, das auch im Downloadpaket

enthalten ist, auf eigene Klassennamen zu übertragen. Dadurch wird im Gegensatz zu 960

Grid und YUI eine semantische Korrektheit der Klassen gewährleistet.

Der Vorteil von 960 Grid sind die dafür entwickelten Online-Generatoren in denen sich in

wenigen Minuten ein Grundgerüst zusammen zustellen lässt. YUI wirkt auf Grund des auf den

ersten Blick nicht durchschaubaren Source-Codes eher kompliziert.

Die Dokumentation bei 960 Grid fällt eher schwach aus. YUI bietet ein paar Seiten mit

Tutorials und Beispiele als Dokumentation an, Blueprint ist mit einem kleinen Wiki, einem in

mehrsprachigen Tutorials und Demos noch am besten aufgestellt.

4. CSS Framework YAML

Während Grid-Frameworks sich am Anwender orientieren, sind CSS-Frameworks

entwicklerorientiert. Das eigentliche Layout wird somit nicht im HTML-Teil der Webseite,

sondern wirklich in CSS entwickelt. Während in Grid-Frameworks nur vorgefertigte CSS Klassen in

HTML auf <div>-Elemente zu gewiesen werden, werden bei einem CSS-Framework primär die

CSS-Klassen editiert. Es herrscht also eine klare Trennung vom Inhalt (HTML) und vom Layout

(CSS) der Seite. Das Layout ist flexibel und bietet größere Freiheit bei der Gestaltung, kann aber

wenn gewünscht auf Grids basieren.

Die Einarbeitung bei CSS-Frameworks liegt deutlich höher als bei Grid-Systemen, da man neben

CSS auch noch die Idee hinter dem Framework verstehen sollte.

9

Unter dem Namen YAML (Yet Another MultiColumn Layout)10 veröffentlicht Dirk Jesse seit

Oktober 2005 ein CSS-Framework. Das etwa 140kb Framework ist etwas größer als die vorher

besprochenen Grid-Frameworks, verfügt jedoch auch über eine größere Ausstattung.

Im ursprünglichen Zustand verfügt das Layout über drei Spalten, lässt sich jedoch auch auf ein

zweispaltiges Layout minimieren. YAML besteht aus mehreren Teilen: dem Reset der Browser-

CSS-Eigenschaften (Eigenentwicklung), den eigentlichen Bausteinen des Layouts und einer

separaten Datei für das Debugging des Internet Explorer 6.

Zur schnelleren Entwicklung kann der YAML Builder11 eingesetzt werden. Mit diesem Tool ist es

möglich auch mit nur wenigen Kenntnissen schnell ein Layout zu erstellen und sich den

Quellcode direkt ausgeben zu lassen, welcher dann sogar im Internet Explorer 5.x funktioniert.

Im Community-Bereich12 der YAML-Website finden sich viele Lösungen wie z.B.

Templates/Themes für viele Content Management System zur Verfügung, diese lassen sich für

die Nutzung auf der eigenen Seite weiter anpassen. Auch ein ausführliche Online-Tutorials

stehen für den Einstieg bereit.

Für den Einsatz im kommerziellen Bereich ist zu beachten, dass YAML unter der Creative

Commons Attribution 2.0 Lizenz (CC-A 2.0)13 veröffentlicht wird und somit eine Namensnennung

des Autors und die Rückverlinkung zur YAML-Projekthomepage laut Lizenz erforderlich sind. Da

diese meist bei Kunden unerwünscht sind, muss dann eine von zwei zur Verfügung stehenden

kostenpflichtigen Lizenzen erworben werden.

Die Vorteile von YAML sind die gute deutsch- und englischsprachige Dokumentation, welche sehr

umfangreich und informativ ist. Der Aufbau der Klassen und auch die Dateistruktur sind

intelligent aufgebaut und bieten eine gute Basis für barrierearme Webentwicklung, da bereits

Inhalt und Layout getrennt vorliegen. Zudem arbeitet YAML mit einer Fallbacklösung. Die

Hauptdateien mit den CSS-Klassen bleiben unangerührt und werden nur durch neue vom

Anwender erstellte CSS-Dateien und den darin befindlichen Klassen überschrieben. Somit kann

bei Fehlern schnell durch Entfernen der eigenen Klassen wieder der Ursprungszustand wieder

hergestellt werden. Das erhöht zwar das Volumen der zu ladenden Daten, sollte aber bei den

heutigen Verbindungsgeschwindigkeiten (auch im Bereich von mobilen Endgeräten) keine

deutliche Erhöhung der Ladezeit bewirken.

10

5. Serverseitiges CSS-Framework: Sass

CSS ist eine einfache und mit Absicht simpel gehaltene Formatierungssprache. Leider stößt man

dadurch jedoch auch schnell an die Grenzen des Machbaren. Wird eine Farbe an mehreren

Stellen in einer Website genutzt, muss sie für jedes Element einzeln zu gewiesen werden. Ändert

sich die Farbe im Nachhinein müssen die Attribute für jedes betroffene Element erneut

angepasst werden. Eine Variable für die Farbe würde diese Umstände schnell beheben. Würde

die Farbe einmal gesetzt, könnte sie auch für alle Elemente gesetzt werden und bei Änderungen

der Farbe wäre es nur noch notwendig die Variable ein einziges Mal zu ändern.

Sass14 erweitert CSS mit der Syntax SCSS (Sassy CSS) und so mit der Möglichkeit Variablen

einzusetzen und mit diesen auch mathematische Operationen durchführen zu können:

Abbildung 3 - Sass Variablen (Quelle: http://sass-lang.com, Stand 19.01.10)

Sass basiert auf Ruby, kann aber durch eine eigene sehr an CSS orientierte Syntax auch ohne

Kenntnisse von Ruby eingesetzt werden. Der entwickelte Code kann über Sass manuell durch

Konsolenaufruf in eine Standard CSS-Datei gewandelt werden und ist dann für jeden CSS fähigen

Browser interpretierbar.

Weiter ist auch möglich Sass serverseitig so zu konfigurieren, dass bei einem Update des Sass-File

(Dateiendung *.scss) automatisch der in Abhängigkeit stehende CSS-File neu generiert wird. Der

Besucher der Webseite bekommt von diesem Vorgang nichts mit und hat nur Zugang auf die

eigentliche CSS-Datei, die dann sein Browser interpretiert.

11

Doch Sass bietet nicht nur Variablen sondern auch die Möglichkeit Selektoren und Attribute zu

verschachteln:

Abbildung 4 - Sass Verschachtelung (Quelle: http://sass-lang.com, Stand 19.01.10)

Die Übersichtlichkeit im Source-Code steigert sich enorm und in Abhängigkeit stehende

Selektoren, Klassen und Attribute lassen sich gruppieren.

Eine weitere Erweiterung sind „Mixins“. Mixins sind eine einfach, aber sehr effektiv, denn mit

ihnen lässt sich ein ganzer Satz von CSS-Attributen einfach auf einen anderen Selektor

anwenden. Zusätzlich ist es auch möglich Parameter an Mixins zu übergeben:

Abbildung 5- Sass Mixins (Quelle: http://sass-lang.com, Stand 19.01.10)

In diesem Code-Beispiel erkennt man gut die Möglichkeiten von Mixins. In Sass werden in der

Klasse „#data“ die beiden Mixins „left“ und „table-base“ includet. In der generierten CSS werden

dann alle Attribute entsprechend der CSS-Syntax verteilt. Die Parameterübergabe lässt sich bei

12

„left“ erkennen, in „#date“ wird dem Mixin „left“ als Parameter „10px“ übergeben. Diese 10px

finden sich dann auf der CSS Seite im „margin-left“-Attribut von „#data“ wieder.

Die letzte Erweiterung ist die Vererbung von Selektoren. Durch die Vererbung lässt sich eine sehr

gut überschaubare Hierarchie der Selektoren schaffen und die Entwicklung ist viel effektiver:

Abbildung 6- Sass Selektoren Vererbung (Quelle: http://sass-lang.com, Stand 19.01.10)

Mit „@extend“ erweitert die Klasse „.badError“ die Klasse „Error“. Angenommen man würde die

Klasse „.badError“ nachträglich im CSS-Teil einpflegen, müsste man dies an drei Stellen tun, um

alle gewünschten Style-Attribute eingebunden zu haben. In SCSS reicht das Einfügen von

„.badError“ unter Angabe welchen anderen Selektor die Klasse erweitern soll.

Als Alternative zu Sass gibt es auch noch LESS15. Die Grundidee hinter Sass und LESS ist gleich,

lediglich die Syntax weist Unterschiede auf. Für beide Frameworks gibt es als Erweiterung diverse

Parser

13

6. Fazit

CSS Frameworks sind sehr gute Tools, die Webentwickler in vielen Bereichen entlasten können.

Sie ersparen Arbeit und vereinfachen die Entwicklung von Webseiten, wenn sie richtig eingesetzt

werden. Kenntnisse in CSS sollten auf jeden Fall vor dem Einsatz vorhanden sein.

Die erste Frage, wenn es um CSS Frameworks geht, sollte immer sein: Macht es überhaupt Sinn

ein Framework einzusetzen? Die Einarbeitung in ein komplexeres CSS Framework wie z.B. YAML

lohnt sich nur wohl nur wenn man mehrere neue Webseiten im Monat erstellt. Dann benötigt es

natürlich noch der Überlegung ob bei kommerzieller Nutzung der Kauf einer Lizenz von YAML

notwendig sein könnte.

Grid-Frameworks lassen sich wegen der Vorgabe bei der Seitengröße nicht immer anwenden.

Zwar lassen sich Blueprint und 960 Grid sehr gut mit Online Generatoren an die persönlichen

Wünsche anpassen, die Basis des Gestaltungsrasters bleibt aber bestehen. Gestaltungsraster

lassen sich einfach nicht auf jede beliebige Seite anwenden, denn das Design einer Website sollte

immer im Vordergrund stehen. Ein Layout direkt für ein Framework zu entwerfen ist wohl nur in

wenigen Fällen (Zeitdruck, Umsetzung eines Printmediums) wirklich sinnvoll.

Eine wirkliche Erleichterung kann der Einsatz von serverseitigen CSS-Frameworks wie z.B. Sass

sein. Die Variablen, Mixins und die Vererbung von CSS-Attributen sind eine starke Erweiterung zu

CSS und können sehr viel Arbeit ersparen, wenn man etwa an die CSS-Dateien von

Unternehmen-Websites denkt, die meist mehr als 10000 Zeilen besitzen.

14

Links

1. http://meyerweb.com/eric/tools/css/reset/

2. http://developer.yahoo.com/yui/reset/

3. http://www.blueprintcss.org/

4. http://bgg.kematzy.com/

5. http://www.w3.org/TR/html5/elements.html#classes

6. http://jdclayton.com/blueprints_compress_a_walkthrough.html

7. http://960.gs/

8. http://developer.yahoo.com/yui/grids/

9. http://developer.yahoo.com/yui/grids/builder/

10. http://www.yaml.de/

11. http://builder.yaml.de/

12. http://www.yaml.de/de/community.html

13. http://creativecommons.org/licenses/by/2.0/de/

14. http://sass-lang.com/

15. http://lesscss.org/