Blueprint CSS Framework

Anfangs war ich sehr lange Zeit skeptisch über CSS Frameworks und deren Nutzen. Ich dachte mir immer, dass sowas gar nicht funktionieren kann und weil jeder Kunde ein eigenes Design möchte dachte ich mir dass ich dann erst die ganzen Anweisungen vom CSS Framework umprogrammieren muss damit es mir so passt. Für was also diese Arbeit machen und wieso nicht gleich immer von neuem beginnen? Bei mir schaut sowieso jede CSS Datei anders aus und ist anders aufgebaut. Aber wie fast jedes mal: Wenn man neue Dinge ausprobiert wird man belohnt!

Wozu brauche ich eigentlich ein CSS Framework?

Tja das dachte ich mir Anfangs auch aber seitdem ich BlueprintCSS das erste Mal verwendet habe benutze ich es eigentlich bei jedem Webdesign das ich selbst gestalte. Das ist meistens das Erste das ich mache: HTML Grundgerüst erstellen - BlueprintCSS einbinden - danach erst mein Stylesheet.

Ein CSS Framework muss man sich etwas anders vorstellen als ein normales Programmierframework für irgendeine wirkliche Programmiersprache wie zb PHP oder Javascript. CSS ist ja im Prinzip keine richtige Programmiersprache sondern eine Meta Sprache daher ist hier unter Framework etwas anders zu verstehen. Grundsätzlich ist es für folgende Dinge sehr nützlich:

  • Alle bekannten Browser Hacks sind bereits implementiert und integriert. Das ist sehr nützlich wenn man zB ältere Browser von Microsoft unterstützen möchte.
  • Ein Grid Layout wird zur Verfügung gestellt. So ein Grid ist verdammt nützlich und hilft Ihnen wirklich Zeit zu sparen. Was ein Grid Layout genau ist und warum es nützlich ist werde ich weiter unten erklären.
  • Verschiedene typografische Eigenschaften werden definiert. Es ist alles so angepasst, dass der Text ein schönes Bild ergibt.
  • Form Elemente werden verschöndert und immerwieder benötigte Info Boxen für Warnungen oder Mitteilungen sind bereits vordefiniert (Gelbe, grüne oder rote Boxen)
  • Es gibt ein paar Plugins die man einbinden kann (zb Buttons oder Links für Dateiformate)
  • Was normalerweise nicht so interessant zu programmieren ist aber dem User sehr nützlich sein kann ist ein eigenes Design für das Drucken der Website. Hier stellt BlueprintCSS ebenfalls grundlegende Einstellungen zur Verfügung.

Was ist jetzt ein Grid Layout?

Ein Grid Layout ist sehr ähnlich aufgebaut wie die alten Tabellendesigns früher mit dem Unterschied dass diesemal der Code schöner und semantisch richtig ist. Tabellenlayouts sollten in einem modernen Design nichts mehr verloren haben trotzdem konnte man mit ein paar Spalten und Zeilen ein super sauberes Design auf die Beine stellen wo alles seine Ordnung hatte. Darauf baut das Grid Layout auf.

Grundsätzlich stellt das CSS Framework einen Container mit vordefinierte Spalten dar. Blueprint CSS hat zB 24 Spalten. Standardmäsig ist der Container der zentriert ist 950px breit. Somit passt unsere Design auf jeden Monitor auch auf die die noch 1024×768 verwende. Sowas soll es ja auch noch geben… Daraus ergibt sich, dass jede Spalte von den 24 genau 30px breit ist mit 10px Abstand rechts zur nächsten Spalte. Wenn wir uns jetzt vorstellen, dass wir ein sehr einfaches Design machen möchten. Oben einen Header der den ganzen Container ausfüllte, links danach eine Navigation die etwa 1/4 von der Seite breit ist und rechts neben der Navigation den Inhaltsbereich dann können wir das Grid Layout sehr einfach nutzen!

Wir brauchen dazu drei DIV Container (Header, Navigation, Content). Mit Blueprint würde unser HTML code dann so aussehen:

  <div class="span-24"      id="header"    >...</div>
  <div class="span-5"       id="navigation">...</div>
  <div class="span-19 last" id="content"   >...</div>

Damit haben wir schon unser Layout definiert! Die Container müssen jetzt nur mehr mit Inhalt gefüllt werden. Wir brauchen uns keine Sorgen mehr um das richtige Floating der Container machen. Der einzige Nachteil dabei ist, dass man sich an die fixen Breiten der Spalten halten muss. Man kann also kein Navigation DIV erstellen das genau 127px breit ist. In den meisten Fällen ist das aber sowieso nicht nötig. Im content DIV kann man dann wieder neue Spalten erstellen. Unser Content ist 19 Spalten breit. Das heißt wir können hier wiederum 2 Container mit jeweils 8 Spalten Breite platzieren usw usw…

Am besten Sie laden sich das Framework einfach runter und versuchen ein kleines Layout zu bauen. Sie werden sehen dass Sie begeistert sein werden. Innerhalb von ein paar Minuten wenn nicht sogar Sekunden haben Sie das komplette Grundgerüst und müssen sich nur mehr um den Inhalt und die Farben kümmern.

Download und weiter Infos unter http://www.blueprintcss.org