CSS Grid Layout mit Blueprint / Bluetrip

Nun bin ich seit Ewigkeiten mal wieder dabei, eine Webseite auf Vordermann zu bringen. Das Layout stammt von einer Designerin und ich darf aus dem Design das eine HTML Seite machen.
Zum Layouten habe ich mich schlau gemacht, welche css Frameworks es mittlerweile gibt. Dabei bin ich auf zwei Frameworks für das sogenannte Grid Layout gestossen. Es handelt sich dabei um:

• blueprint

• bluetrip

Bluetrip ist dabei eine Kombination von Blueprint, Tripoli (daher der Name), Hartija's print stylesheet, 960.gs's Einfachheit und Elements' Icons.
Der Umgang mit Bluetrip ist recht einfach. Ausgehend von einer 950 px breiten Seite stellt das Framework 24 Spalten zu Verfügung. Jede Spalte ist 30px breit und hat an der rechten Seite einen 10px breiten Rand. Die letzte Spalte besitzt diesen Rand nicht.
Grundsätzlich befinden sich alle Elemente in einem Container, welcher das grundlegende Layout für alle Elemente steuert.
Hier ein Beispiel:

Einbinden der CSS Dateien:

  <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection">
  <link rel="stylesheet" href="css/print.css" type="text/css" media="print">
  <!--[if IE]>
  <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection">
  <![endif]-->
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection">

Der grundlegende Aufbau des HTML body:

<div class="container">
   <div class="span-12">Ich bin der Text in Spalte1</div>
   <div class="span-12 last">Ich bin der Text in Spalte2</div>
</div>

Damit hat man zwei Spalten in einer 50% / 50% Teilung. Es gibt die Klassen span-1 bis span-24. Die Summe der span-x Klassen muss immer 24 betragen.
Man bekommt sehr schnell ein Layout über CSS gebaut und hat den Vorteil, dass es Browserkompatibel ist.
So sieht das Ergebnis bisher aus:

Fazit: Es lohnt sich auf jeden Fall, diese Frameworks einmal anzutesten. Man kann sich viel Arbeit beim debuggen von selbstgeschriebenen CSS sparen.