PehBehBeh

Erfahrungen eines Hobby-Webentwicklers

Ein einfaches Blog-Gerüst mit dem Blueprint CSS Framework erstellen

| 10 Kommentare

Bis vor kurzem wusste ich nicht einmal, dass es auch CSS Frameworks gibt – mittlerweile möchte ich meinen Favoriten unter ihnen nicht mehr missen. Die Grundlage dieses Themes auf pehbehbeh.de habe ich mit dem Blueprint CSS Framework realisiert. (Es muss zwar noch an allen Ecken und Kanten gefeilt werden, doch der Aufbau steht seit gestern.) In diesem Artikel möchte ich euch die Grundlagen dieses CSS Frameworks näher bringen.


Was bringt mir ein CSS Framework?

Die Vorteile liegen ganze klar auf der Hand: Es spart einem viel Zeit und vor allem Nerven, da man sich für die meisten Probleme keine Lösungen und nervige IE-Workarounds mehr suchen muss. Das Framework übernimmt diesen Job. Man muss nur noch wissen damit umzugehen.

Die Dateien des Frameworks

Im Blueprint CSS Framework gibt es sechs Dateien, die jeweils ein anderes Ziel verfolgen. Diese möchte ich hier kurz und knapp erläutern:

  1. reset.css
    Diese Datei führt einen CSS-Reset durch. Das heißt alle Standardeigenschaften des Browsers werden überschrieben, sodass auf jedem Rechner eine gleiche Grundlage für das Layout geboten ist.
  2. typography.css
    Hier werden ein paar sinnvolle Styles für Text, Überschriften, Listen & Tabellen festgelegt. Zudem einige besondere Styles zum Hervorheben von Text.
  3. grid.css
    Dies ist wahrscheinlich die wichtigste Datei des Frameworks. Hier sind alle Klassen vorhanden, die für das Designen des Grid-Layouts nötig sind. Dazu unten mehr.
  4. ie.css
    Das Framework unterstützt den Internet Explorer. Dieses Stylesheet sollte über Conditional Tags für den Internet Explorer eingebunden werden. Auch dazu unten mehr.
  5. print.css
    In diesem Stylesheet sind Styles für Druckversionen eurer Seite vorhanden. Es wird mit media="print" eingebunden.
  6. forms.css
    Wie der Name auch hier vermuten lässt, sind in dieser Datei Styles für Formulare versteckt.

Damit man nicht unnötig viele Requests generiert, liegt das Framework standardmäßig nochmal in einer Version aus drei Dateien vor.

  1. screen.css
    (enthält reset.css, typography.css, grid.css und forms.css)
  2. print.css
    (siehe oben)
  3. forms.css
    (siehe oben)

Benötigt man nicht alle Quell-Dateien im Screen-Stylesheet wird auch noch ein Generator mitgeliefert, mit dem man genau die Dateien auswählen kann, die man benötigt. (Habe ich persönlich noch nicht genutzt.)

Das Framework ist auch erweiterbar. Vier Plugins werden beim Download mitgeliefert, auf die ich in diesem Artikel aber nicht weiter eingehen möchte.

Das Gerüst eines Blog-Themes designen

Kommen wir nun zum spannenden Teil. Wir wollen also das Gerüst eines normalen Blog-Themes erstellen. Dazu binden wir zunächst die oben bereits erwähnten Stylesheets in unser HTML-Gerüst ein:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Blueprint Tutorial</title>
        
        <link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection" />
        <link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print" />
        <!--[if IE]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->
    </head>
  <body>
      <!-- Hallo Welt! -->
  </body>
</html>

Damit wir die Grid-Komponente des Frameworks verwenden können, benötigen wir einen Div mit der Klasse “container”, der das gesamtes Layout umschließt und somit unser Grid – also das Gitternetz – erstellt. Das gesamte Grid ist 960 Pixel Breit und unterteilt sich in 24 Spalten. Somit ergibt sich eine Breite von 40 Pixeln pro Spalte.

Im Gitternetz können Bereiche erstellt werden, die beliebig viele Spalten beinhalten können – maximal natürlich 24. Jeder Bereich hat einen rechten Rand von zehn Pixeln. Also hat man maximal 950 Pixel im Grid zur Verfügung, wenn man einen Bereich über die gesamten 24 Spalten erstellt.

Für unser Blog-Layout benötigen wir einen Header, einen Bereich für Content, eine Sidebar und einen Footer. Header und Footer erstrecken sich jeweils über die komplette Breite. Content und Sidebar teilen wir im Verhätnis 16 zu acht Spalten auf.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Blueprint Tutorial</title>
        
        <link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection" />
        <link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print" />
        <!--[if IE]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->
    </head>
  <body>
      <div class="container">
          <div id="header" class="span-24 last">
              <p>Lorem Ipsum</p>
          </div>
 
          <div id="content" class="span-16">
              <p>Lorem Ipsum</p>
          </div>
 
          <div id="sidebar" class="span-8 last">
              <p>Lorem Ipsum</p>
          </div>
          
          <div id="footer" class="span-24 last">
              <p>Lorem Ipsum</p>
          </div>
      </div>
  </body>
</html>

Ihr werdet vielleicht staunen, aber das war alles um das Gerüst eures Blogs zu erstellen. Die Klassen span-24, span-16 und span-8 geben die Breite eurer Container an. Die Zahl steht für die Anzahl der Spalten innerhalb des Grids. Der Header und der Footer gehen also über die gesamte Breite der Seite (24*40-10=950), die Sidebar ist 310 Pixel (8*40-10) und der Content 640 (16*40) Pixel breit.

Wichtig: Jeweils der letze Container in einer Zeile bekommt die Klasse “last”! In diesem Beispiel sind das alle Container außer der Content-Div, neben dem nämlich noch die Sidebar erscheinen soll.

Mehr zum Thema

Wer jetzt Lust auf mehr bekommen hat, dem kann ich folgenden Artikel auf Nettuts+ empfehlen: A Closer Look At The Blueprint CSS Framework. Ihr werdet sehen, dass der Autor dort noch genauer auf die Eigenschaften des Frameworks eingeht und auch ein umfangreicheres Beispiel-Layout gestaltet.

Downloaden könnt ihr das Framework auf der Website: blueprintcss.org

Dort gibt es weitere Demos und ein Wiki mit Tutorials.

Dir hat der Artikel gefallen?
Dann abonniere doch den RSS-Feed!

10 Kommentare

  1. Wofür es doch nicht alles Frameworks gibt^^

    Klingt interessant, muss ich auch mal probieren

  2. Pingback: WP-Syntax: Code-Highlighting in WordPress « pehbehbeh

  3. 24*40 – 10 = 960
    echt?

  4. Autsch. :) Natürlich nicht. Ich habe die Formulierungen an der Stelle mal ausgebessert… Vielen Dank für den Hinweis.

  5. Danke, hatte bisher noch nie so recht die Verwendung von Css-Frameworks verstanden (weil ich einfach nie so eine gute Erklärung hatte, wie der Text hier)…

  6. Vielen Dank für die Blumen… ;)

  7. blueprint css ist wirklich super. ich schreibe gerade ein buch über effiziente webprogrammierung das kostenlos online gelesen werden kann. unter anderem gibt es schon ein kapitel für blueprint css.. wenn es jemanden interessiert: http://effiziente-webprogrammierung.info/programmierung/frameworks/blueprint-css

  8. Hi, will nicht den “Klugscheißer” spielen, doch hat sich nochmal ein Rechenfehler eingeschlichen… Bei “Sidebar” & “Content”, darfste nur je 5 pixel abziehen, weil beides sich ja addiert. Ich komme in der addition (310+630) leider nur auf 940 px.
    Darum gehe ich davon aus, dass die 10 px nur einmal von den insgesammt 960px abziehbar sein müßten. Getestet habe ich es noch nicht. Ob es 2×5 px sind oder auf einer Seite 10px. LG,
    Frank..

  9. Du hast natürlich recht. Die 10px werden nur von der Sidebar abgezogen, da diese die CSS-Klasse .last besitzt. So kommt man dann auch auf die 950px. Vielen Dank für den Hinweis… habe es im Artikel korrigiert.

  10. Noch eine Ergänzung: Ein span-24 braucht kein last, da hiermit schon die gesamte Breite der Seite angegeben ist.

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.