Daniel Hallmann
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.
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].
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.
von David Greiner 25.05.2012 (07:56Uhr) 1.
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!
von Till 18.10.2012 (17:44Uhr) 2.
@David Greiner: Kleine Ergänzung: FÜr Windows gibts einen netten Compiler namens SimpLESS, der wirklich gute Dienste leistet!
Cheers!
von Tom Kirschner via facebook 18.10.2012 (17:56Uhr) 3.
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.
von Detlef Schäbel 18.10.2012 (17:59Uhr) 4.
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
von Dirk 18.10.2012 (18:08Uhr) 5.
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.
von Jan 18.10.2012 (18:18Uhr) 6.
YAML, allein schon, weil es von einem Dresdner erfunden wurde. ;)
von Jan Beck via facebook 18.10.2012 (18:28Uhr) 7.
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.
von Martin Schlagnitweit 18.10.2012 (18:50Uhr) 8.
Ohne Worte:
http://stackoverflow.com/questions/203069/what-is-the-best-css-framework-and-are-they-worth-the-effort
von t3n: CSS-Frameworks im Überblick: 960 G… 19.10.2012 (00:23Uhr) 9.
[...] nicht top, aber dennoch einen Blick wert: der Artikel von Daniel Hallmann vom 18.10.2012 « CMS-Labor – Download [...]
von maryisdead 19.10.2012 (07:31Uhr) 10.
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.
von Mirco 19.10.2012 (08:00Uhr) 11.
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 ;)
von Manuel 19.10.2012 (08:31Uhr) 12.
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.
von Daniel.C.Sturm 19.10.2012 (09:24Uhr) 13.
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/
von jswebschmiede 19.10.2012 (14:23Uhr) 14.
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.
von Jörg Schöneburg via facebook 19.10.2012 (14:27Uhr) 15.
@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".
von Stefan Schirmer via facebook 21.10.2012 (19:33Uhr) 16.
normalize.css = reset.css? Da hast du was nicht ganz verstanden.
von Malte 23.10.2012 (15:28Uhr) 17.
960 Grid finde ich ganz gut. Sowieso hat jeder Entwickler seine eigene Vorgehensweise. Ich kenne einige, die komplett ohne Frameworks arbeiten.