Entwicklung & Design

Layout-Frameworks für Webentwickler: CSS- und Grid-Frameworks erleichtern professionelle Webentwicklung

Seite 2 / 5

Die Layout-Frameworks kommen!

Im Bereich der Softwareentwicklung sind Frameworks wie CakePHP, jQuery und Django weit verbreitet. HTML und CSS sind dagegen keine Programmiersprachen wie PHP, JavaScript oder Python. Aus diesem Grund ergeben sich einige grundsätzliche Unterschiede, was die Beschreibung eines Frameworks zur Gestaltung von Webseiten betrifft. Bei Layout-Frameworks handelt es sich nicht um Software-Bibliotheken mit parametrisierten Funktionen, sondern vielmehr um Sammlungen aufeinander abgestimmter HTML- und CSS-Codebausteine.

Gerade in den letzten beiden Jahren sind zahlreiche spannende Projekte mit unterschiedlichsten Ansätzen entstanden. In der Blogosphäre werden entsprechende Themen unter dem Begriff „CSS-Frameworks“ behandelt, die englischsprachige Wikipedia führt unter dieser Rubrik eine recht vollständige und aktuelle Liste aktiver Projekte [2]. Diese lassen sich jedoch nicht ohne eine grundlegende Klassifizierung miteinander vergleichen.

Es gibt aktuell zwei Methoden, nach denen ein solches Framework aufgebaut sein kann, diese sind jedoch von ihren Zielen und Layoutmethoden grundverschieden. Wir unterscheiden zwischen Grid-Framework und CSS-Framework – der Begriff Layout-Framework dient als übergeordneter Begriff.

Grid-Frameworks

Grid-Layouts haben ihren Ursprung im Gestaltungsraster des Printbereichs, werden jedoch auch im Webdesign immer beliebter. Sie lösen mehr und mehr das klassische Spaltenlayout ab, da sie eine sehr feingliedrige und individuelle Unterteilung des Layouts ermöglichen. Ein solches Raster lässt sich sehr einfach durch ein System von CSS-Klassen beschreiben, das Containerbreiten und Abstände innerhalb des Rasters definiert. Grids sind die Basis der meisten anwendungsorientierten Layout-Frameworks, die im Weiteren vereinfacht als Grid-Frameworks bezeichnet werden.

Der bekannteste Vertreter unter den Grid-Frameworks ist das im August 2007 veröffentlichte Blueprint CSS [3]. Es basiert auf einem 24-Spalten-Grid, ist auf die Erstellung fixer Layouts ausgerichtet und stellt neben der eigentlichen Layoutkomponente noch das Reset-Stylesheet von Eric Meyer [4], typographische Vorlagen für die Inhalte sowie ein einfaches Druckstylesheet zur Verfügung.

Das 960-Grid-System (960.gs) [5], das im März 2008 veröffentlicht wurde, hat sich Minimalismus auf die Fahnen geschrieben und konzentriert sich rein auf die Bereitstellung eines wahlweise 12- oder 16-Spalten-Grids mit einer Gesamtbreite von 960 Pixeln. Daneben werden außer einem Reset-Stylesheet keine weiteren CSS-Bausteine mitgeliefert, dafür jedoch zahlreiche Vorlagen, um in Photoshop, Fireworks oder Visio mit diesen Gridrastern zu arbeiten.

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

2 Kommentare
Vladimir Carrer

I used google translate in order translate this article from German. I sow in the article that my framework Emastic is been called (clone) of Blueprint or 960.gs.

Here is little history:First came YAML but was to difficult to be understand, then Blueprint was based on ljworld.com layout (Frameworks for Designers) then came 960.gs with the same building logic like Blueprint. So everything is clone or copy of Blueprint. Or every framework based on „float“ is copy of Blueprint!?

There are different points of view I will say 960.gs is evolution of Blueprint.

When I build Emastic I wonted to be improvement of the other CSS Frameworks. It is the first lightweight framework(only 4kb) it is the first to implement easy fluid column, it is the first to implement 3 layout system and many other original solutions.

My advice is if you want to understand how one CSS Framework works open the code and try to understand it. If you like the code and the logic of that framework, use it.

Antworten
Dirk Jesse

Hi Vladimir, thank you for your comment. Of course allmost every framework development makes some improvements but that wasn’t the key here. All mentioned grid frameworks are based on the same layout technique. Blueprint CSS and 960.gs seem to be the „big players“ that make CSS-based grid-layouts easy for everyone. Other frameworks like Emastic use the same techniques. Of course also YAML and YUI are using floats (Who doesn’t?) but there layout techniques differ from the the basic „grid“ solution as they provide more flexible column-based layout solutions – and are therefore a little more complex.
I fully agree with your advice. There’s no best or worst framework. Users should test them and use the one, that fits best to their needs and workflow.

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