Entwicklung & Design

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

Seite 3 / 3

Von Nerds für Nerds: Boostrap

Bootstrap wurde von Designer Mark Otto und Entwickler Jacob Thornton, beide arbeiten für Twitter, ins Leben gerufen

Bootstrap, from Twitter“ [12] ist wie das 52framework kein reines CSS-Framework, Zielgruppe sind Designer und Entwickler vom Anfänger bis zum Profi. Von einem flexiblen 12-spaltigen Grid, das „Responsive Design“-fähig ist und in allen gängigen Browsern sowie auf mobilen Endgeräten passend skaliert dargestellt wird, über 12 jQuery-Plugins bis hin zu vorgefertigten Stylesheets für Typographie, Tabellen, Formulare und einem umfangreichen Iconset ist Bootstrap ein großes Komplettpaket. Ein ausführlicher Artikel zu Bootstrap findet sich ab Seite 165.

CSS-Erweiterungen

Programmierer gelangen schnell an die Grenzen von CSS. Als reine Auszeichnungssprache unterstützt CSS keine Variablen und selbst gut strukturierte Stylesheets können mit mehreren hundert Zeilen schnell unübersichtlich werden. SASS (Syntactically Awesome Stylesheets) [13] erweitert CSS deshalb um ein paar nützliche Eigenschaften.

SASS erweitert CSS um sehr nützliche Features.

Bei SASS, das auf Ruby basiert, wird statt einer CSS- eine SCSS-Datei erstellt. Diese SCSS-Datei wird dann Server-seitig in eine für den Browser verständliche CSS-Datei umgewandelt.

Die Vorteile von SASS sind die Nutzung von Variablen (auch in Kombination mit mathematischen Operationen) und die Möglichkeit, Klassen ineinander zu verschachteln, was die Übersicht der Stylesheets stark verbessert. Auch die Vererbung von Styles einer Klasse ist möglich.

Eine weitere SASS-Eigenschaft sind Mixins, definierte Code-Blöcke, die einfach an einer anderen Stelle des Stylesheets erneut eingefügt werden können. Neben einfachen Mixins erlaubt die Funktion auch, Parameter zu übergeben, um Code-Blöcke flexibel redundant einzusetzen.

Als Alternative zu SASS bietet sich LESS [14] an. Im Gegensatz zu SASS ist es hierbei auch möglich, die Stylesheets mit dem Client-seitigen JavaScript und nicht nur per Ruby generieren zu lassen. Abgesehen davon unterscheiden sich die beiden Frameworks jedoch kaum voneinander.

Fazit

CSS-Frameworks sind sehr gute und nützliche Tools, die Webentwickler durchaus entlasten können. Sie senken den Arbeitsaufwand bei der Stylesheet-Entwicklung und sorgen für eine einheitliche Darstellung der Website in allen Browsern. Frameworks mit flexiblen Seitenlayouts passen sich direkt der Bildschirmgröße des Ausgabegeräts an, sodass ein guter Einstieg in Responsive Design mit deutlich geringerem Zeitaufwand möglich ist.

Ähnlich wie SASS erlaubt LESS ansatzweise das Programmieren mit CSS.

Die festgelegte Namenskonvention für die CSS-Klassen der Frameworks wirkt auf viele Entwickler eher abschreckend, birgt aber bei der Arbeit im Team einen wesentlichen Vorteil: Da alle Teammitglieder die gleichen Styles als Fundament kennen, kann man sich schneller in den Stylesheets orientieren und zurecht finden.

Davon abgesehen lassen sich die CSS-Klassen der Frameworks mit der Nutzung von SASS relativ einfach mit eigenen Klassen verknüpfen und so die interne Namenskonventionen nutzen [15].

Die Verwendung eines Frameworks ist immer mit einem Kompromiss verbunden. Hält sich das Layout der Website an die Gegebenheiten des Frameworks, ist die Arbeit effizient. Sind jedoch Sonderwünsche und innovative Lösungen gefragt, die die Grenzen des Frameworks überschreiten, werden unter Umständen doch viele Zeilen CSS für einen komplexen Workaround nötig.

Die Nutzung eines Frameworks sollte deshalb vor Beginn der Entwicklung sorgfältig überlegt und durchdacht sein. Denn nachträgliche Umstiege auf ein anderes Framework sind aufgrund der stark abweichenden Strukturen und Klassenbezeichnungen mit sehr viel Aufwand verbunden.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

16 Kommentare
David Greiner
David Greiner

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

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

Cheers!

Antworten
Detlef Schäbel

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
Dirk

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
Jan

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

Antworten
maryisdead
maryisdead

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
Mirco

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
Manuel

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
Daniel.C.Sturm
Daniel.C.Sturm

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
jswebschmiede

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
Malte

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

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung