Warum ich bei (fast) jeder Website auf Blueprint schwöre

Publiziert am by & filed under CSS, Framework, Konzeption, Webdesign.

Zunächst erst einmal zur Klärung: Blueprint ist ein CSS-Framework. Dank vorgefertigter Klassen für die gängisten Layouts und die nötigsten grafischen Elemente, reduziert sich die Entwicklungszeit und der Aufwand bei der Webprogrammierung erheblich.

Webdesign mit sofort-loslegen

Das erste was dir auffallen wird: die verblüffende Einfachheit! Blueprint offeriert dir eine solide Basis für deine Website. Dank eines kinderleicht zu bedienenden Blueprint-Generators erstellst du dir das benötigte Gitterlayout. Gesamtbreite, Anzahl der Spalten, Zwischenräume – alles lässt sich pixelgenau und mit wenigen Klicks festlegen. Heraus kommt am Ende eine recht schlanke blueprint.css, welche als Grundlage für dein Projekt dient.

Der nächste Vorteil: Hast du diese CSS einmal in deine Website eingebunden und schaust sie dir genauer an, wirst du festtellen, dass die Selektoren für einen Browserreset bereits enthalten sind. Somit hast du browserübergreifend eine solide Ausgangsbasis und legst sofort ohne mühselige Vorbereitungen los.

Hast du dir im Generator zusätzlich die Gitter-Grafik heruntergeladen, kannst du dir dein Gestaltungsraster bequem mit der CSS-Klasse „showgrid“ im Hintergrund anzeigen lassen und deine Elemente bequem anhand dessen ausrichten und positionieren. Alle Befehle dazu gibt es übersichtlich in diesem Cheatsheet.

Blueprint Gestaltungsraster - Pixxelpassion, Webdesign aus Leipzig

Die restlichen Entdeckungen und Aha-Effekte möchte ich dir überlassen. Und da gibt es noch einige! Nur soviel: das leidige und zeitintensive Thema „verschobenes Layout im IE6“ gehört dank Blueprint auch der Vergangenheit an. Denn die Blueprint-Konstrukte sind nicht nur valide und ermöglichen geordnete, semantische Strukturen sondern halten auch browserübergreifend.

Vorteile im Überblick

  • Anders als andere CSS-Frameworks offeriert Blueprint eine schlanke – auf Wunsch auch komprimierte – CSS-Datei
  • CSS-Reset, dass die Abweichungen in verschiedenen Browsern beseitigt.
  • Eine festes Raster, welches in seinen Maßen komplett konfigurierbar ist.
  • Voreinstellungen für professionelle Makro- und Mikrotypographie
  • Styles für Formulare und Feedbackmeldungen
  • Druckansicht deiner Websites
  • Browserübergreifende Layouts
  • Modifikationen für fluide Layouts
  • Plugins für Schaltflächen, Registerkarten und Sprites.
  • Großer Support durch Tools, Editoren, Cheatsheets und Vorlagen für beinahe jeden Schritt im Workflow.


Wer jetzt von CSS-Frameworks zum ersten Mal Blut geleckt hat, aber gerne über den Tellerrand nach Alternativen Ausschau halten möchte, dem leg ich diesen Artikel ans Herz. Hier werden neben Blueprint noch über zwei dutzend weitere CSS-Frameworks verglichen und mit ihren Vorzügen aufgelistet. Mit diesen lassen sich dann auch Responsive Webdesigns für Mobile Geräte einfach realisieren.

Und welches CSS-Framework nutzt du?

Ihr Kommentar

  • (will not be published)

* Die Checkbox für die Zustimmung zur Speicherung ist nach DSGVO zwingend.

Ich akzeptiere