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:
- 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. - typography.css
Hier werden ein paar sinnvolle Styles für Text, Überschriften, Listen & Tabellen festgelegt. Zudem einige besondere Styles zum Hervorheben von Text. - 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. - 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. - print.css
In diesem Stylesheet sind Styles für Druckversionen eurer Seite vorhanden. Es wird mitmedia="print"eingebunden. - 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.
- screen.css
(enthält reset.css, typography.css, grid.css und forms.css) - print.css
(siehe oben) - 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 unser gesamtes Layout umschließt. Das Grid hat eine Breite von 950px. Eine Spalte hat eine Breite von 40px, wobei bei jedem Container rechts 10px Rand gelassen werden. Insgesamt stehen euch also 24 Spalten zur Verfügung (24*40-10=960 
).
Für unser Blog-Layout brauchen wir einen Header, einen Bereich für Content, eine Sidebar und einen Footer.
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 werden 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. Der Header und der Footer gehen also über die gesamte Breite der Seite (24*40-10=950), die Sidebar ist 310px (8*40-10) breit und der Content 630px mit 10 px Rand.
Noch zu erwähnen: Jeweils der letze Container in einer Zeile bekommt die Klasse “last”! In diesem Beispiel sind das alle Container aus der Content-Div.
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.
Tags: Blueprint, Framework, Grid, Plugins, Sidebar, Stylesheet, Themes
Wofür es doch nicht alles Frameworks gibt^^
Klingt interessant, muss ich auch mal probieren