Drücke die Tasten ◄ ► für weitere Artikel  

8 Grid-Systeme, die Webworkern das Leben leichter machen

Ein Grid-System kann Webworkern viel Arbeit abnehmen. Wir haben uns umgeschaut und stellen euch acht Frameworks vor, die euch beim Layout einer Website unterstützen.

8 Grid-Systeme, die Webworkern das Leben leichter machen

Grids sind unsichtbare Helfer, die das Fundament für das Layout einer Webseite bilden. Es ist nicht schlimm, wenn man bei der Gestaltung einer Webseite auf Grid-Systeme verzichtet. Bei einigen Projekte dürfte das sogar sinnvoll sein. Die Vorteile solcher Systeme sind aber auch nicht von der Hand zu weisen:

  • Konsistentes Design
  • Reduktion von CSS-Fehlern
  • Funktioniert wie ein Wireframe
  • Schnelle Entwicklung von Prototypen
  • Relativ unkompliziert Änderungen durchführen
  • Cross-Browser-Support

Welches Grid-System euerem Projekt zugrunde liegen soll, entscheidet sich oft nach Abschluss der Layout-Phase. Wir haben eine Liste verschiedener Grid-Systeme für euch zusammengestellt:

960 Grid-System

960-Grid-System

Das wohl bekannteste Grid-System dürfte das 960 Grid-System sein. Das System ist darauf ausgelegt, Layouts für eine Breite von 960 Pixeln zu gestalten und kommt als 12- und 16-spaltige Version zum Einsatz. Als Hilfsmittel können eine Reihe von Layout-Vorlagen für verschiedenste Grafik- und Layout-Programme heruntergeladen werden.

Blueprint CSS Grid-System

Blueprint Grid-System

Blueprintcss ist ein sehr vielseitiges Rastersystem, das neben den Spalten-Layout-Vorgaben mit einem CSS-Reset sowie Schrift-, Formular- und Print-Styles daherkommt. Außerdem stehen für blueprint eine Reihe von nützlichen Tools und Vorlagen zum Download bereit.

1140px Grid-System

1140 Grid System

Das 12-Spaltige 1140px Grid-System ist perfekt für Bildschirme mit einer Auflösung von 1280 Pixel Breite. Auf kleineren Displays wird das System „flüssig“ und passt sich den jeweiligen Viewport-Größen an.

320 and Up Grid-System

320 and up Grid-System

Einen sehr interessanten Ansatz verwendet das 320 and Up. Hierbei arbeitet man sich, im Gegensatz zur klassischen Herangehensweise, vom kleinsten Display zum Desktop voran. So sollen lange Ladezeiten für Smartphones verhindert werden. Natürlich funktioniert das Ganze auch anders herum.

YAML - Yet another Multicolumn Layout

YAML Grid-System

Mit YAML können schnell flexible Layouts erstellt werden. Das Framework selbst ist modular aufgebaut und bietet zahlreiche Erweiterungen. Um bei den vielfältigen Möglichkeiten nicht den Überblick zu verlieren, bietet YAML eine sehr ausführliche Online-Dokumentation.

xyCSS

xycss Grid-System

xy.css liefert alles was Entwickler brauchen, um geräteneutrale Layouts zu erstellen und bündelt alles in einem einzigen Stylesheet-Template. Es neutralisiert Browser-Styles, kombiniert horizontale und vertikale Grids und ermöglicht so, sehr flexible Responsive Designs.

Twitter Bootstrap

Das Twitter Bootstrap Framework liefert neben einem 12-Spalten Grid viele weitere Komponenten, die weit über ein Grid-Layout hinausgehen. Darunter Stylesheets für Typografie, Formulare und weitere User-Interface-Elemente. Bootstrap ist ebenfalls mit zahlreichen JavaScript Erweiterungen ausgestattet und bietet zusätzlich einen Web-Generator für individuell angepasste Bootstrap-Packages.

Gridinator

Gridinator

Wem die vorgefertigten Grid-Systeme allesamt nicht passen, kann sicht mit dem Gridinator ein eigenes Gridsystem zusammenstellen lassen. Das Tool liefert eine CSS-Datei und die dazugehörigen Grid-Bilder als Layout-Hilfe zum Download.

Welche Grid-Systeme und Tools benutzt ihr?

131 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
31 Antworten
  1. von Phillip Plum am 22.01.2013 (10:04Uhr)

    Wo ist denn Bootstrap?

  2. von Matthäus Pielok via facebook am 22.01.2013 (10:06Uhr)

    da fehlt mir Foundation 3: http://foundation.zurb.com/

  3. von Tom Kirschner via facebook am 22.01.2013 (10:08Uhr)

    selbstverständlich benutzt man ein grid. und um spannungen aufzubauen verlässt man es.

  4. von mah1987 am 22.01.2013 (10:08Uhr)

    Das wollte ich auch gerade Fragen beim durchscrollen @Phillip Plum :)

    Ich selbst hab eine Zeitlang mit http://lessframework.com/ auch ganz nett und klein. Aber im Vergleich zu Bootstrap ein "nichts"

  5. von Jens Wiese am 22.01.2013 (10:09Uhr)

    Und wo ist Foundation?

  6. von René am 22.01.2013 (10:11Uhr)

    Bootstrap ist kein Grid-System … allerdings YAML auch nicht. Denn das ist, wie Bootstrap oder Foundation ein Framework (die meist etwas mehr vordefinieren, als nur das Grid).

  7. von Ilja Zaglov am 22.01.2013 (10:13Uhr)

    Ja, da war doch noch was. Reiche ich sofort nach.

    Bootstrap ist zwar kein reines Grid-System, bringt aber ein Grid-System mit sich. Da haben die Vorredner schon nicht unrecht.

  8. von René am 22.01.2013 (10:17Uhr)

    Dann müssen Foundation, inuit.css etc. auch aufgeführt werden. Der Artikeltitel wäre dann allerdings nicht mehr zielführend – entweder Frameworks oder Grid-Systeme. ;)

  9. von Carsten am 22.01.2013 (10:37Uhr)

    Da fehlt noch Skeleton ... http://www.getskeleton.com/

  10. von Marc am 22.01.2013 (11:02Uhr)

    Grid-Systeme und -Frameworks wie Sand am Meer:

    _ http://goldengridsystem.com/
    _ http://framelessgrid.com/
    _ http://www.responsivegridsystem.com/
    _ http://responsive.gs/
    _ http://www.columnal.com/
    _ http://fluidbaselinegrid.com/

    Um noch ein paar in die Runde zu werfen. Eine Empfehlung wäre auf jeden Fall noch das oben schon erwähnte Foundation 3 Framework wert. (http://foundation.zurb.com/)

  11. von badtwin am 22.01.2013 (11:19Uhr)

    Ein kleines und praktisches Tool für Grids ist http://gridpak.com/

  12. von Holger am 22.01.2013 (11:38Uhr)

    Na wenn es Bootstrap rein geschafft hat darf Foundation nicht fehlen. Meiner Meinung nach die beiden Platzhirsche im "all-inclusive" Framework Bereich...

  13. von René am 22.01.2013 (11:43Uhr)

    Ack @Holger

  14. von Ilja Zaglov am 22.01.2013 (11:59Uhr)

    Also einen Anspruch auf Vollständigkeit, kann der Artikel nicht erheben. Wir wollen euch ein paar aus unserer Sicht interessante Tools vorstellen. Wir freuen uns aber natürlich über jede weitere Empfehlung in den Kommentaren.

  15. von Alexander Sibert via facebook am 22.01.2013 (13:46Uhr)

    ich nutze auch ZURB Foundation 3. Bald kommt ja Version 4

  16. von mediendesign via facebook am 22.01.2013 (14:12Uhr)

    Für alle Photoshopnutzer: Die Gridextension "GuideGuide".
    hier downloaden http://guideguide.me/Wir benutzen es selbst sehr gerne! ;)

  17. von pi am 22.01.2013 (15:59Uhr)

    Ich finde susy (http://susy.oddbird.net/) von Eric Meyer nicht schlecht. Dürfte in meinen Augen allerdings eine Nieschenlösung bleiben, da es Compass (http://compass-style.org/) als CSS-Framework voraussetzt.

    Cheers Philip

  18. von cephei am 22.01.2013 (17:02Uhr)

    Ich arbeite im Moment mit Bootstrap, frage mich aber ob es nicht sinnvoller wäre, jQuery UI zu nutzen. Da jetzt mien gesammtes Packet bereits auf Bootstrap ausgelegt ist, wäre ein Framework wechsel recht viel arbeit.

  19. von Siarhei am 22.01.2013 (17:12Uhr)

    da ist 's' zu viel "...und stellen euch sacht Frameworks vor..." Oder?

  20. von Ilja Zaglov am 22.01.2013 (17:15Uhr)

    Ja, vielen Dank Siarhei!

  21. von Siarhei am 22.01.2013 (17:26Uhr)

    @Ilja Zaglov bitte. Es wäre gut, wenn man die Vor- und Nachteile einzelner Systeme beschreibt.

  22. von Immer mehr Displaygrößen, Auflösungen… am 22.01.2013 (18:59Uhr)

    Man muss halt vom Smartphone oder der Smartwatch über Pad über höhenbeschränkte (nur 600 Zeilen) Netbooks und alte und neue Laptops und Desktop-PCs mit und ohne Touch-Steuerung bis zum QuadHD-SmarTV alles sinnvoll abdecken können.

    Auch die Eingaben sind Touch, Tastatur/Maus und bald auch noch Fernsteuerung und Voice. Da könnte man die Lernkurve gerne beschleunigen (und Barrierefreiheit ist dann auch oft kein Problem mehr) damit man die Webseiten überall vernünftig nutzen kann und nicht nur mit LTE-Tarif am 6"-Elite-Handy.

  23. von Jörg am 22.01.2013 (20:02Uhr)

    Die Listen sind zwar immer wieder klasse, wertvoll (und ungleich arbeitsaufwendiger) wäre aber mal ein praxisnaher Vergleich zwischen den Grids. Der Teufel hock ja meistens im Detail.

  24. von Hanna am 22.01.2013 (21:00Uhr)

    So eine oberflächliche Übersicht kann ich auch mit google zusammensuchen.
    Wie schon erwähnt wäre eine detaillierte Auflisting über die Vor und Nachteile der einzelnen Grids sinnvoller. Mich würde vor allem interessieren, welces davon mit flexiblen Schriftgrößen arbeitet.
    Als em stat px. Nach diesem Artikel muß ich doch wieder jedes einzelne herunterladen und inspizieren. Außer Spesen...

  25. von web frontend | Annotary am 22.01.2013 (21:40Uhr)

    [...] More from Patrick Kohan: general programming linux misc OS X Sort Share t3n.de       2 minutes [...]

  26. von Linkschleuder #1 | Nachtlog am 22.01.2013 (21:47Uhr)

    [...] 8 Grid-Systeme fürs Webdesign – Kleine Aufführung der gängigsten Grid-Systeme. Zusätzlich sei noch Foundation genannt, welches vor allem für Responsive Layouts benutzt wird [...]

  27. von Tom am 22.01.2013 (22:00Uhr)

    Ich habe schon so einiges angesehen und ausprobiert und bin bei http://inuitcss.com von Harry Roberts gelandet. Foundation ist auch ziemlich gut, aber wenn man einfach ein gutes entwicklerfreundliches Framework inklusive der Implementierung von sehr guten Konzepten zu oocss, smacss und bem haben will, ist das die Wahl.

  28. von 8 Grid-Systeme, die Webworkern das Leben… am 25.01.2013 (10:20Uhr)

    [...] on t3n.de Share this:E-MailDiggFacebookStumbleUponDruckenRedditTwitterGefällt mir:Gefällt mirSei der Erste [...]

  29. von spierala am 19.04.2013 (12:24Uhr)

    hi,
    compass + blueprint scheint mir momentan die beste lösung zu sein. http://compass-style.org/reference/blueprint/grid/

    Man lädt kein unnötiges CSS und alles ist einstellbar:
    $blueprint-grid-columns
    $blueprint-grid-width
    $blueprint-grid-margin

    was meint ihr dazu?
    Flo

Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema Frameworks
Startup Framework: Cooler Baukasten für schicke Websites
Startup Framework: Cooler Baukasten für schicke Websites

Das Startup Framework soll jungen Tech-Unternehmen beim Erstellen ihrer Websites helfen. Die damit produzierten Seiten sind responsiv und unterstützen auch hochauflösende Displays. » weiterlesen

Bootstrap 3.1 ist da: Wir zeigen euch die Neuerungen
Bootstrap 3.1 ist da: Wir zeigen euch die Neuerungen

Bootstrap 3.1 steht ab sofort zum Download bereit. Zu den neuen Features gehört unter anderem ein offizieller Sass-Port. » weiterlesen

Foundation 5: Zurbs responsive UI-Framework startet durch
Foundation 5: Zurbs responsive UI-Framework startet durch

Zurb hat die fünfte Version des beliebten UI-Frameworks namens Foundation veröffentlicht. Wir zeigen euch die wichtigsten Neuerungen und warum Foundation 5 auch für Einsteiger leicht zu meistern is ... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen