Was sind CSS-Frameworks und wo braucht man die “Dinger”? Das sind die Fragen, die oft im Zusammenhang mit den nützlichen Frameworks auftauchen. War im Web 1.0 CSS mehr als Schrift und Tabellenformatierung verwendet worden, hat sich das in den letzten Jahren immer mehr verändert.
Im Web 2.0 werden fast immer die kompletten Websites über CSS Positionierung gestaltet und designed. Wie bereits im Web 1.0, ist immer noch ein deutlicher Unterschied erkennbar, wie die einzelnen Browser mit CSS umgehen (hierzu gibt es Tonen an speziellem Material im WWW, deshalb lass ich das einfach mal so stehen).
CSS-Frameworks beschäftigen sich in Summe damit, eine entsprechend einfache und trotzdem browserübergreifende Gestaltung zu ermöglichen und zwar nicht nur für ausgesprochene CSS Spezialisten, sondern bereits für den ambitionierten Hobby WebDesigner.
Was alle nachfolgenden Frameworks gemeinsam haben, ist die Tatsache, dass sich diese mehr oder weniger an einem Raster-System (Grid) orientieren um Elemente entsprechend auf der Seite zu positionieren. Je nach verwendetem System kann dies mehr oder weniger komfortabel von statten gehen.
Nachfolgend mal eine Übersicht über die vier großen Frameworks, die in vielen Projekten Verwendung finden:
Blueprint
Das Blueprint CSS Framework besteht aus 24 Spalten mit einer Breite von 30 Pixeln + jeweils 10 Pixeln Freiraum zwischen den einzelnen Spalten. Dadurch ergibt sich für das Basis-Framework eine feste Seitenbreite von 950 Pixeln. Im Downloadpaket enthalten sind zusätzlich eine gut aufgebaute Typography – CSS Datei, sowie eine gute Formatierung für Formulare. Die Dateien sind sowohl in einem lesbaren Format vorhanden, als auch zusammengefasst in einer Datei um die Ladezeiten entsprechend zu reduzieren. Wer eigene Blueprint basierende Dateien erstellen will, findet sogar einen entsprechend verwendbaren Kompressor. Durch letzteres ist es möglich ein individuelles Blueprint zu erstellen und auf den ganzen Balast einer “Download-Lösung” zu verzichten.
Zusätzliche Plugins für Tabs, Buttons und ein Fluid Design gibt es von Drittanbietern ebenfalls auf der Seite zum herunterladen.
Das 960 System besteht entweder aus einer 12 Spalten Basis, bei der jede Spalte eine Breite von 60 Pixel aufweist bzw. aus einer 16 Spalten Basis bei der jede Spalte eine Breite von 40 Pixeln. Jede Spalte hat links und rechts jeweils 10 Pixel Platz, so dass zwischen jeder Spalte ein Raum von 20 Pixeln entsteht.
Als besonderes Add-On bietet das 960 System Templates für verschiedene Programme (bspw. Fireworks, Indesign, Photoshop etc.) an.
Das YAML Framework existiert schon seit längerem und ist sowohl für feste Breite, als auch für flexible, elastische Layouts ausgelegt. Der Ansatz von YAML zu den anderen Frameworks unterscheidet sich etwas, da YAML auch auf die Barrierefreiheit besonderen Wert legt (was aber bei den anderen Frameworks ebenso manuell hinzugefügt werden kann). Neben der Website ist u. a. ein YAML Builder verfügbar, der das “mundgerechte” erstellen der benötigten CSS-Dateien erlaubt.
Größter Kritikpunkt an YAML ist das Lizenzsystem, beim dem YAML entweder entsprechend erwähnt werden muss auf der Website oder aber eine Kauf-Lizenz notwendig ist.
Das Grid System wurde von Yahoo entwickelt und kann auch von dort herunter geladen werden. YUI-Grid ist sowohl für ein flexibles Layout zu verwenden, als auch für feste Breiten. Bei den fest definierten Breiten stehen750 Pixel, 950 Pixel und 974 Pixel zur Wahl. Ein Grid-Builder steht hier ebenfalls bereit, ebenso wie viele Beispiele.
In Summe ist zu allen Frameworks zu sagen, dass es absolute Befürworter gibt, die die Vorteile schätzen, genauso aber auch Designer, die mit den Frameworks nichts anfangen können. Größter Kritikpunkt ist der Balast, den einige Frameworks mit sich rumschleppen bzw. das nicht für alle notwendigen CSS-Lösungen jeweils der kürzeste Ansatz gewählt wird (oft aber auch aus dem Grund, dass die etwas längeren Ansätze mit dem kompletten Framework funktionieren).
Ich persönlich habe sehr gute Erfahrungen mit Blueprint gemacht und kann das nur empfehlen. Arbeitet man sich etwas in ein Framework ein, sind damit durchaus beachtliche Resultate möglich, es ist nur noch notwendig Eure Ideen umzusetzen.
Mit dem RSS 2.0 Feed kannst Du alle Kommentare und Diskussionen zu diesem Thema verfolgen.
Du kannst außerdem eine Antwort schreiben oder einen Trackback von Deiner eigenen Seite senden.
CSS-Frameworks
Was sind CSS-Frameworks und wo braucht man die “Dinger”? Das sind die Fragen, die oft im Zusammenhang mit den nützlichen Frameworks auftauchen. War im Web 1.0 CSS mehr als Schrift und Tabellenformatierung verwendet worden, hat sich das in den letzten Jahren immer mehr verändert.
Im Web 2.0 werden fast immer die kompletten Websites über CSS Positionierung gestaltet und designed. Wie bereits im Web 1.0, ist immer noch ein deutlicher Unterschied erkennbar, wie die einzelnen Browser mit CSS umgehen (hierzu gibt es Tonen an speziellem Material im WWW, deshalb lass ich das einfach mal so stehen).
CSS-Frameworks beschäftigen sich in Summe damit, eine entsprechend einfache und trotzdem browserübergreifende Gestaltung zu ermöglichen und zwar nicht nur für ausgesprochene CSS Spezialisten, sondern bereits für den ambitionierten Hobby WebDesigner.
Was alle nachfolgenden Frameworks gemeinsam haben, ist die Tatsache, dass sich diese mehr oder weniger an einem Raster-System (Grid) orientieren um Elemente entsprechend auf der Seite zu positionieren. Je nach verwendetem System kann dies mehr oder weniger komfortabel von statten gehen.
Nachfolgend mal eine Übersicht über die vier großen Frameworks, die in vielen Projekten Verwendung finden:
Blueprint
Das Blueprint CSS Framework besteht aus 24 Spalten mit einer Breite von 30 Pixeln + jeweils 10 Pixeln Freiraum zwischen den einzelnen Spalten. Dadurch ergibt sich für das Basis-Framework eine feste Seitenbreite von 950 Pixeln. Im Downloadpaket enthalten sind zusätzlich eine gut aufgebaute Typography – CSS Datei, sowie eine gute Formatierung für Formulare. Die Dateien sind sowohl in einem lesbaren Format vorhanden, als auch zusammengefasst in einer Datei um die Ladezeiten entsprechend zu reduzieren. Wer eigene Blueprint basierende Dateien erstellen will, findet sogar einen entsprechend verwendbaren Kompressor. Durch letzteres ist es möglich ein individuelles Blueprint zu erstellen und auf den ganzen Balast einer “Download-Lösung” zu verzichten.
Zusätzliche Plugins für Tabs, Buttons und ein Fluid Design gibt es von Drittanbietern ebenfalls auf der Seite zum herunterladen.
Link: http://www.blueprintcss.org/
960 Grid-System
Das 960 System besteht entweder aus einer 12 Spalten Basis, bei der jede Spalte eine Breite von 60 Pixel aufweist bzw. aus einer 16 Spalten Basis bei der jede Spalte eine Breite von 40 Pixeln. Jede Spalte hat links und rechts jeweils 10 Pixel Platz, so dass zwischen jeder Spalte ein Raum von 20 Pixeln entsteht.
Als besonderes Add-On bietet das 960 System Templates für verschiedene Programme (bspw. Fireworks, Indesign, Photoshop etc.) an.
Quelle: http://960.gs/
YAML
Das YAML Framework existiert schon seit längerem und ist sowohl für feste Breite, als auch für flexible, elastische Layouts ausgelegt. Der Ansatz von YAML zu den anderen Frameworks unterscheidet sich etwas, da YAML auch auf die Barrierefreiheit besonderen Wert legt (was aber bei den anderen Frameworks ebenso manuell hinzugefügt werden kann). Neben der Website ist u. a. ein YAML Builder verfügbar, der das “mundgerechte” erstellen der benötigten CSS-Dateien erlaubt.
Größter Kritikpunkt an YAML ist das Lizenzsystem, beim dem YAML entweder entsprechend erwähnt werden muss auf der Website oder aber eine Kauf-Lizenz notwendig ist.
Link: http://www.yaml.de/
YUI-Grids
Das Grid System wurde von Yahoo entwickelt und kann auch von dort herunter geladen werden. YUI-Grid ist sowohl für ein flexibles Layout zu verwenden, als auch für feste Breiten. Bei den fest definierten Breiten stehen750 Pixel, 950 Pixel und 974 Pixel zur Wahl. Ein Grid-Builder steht hier ebenfalls bereit, ebenso wie viele Beispiele.
Link: http://developer.yahoo.com/yui/grids/
In Summe ist zu allen Frameworks zu sagen, dass es absolute Befürworter gibt, die die Vorteile schätzen, genauso aber auch Designer, die mit den Frameworks nichts anfangen können. Größter Kritikpunkt ist der Balast, den einige Frameworks mit sich rumschleppen bzw. das nicht für alle notwendigen CSS-Lösungen jeweils der kürzeste Ansatz gewählt wird (oft aber auch aus dem Grund, dass die etwas längeren Ansätze mit dem kompletten Framework funktionieren).
Ich persönlich habe sehr gute Erfahrungen mit Blueprint gemacht und kann das nur empfehlen. Arbeitet man sich etwas in ein Framework ein, sind damit durchaus beachtliche Resultate möglich, es ist nur noch notwendig Eure Ideen umzusetzen.
Verwandte astBlog Beiträge: