Blueprint CSS Framework
Juni 8, 2009 | Kommentieren
Das Blueprint Framework ist vorgefertigtes Gerüst welches einem sehr viel Arbeit abnehmen kann. Es ist ein typografisch angepassten Layout in einem 24 Spalten (Grid) Design mit einer “Reset.css” und einem Stylesheet fürs Drucken. Ansonsten findet man noch ein CSS-File für schöne Formulare und noch ein paar Plugins für Buttons, Tabs und Sprites.
Das tolle an Blueprint ist, dass man in nur wenigen Minuten verschiedene CSS Layouts zusammen bauen kann, welche auf den 24 Grids basieren:
Um es zu verwenden muss man zuerst mindestens die Dateien “screen.css”, für den Internet Explorer die “ie.css” und optional die “print.css” in den Header einbinden. Jetzt kann man z.b. ein ganz einfaches Layout wie dieses hier erstellen:
Hier das Markup:
<div class="container"> <div class="span-16"> <h1>Main Content</h1> </div> <div class="span-8 last"> <h2>Sidebar</h2> </div> </div>
Wie man sehen kann werden die einzelnen Grids mit der CSS-Klasse “span” definiert.
Zu beachten ist, dass man der letzten Spalte noch ein “last” hinzufügt.
Das obere Beispiel ist natürlich nichts besonderes, will man aber z.b. mehrere Blöcke ineinander verschachteln, merkt man schnell wie hilfreich Blueprint ist.
Und hier das HTML:
<div class="container"> <div class="span-16"> <h1>Main Content</h1> <div class="span-8"> <h3>InnerA</h3> </div> <div class="span-8 last"> <h3>InnerB</h3> </div> </div> <div class="span-8 last"> <h2>Sidebar</h2> </div> </div>
Ich hoffe man kann anhand des kurzen Beispiels sehen wozu ein CSS Framework nützlich sein kann.
Ob man es einsetzen soll oder nicht bleibt jedem selbt überlassen, allerdings muss ich sagen dass es die Arbeit an komplexeren Seiten deutlich erleichtert.
Mehr Informationen gibts hier:
http://www.blueprintcss.org
Eine Alternative mit einem “Online-Grid-Baukasten” findest du hier:
http://960.gs
