Vorheriger Artikel Nächster 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
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
12 Antworten
  1. von David Greiner am 25.05.2012 (07:56 Uhr)

    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!

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

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

    Cheers!

    Antworten Teilen
  3. von Detlef Schäbel am 18.10.2012 (17:59 Uhr)

    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

    Antworten Teilen
  4. von Dirk am 18.10.2012 (18:08 Uhr)

    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.

    Antworten Teilen
  5. von Jan am 18.10.2012 (18:18 Uhr)

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

    Antworten Teilen
  6. von maryisdead am 19.10.2012 (07:31 Uhr)

    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.

    Antworten Teilen
  7. von Mirco am 19.10.2012 (08:00 Uhr)

    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 ;)

    Antworten Teilen
  8. von Manuel am 19.10.2012 (08:31 Uhr)

    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.

    Antworten Teilen
  9. von Daniel.C.Sturm am 19.10.2012 (09:24 Uhr)

    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/

    Antworten Teilen
  10. von jswebschmiede am 19.10.2012 (14:23 Uhr)

    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.

    Antworten Teilen
  11. von Malte am 23.10.2012 (15:28 Uhr)

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

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Aktuelles aus dem Bereich CSS
CSS3-Shapes: Diese Möglichkeiten eröffnen sich mit dem neuen CSS-Modul
CSS3-Shapes: Diese Möglichkeiten eröffnen sich mit dem neuen CSS-Modul

Mit CSS-Shapes wird es Webworkern in Zukunft möglich sein, Texte um Objekte fließen zu lassen wie in einem Satzprogramm. Wir verraten, wie CSS-Shapes funktionieren und wie du sie einsetzen kannst. » weiterlesen

Magic kurz vorgestellt: Animate.css für Anwendungsentwickler
Magic kurz vorgestellt: Animate.css für Anwendungsentwickler

Wir haben bereits über die CSS-Bibliothek animate.css berichtet. Wer noch mehr und vor allem andere Animations-Effekte benötigt, der sollte sich die Beta von Magic ansehen. » weiterlesen

CSS-Stylesheets asynchron nachladen – so gehts!
CSS-Stylesheets asynchron nachladen – so gehts!

Häufig benötigt ihr einen Teil des CSS nicht gleich zu Beginn des ersten Seitenaufrufs. Wir stellen euch ein kleines Snippet vor, das ein asynchrones Nachladen von CSS-Dateien ermöglicht. » weiterlesen

Kennst Du schon unser t3n Magazin?

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