Mein kleines Leben

Hallo heute möchte Ich ein kleines HowTo zum Thema Blueprint CSS schreiben.
Doch was ist Blueprint CSS ?
Blueprint CSS ist ein Framework das helfen soll eine Barrierefreie Internetseite zu schaffen und es dir ermöglicht dich auf das Design zu konzentrieren und nicht auf das die Anpassung auf unterschiedliche Browser.
Hier was Blueprint selber über sein Framework sagt:

• A CSS reset that eliminates the discrepancies across browsers.
• A solid grid that can support the most complex of layouts.
• Typography based on expert principles that predate the web.
• Form styles for great looking user interfaces.
• Print styles for making any webpage ready for paper.
• Plugins for buttons, tabs and sprites.
• Tools, editors, and templates for every step in your workflow.

Doch fangen wir an, nachdem ihr also das Framework in einen Order eurer Wahl installiert habt müsst ihr es in eurer Seite einbinden. (Anmerkung: Ich gehe bei diesem HowTo davon aus das wir das Framework in der Standartkonfiguration benutzen , 24 Rows 950 px Breit jede Spalte zu 30px + 10px Abstand zwischen den Spalten.

Wir fügen nun also folgendes in den Head ein.

Für die Ausgabe am Bildschirm.

Für den Drucker (was sehr sehr interessant ist grad für Newssites)

Und natürlich für den IE ;)

Und in den Body schreiben wir.

...

Nun haben wir also eine 950px breite Grid in der wir ein wenig rumspielen werden :)

    

       Spalte 1 
    
    
    

       Spalte 2
    

    

       Spalte 3
    

Nun spannen wir über die 24 Spalten breite Grid 3 Gruppen zu je 8 Spalten auf.

  ...

Diese Class spannt also einen Div über 8 Spalten… selbsterklärend.

  ...

Nun aber müssen wir nach 24 Spalten sagen das wir nun das Ende erreich haben,
man kann es als Zeilenumbruch verstehen.
3*8 = 24 damit ist dann also das letzte 8ter unser last.

Wir können damit also die 24 Spalten aufteilen wie wir es möchten.

Beim nächsten mal geht es weiter mit Verschachtelung und Schrift.

Bis dann euer Detmud.

Quellen:
http://www.blueprintcss.org/