Entwicklung & Design

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

Seite 2 / 3

Die große Stärke des 960 Grid System ist die Effizienz, mit der man eine Seite entwickeln kann. Dazu kommt die schnelle Erlernbarkeit, da der Aufbau des Frameworks leicht verständlich ist. Durch die festgelegte Breite des Darstellungsbereichs ist das 960gs aber nicht für flexible Layouts, und damit für diverse Endgeräte, geeignet.

Das 960 Grid System verwendet nur wenige Klassen für den Aufbau einer Webseite und ist damit verhältnismäßig einfach zu erlernen.

Das 960 Grid System im Detail
Der Seitenaufbau des 960 Grid Systems besteht aus einem Haupt-Container,
der in einzelne Spalten unterteilt wird. Dieser Haupt-Container ist ein DIV-Container mit der Klasse „container_12“, wenn es sich um das standardmäßige Grid mit 12 Spalten handelt, oder der Klasse „container_16“, wenn 16 Spalten benötigt werden.

Innerhalb des Containers können dann weitere DIV-Elemente mit ihrer jeweiligen Spaltenbreite eingefügt werden; diese erhalten Klassennamen von „grid_1“ bis „grid_16“. Vom Namen lässt sich ableiten, über wie viele Spalten des Darstellungsbereichs sich der DIV-Container erstreckt.

Diese Container lassen sich dann wiederum in weitere Spalten unterteilen, wobei bei hierarchisch tieferen Spalten-Containern (Klasse „grid_xy“), also Spalten innerhalb übergeordneter Spalten, das erste Element mit der Klasse „alpha“ und das letzte Spaltenelement mit der Klasse „omega“ ausgezeichnet werden muss.

Für leere Spalten neben einem Container lässt sich etwa mit der Klasse „prefix_2“ ein Abstand von zwei leeren Spalten vor dem Container einfügen. Leere Spalten nach dem Container können mit der Klasse „suffix_x“ angehängt werden.

Flexible Layouts mit Responsive Design

Layouts mit fester Breite werden auf mobilen Endgeräten aufgrund der kleinen Displaygröße mehr schlecht als recht dargestellt. Für Responsive Design (siehe auch Artikel ab Seite 155) gibt es Frameworks wie etwa das Fluid 960 Grid System von Stephen Bau [5]. Dieses basiert zwar auf dem 960 Grid System, bietet aber zudem flexible Layouts an, die sich automatisch in ihrer Darstellung an die Bildschirmgröße des Anzeigegeräts anpassen.

Fluid 960 Grid System verfügt über ein 12- oder 16-Spalten-Grid-Framework (wahlweise statisch oder flexibel) und bietet außerdem Style-Vorlagen für HTML-Elemente wie Überschriften und Formular-Felder. Ein weiteres Plus ist ein bereits implementierbares CSS-Dropdown-Menü und weitere optionale Add-ons, die wahlweise auf den JavaScript-Frameworks Mootools [6] oder jQuery [7] basieren.

Eine Alternative für flexible Layouts ist das 1140 CSS Grid [8]. Das Framework basiert auf einem 12-spaltigen und 1140 Pixel breiten Grid. Es eignet sich am besten bei einer Auflösung von 1280 Pixeln Breite und passt sich bei kleineren Monitoren oder mobilen Endgeräten perfekt an die Breite des jeweiligen Displays an.

CSS-Komplettpaket: YAML

YAML (Kurzform für „Yet Another Multicolumn Layout“) [9] ist eines der bekanntesten CSS-Frameworks. Von Dirk Jesse in den letzten sechseinhalb Jahren ständig weiterentwickelt, liegt YAML momentan in der vierten Version vor.

YAML ist ein sehr umfangreiches Modul-basiertes CSS-Framework

Das Framework ist modular aufgebaut. Neben dem Kernmodul, das flexible Layouts sowie Grid-Layouts mit fester Breite inkludiert, können nach Belieben weitere Module, etwa für Navigation, Formulare oder auch Add-ons eingebunden werden. YAML ist bereits für die Benutzung von HTML5 und CSS3 ausgelegt und ein guter Ausgangspunkt für Responsive Design in allen gängigen Browsern.

52framework: HTML5 und CSS3

Alle Vorteile und Neuerungen von HTML5 in nahezu allen Browsern einsetzen zu können, ist der Leitgedanke des 52frameworks [10]. Durch den Einsatz der JavaScript-Bibliothek Modernizr [11] und weiteren etablierten Webtools ist eine Sammlung an Lösungen entstanden, die meist sogar im IE6 funktioniert.

Das 52framework bietet HTML5 und CSS3 auch in älteren Browsern.

Für Browser, die CSS3 unterstützen, findet sich eine anfängliche Sammlung von Klassen, in denen bereits CSS3-Features wie abgerundete Ecken, Schlagschatten und Farbverläufe (browserübergreifend) realisiert sind. Im Download von 52framework findet sich auch noch ein separates Form-Framework, das die Gestaltung von Formularen vereinfacht.

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