Drücke die Tasten ◄ ► für weitere Artikel  

CSS-Frameworks im Überblick: 960 Grid System, YAML und mehr

Aus dem
t3n Magazin Nr. 28

06/2012 - 08/2012

CSS-Frameworks gibt es in großer Zahl und es werden immer mehr. Die Gründe für das starke Interesse sind vielfältig – das Lösungsangebot für Browserbugs etwa oder die komfortablere Entwicklung von „Responsive Design“, also Webseiten, die ihre Darstellung an die Bildschirmgröße der Ausgabegeräte anpassen. Eine Übersicht über aktuelle CSS-Frameworks.

CSS-Frameworks im Überblick: 960 Grid System, YAML und mehr

Letzter Schritt bei der Entwicklung von Stylesheets ist immer das Beheben von Browserbugs. Sollen sowohl gängige als auch ältere Browser unterstützt werden, kann es jedoch sehr zeitaufwändig sein, bis die Website in allen Browsern gleich dargestellt wird. Die CSS-Entwicklung mit einem Framework macht diesen Arbeitsschritt effektiver, da Browserbugs bereits Framework-intern gelöst sind und damit gar nicht erst auftreten.

Bei der Entwicklung einer neuen Website aufgrund ständig wiederkehrender Probleme immer wieder bei Null zu beginnen, ist nicht sinnvoll. Diese Probleme liegen besonders im Bereich der Darstellung der Website in verschiedenen Browsern und auf verschiedenen Endgeräten. Das führt dazu, dass Entwickler regelmäßig viel Zeit für die Optimierung der Stylesheets und das Browser-übergreifende Testen benötigen.

Meistens bieten CSS-Frameworks genau hierfür eine sehr gute Lösung. Es wird ein flexibles Layout mit mehreren Spalten angeboten, das sich mit nur wenigen Handgriffen den aktuellen Wünschen anpassen lässt. Auch andere CSS-basierte Elemente, etwa ein Dropdown-Menu, werden häufig direkt mitgeliefert.

Frameworks einbinden

Um die vordefinierten Styles eines Frameworks nutzen zu können, muss das Framework-Stylesheet im <head>-Teil der Website eingebunden werden. Dann kann unter Einhaltung der jeweiligen Framework-Struktur mit der Umsetzung der Website begonnen werden. Für Content Management Systeme gibt es sehr oft bereits Templates, in denen die bekanntesten CSS-Frameworks integriert wurden; alternativ bieten Tutorials Hinweise darauf, wie bekannte Frameworks implementiert werden können.

Die CSS-Klassen von Frameworks sind so ausgelegt, dass sie bei der Darstellung in den fünf gängigsten Browsern das gleiche Ergebnis liefern. So entfällt hier eine spätere Optimierungsarbeit. Die Frameworks sind generell kostenlos, können direkt heruntergeladen werden und sind unter Lizenzen veröffentlicht, die eine private und kommerzielle Nutzung erlauben.

Klein und einfach: reset.css

Jeder Browser verfügt über ein eigenes Standard-Stylesheet. Wird einem HTML-Element auf einer Website kein Style zugewiesen, werden Werte aus diesem browserinternen Stylesheet verwendet. Leider sind die Standard-Stylesheets nicht genormt und sind somit von Browser zu Browser unterschiedlich.

So kommt es zu Abweichungen in der Darstellung, besonders bei Abständen. Beim Zurücksetzen der Stylesheets werden deswegen HTML-Elementen Initialwerte zugewiesen. So wird für alle Browser eine gemeinsame Ausgangslage geschaffen.

tec css frameworks css reset
Standard-Browser-Stylesheets in Google Chrome (links) und Internet Explorer (Mitte) sehen erst nach einem Reset gleich aus (rechts).

Die meisten CSS-Frameworks besitzen einen eigenen Reset. Die populärsten Beispiele für eigenständige Resets sind die Version von Eric Mayer [1] oder das Reset-Stylesheet von HTML5 Doctor [2].

960 Grid System: Schnell und statisch

Layouts, die auf Gestaltungsrastern basieren, lassen sich mit Grid-Frameworks, durch vordefinierte CSS-Klassen, schnell und leicht in eine Website umwandeln. Das wohl bekannteste CSS-Grid-Framework ist das 960 Grid System von Nathan Smith [3].

tec css frameworks grid layout
Die Webseite von Sony Music basiert auf einem Gestaltungsraster (rote Spalten), welches mit dem 960 Grid System umgesetzt wurde.

Der Darstellungsbereich des 960 Grid System ist auf 960 Pixel Breite festgelegt. Zur Auswahl stehen die Optionen, den Darstellungsbereich in 12 Spalten mit einer Breite von je 60 Pixeln oder in 16 Spalten mit einer Breite von je 40 Pixeln zu unterteilen. In beiden Fällen liegt der Abstand zwischen den Spalten bei 20 Pixeln. Die erste und letzte Spalte haben je 10 Pixel Abstand zu den Außenkanten des Darstellungsbereichs.

Sollte keines der beiden Standardlayouts passen, lassen sich mit einem auf das Framework abgestimmten CSS-Generator [4] auch eigene Raster festlegen. Die dafür notwendigen Stylesheets finden sich auf der Website. Das 960 Grid System funktioniert in allen gängigen Browsern, einschließlich des Internet Explorers ab der Version 6.

1 3
Autor:
145 Shares bis jetzt –Dankeschön!

Bewerten
VN:F [1.9.22_1171]
19 Antworten
  1. von David Greiner am 25.05.2012 (07:56Uhr)

    Die Darstellung im Artikel, dass LessCss nur clientseitig über javascript kompilierbar ist, ist so nicht ganz richtig. Der leafo.Net/lessphp - Compiler macht gleiches serverseitig als php-skript. Auch für TYPO3 gibt es entsprechende Extensions wie t3_less.
    Viele Grüße!

  2. von Till am 18.10.2012 (17:44Uhr)

    @David Greiner: Kleine Ergänzung: FÜr Windows gibts einen netten Compiler namens SimpLESS, der wirklich gute Dienste leistet!

    Cheers!

  3. von Tom Kirschner via facebook am 18.10.2012 (17:56Uhr)

    Das IE6 Argument hat fast völlig (außer in China) an Gewichtung verloren - ich würde es daher nicht mehr nutzen um ein Framework zu verteidigen.Zum 960er grid würde ich auch nicht mehr greifen. 1140 ist für mich attraktiver.

  4. von Detlef Schäbel am 18.10.2012 (17:59Uhr)

    Hallo,

    in dem Zusammenhang möchte ich auf unsere YAML Implementation in TYPO3 hinweisen. Das Template kann unter http://if-20.com heruntergeladen werden.

    Viel Spaß beim testen.

    Detlef Schäbel

  5. von Dirk am 18.10.2012 (18:08Uhr)

    Bei mir kommt bootstrap und SASS zum Einsatz. Ich bin auf jeden Fall sehr zufrieden, weil gerade Sass die Sache doch schon viel übersichtlicher macht.

  6. von Jan am 18.10.2012 (18:18Uhr)

    YAML, allein schon, weil es von einem Dresdner erfunden wurde. ;)

  7. von Jan Beck via facebook am 18.10.2012 (18:28Uhr)

    Der Artikel wirkt etwas unkonzentriert und aus der Zeit gefallen.
    Reset.css verwendet doch heute bitte niemand mehr. Schaut euch mal normalize.css an.
    Unresponsives Layout, überladene Stylesheets und unsemantisches Markup mit 960gs? Nein danke.
    Bootstrap ist kein CSS Framework sondern eine UI Library. Mark Otto und Jacob Thornton arbeiten beide nicht mehr für Twitter.
    Das Thema Präprozessoren geht außerdem total unter und der Zusammenhang zu den Frameworks ist nicht wirklich klar (mit Verweis auf die Tatsache, dass Bootstrap LESS verwendet wäre das anders).
    Ich hätte mir gewünscht die Themen wären ausführlicher und zeitgemäßer behandelt worden.

  8. von t3n: CSS-Frameworks im Überblick: 960 G… am 19.10.2012 (00:23Uhr)

    [...] nicht top, aber dennoch einen Blick wert: der Artikel von Daniel Hallmann vom 18.10.2012 « CMS-Labor – Download [...]

  9. von maryisdead am 19.10.2012 (07:31Uhr)

    Schön zusammenhangslos geschriebener Artikel, wunderbar. Schnell mal was zusammengewürfelt. :-)

    Stimme im Übrigen mit Martin Schlagnitweit bzw. seinem Link und der markierten Antwort darin überein: Sogenannte CSS-Frameworks sind in der Regel überflüssiges Zeug, schreiben mir für meinen Geschmack zu viel vor und bringen Unmengen an Müll mit, den ich wahrscheinlich nie brauchen werde.

    Und das, was ich brauchen würde, kann ich mir selber mit ein wenig handgeschriebenem CSS und evtl. normalize.css sehr viel effektiver zusammenbauen.

    Und ich habe schon oft bei Leuten, die vermehrt auf Bootstrap und Konsorten setzen, bemerkt, dass Sie in Grenzsituationen, wo Ihnen das Framework nicht mehr weiterhilft oder sogar Steine in den Weg legt, verloren sind, weil Sie schlichtweg keine Ahnung haben, wie das ganze CSS-Zeug funktioniert und sie nur noch in der Lage sind, irgendwelche "span-12"- oder "offset-3"-CSS-Klassen an DIVs zu kleben.

  10. von Mirco am 19.10.2012 (08:00Uhr)

    Hi,

    ich hätte da noch ein zusätzliches Framework was definitiv in keiner Frameworksammlung fehlen sollte. "Foundation", mittlerweile in Version 3 erschienen, behauptet von sich "The most advanced responsive front-end framework in the world." zu sein.

    Ob es das wirklich ist, sollte jeder für sich selbst entscheiden, ich kann es nur wärmstens empfehlen ;)

  11. von Manuel am 19.10.2012 (08:31Uhr)

    Ich nutze auch kein CSS - Framework und die zusätzliche Arbeit, die ein reset.css macht, bezahlt mir keiner. Ohnehin bleiben selten Elemente in ihrer Standard-Formatierung, schon allein weil es hässlich ist wie die Nacht. Einige wenige Voreinstellungen sind wiederum sinnvoll, margin / padding z.B. bei Paragraphen können teils so übernommen werden - oder werden wie gesagt eh überschrieben. Der IE 6 stürzt bei mir kurz nach dem Öffnen direkt ab, weil er msn.com läd und hat vor etwa 3 Jahren aufgehört mich zu interessieren.

  12. von Daniel.C.Sturm am 19.10.2012 (09:24Uhr)

    Ich möchte doch auch noch mal zum Thema LESS (aber auch SASS, etc) bzw. allgemein dem Arbeiten mit CSS das Tool CodeKit ans Herz legen: http://incident57.com/codekit/

  13. von jswebschmiede am 19.10.2012 (14:23Uhr)

    Schöne Erklärung aber leider sind diese Frameworks, gerade 960 und Yaml, schon seit Jahren bekannt, deshalb kommt das etwas spät, hätte mich mehr gefreut wenn Ihr Frameworks vorstellt, die neu sind und vielleicht die Vorteile mehr herausstellt.

    Trotzdem für Einsteiger sehr schön geschrieben.

  14. von Jörg Schöneburg via facebook am 19.10.2012 (14:27Uhr)

    @Jan Beck, bitte? Selbst die Google Entwickler nutzen einen reset Stylsheet, wie willst du den sonst die verschieden Browser "normalisieren"? normalize.css = reset.css. selbst wenn du Less oder Sass nutzt brauchst du den, Den brauch man immer. Bootstrap ist kein Framework? Interessant. 960gs nicht responsive? Schon mal http://adapt.960.gs/ angeschaut? Da kann ich nur sagen, "gefährliches Halbwissen".

  15. von Stefan Schirmer via facebook am 21.10.2012 (19:33Uhr)

    normalize.css = reset.css? Da hast du was nicht ganz verstanden.

  16. von Malte am 23.10.2012 (15:28Uhr)

    960 Grid finde ich ganz gut. Sowieso hat jeder Entwickler seine eigene Vorgehensweise. Ich kenne einige, die komplett ohne Frameworks arbeiten.

  17. von InK: Einfaches Interface-Kit à la Boots… am 20.08.2013 (07:00Uhr)

    […] CSS-Frameworks im Überblick: 960 Grid System, YAML und mehr – t3n News […]

  18. von CSS Frameworks und wieso ich meines lieb… am 20.08.2013 (15:22Uhr)

    […] Auf t3n gibt es ein CSS Framework Review von Daniel Hallmann […]

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Aktuelles aus dem Bereich CSS
CSS-Diner: Nerd-Spiel mit CSS-Selektoren für zwischendurch
CSS-Diner: Nerd-Spiel mit CSS-Selektoren für zwischendurch

CSS Diner ist ein kleines Spiel, bei dem ihr mit CSS-Selektoren verschiedene Elemente aus einer interaktiven Grafik auswählen müsst. In diesem Artikel zeigen wir euch, warum dieses Spiel nicht... » weiterlesen

Hover.css: 50 Hover-Effekte für deine Webseite
Hover.css: 50 Hover-Effekte für deine Webseite

Hover.css bietet dir eine Sammlung von Hover-Effekten, die du auf verschiedene Elemente deiner Website anwenden kannst. Heute stellen wir dir diese kleine, aber feine CSS-Bibliothek kurz vor. » weiterlesen

CSS-Regions vor dem Aus: Google und Opera stellen sich gegen die Adobe-Technik
CSS-Regions vor dem Aus: Google und Opera stellen sich gegen die Adobe-Technik

Google- und Opera-Entwickler sehen keine Zukunft für CSS-Regions in der Blink-Engine. Bei Google sieht man in der Unterstützung vor allem ein Performance-Hindernis. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen