CSS Framework by °visualcosmos

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 NamensnennungNicht-kommerziell-Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Inhaltsverzeichnis Seite 1. Einleitung 2. Klein, aber effektiv: CSS Reset 3. Grid Frameworks 3.1. Grid-Framework: Blueprint 3.2. Grid-Framework: 960 Grid System 3.3. Grid-Framework: YUI2 Grid CSS 3.4. Vergleich Grid-Frameworks 4. CSS Framework YAML 5. Serverseitiges CSS-Framework: Sass 6. Fazit Links

2 3 3 4 6 7 8 8 10 13 14

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.

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

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 â&#x20AC;&#x17E;containerâ&#x20AC;&#x153; wird als erstes der Darstellungsbereich festgelegt: 4

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:

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 GridFrameworks zeigen: Die Klassennamen. Laut Definition im HTML 5 Draft5 soll das classAttribut 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, 6

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. 7

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.

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 BrowserCSS-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.

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.

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 11

„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

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.

Links 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15.

http://meyerweb.com/eric/tools/css/reset/ http://developer.yahoo.com/yui/reset/ http://www.blueprintcss.org/ http://bgg.kematzy.com/ http://www.w3.org/TR/html5/elements.html#classes http://jdclayton.com/blueprints_compress_a_walkthrough.html http://960.gs/ http://developer.yahoo.com/yui/grids/ http://developer.yahoo.com/yui/grids/builder/ http://www.yaml.de/ http://builder.yaml.de/ http://www.yaml.de/de/community.html http://creativecommons.org/licenses/by/2.0/de/ http://sass-lang.com/ http://lesscss.org/