GridEasy - Was ist das?

GridEasy ist ein CSS-Framework, das die effektive Erstellung von schönen und standardkonformen Webseiten erheblich vereinfacht und beschleunigt. Diese Website ist natürlich auch mit GridEasy gemacht.

BlogPimp - Wer ist das?

Lothar 'BlogPimp' Baier Lothar „BlogPimp“ Baier ist ein gefragter WordPress-Profi, Web-Frontend-Entwickler und Web-Standardista. Er hat GridEasy verbrochen.

 

Grundlagen der Nutzung

Die Zielsetzung für GridEasy war – neben der geringen Code-Größe – eine möglichst einfache Anwendung. Ich möchte Ihnen das an einem Beispiel aufzeigen:

Nehmen wir das links abgebildete Layout. Es hat einen Kopfbereich mit einer 1-Drittel/2-Drittel Teilung. Darunter ein Menü mit 6 Punkten. Dann folgt der eigentliche Inhalt mit drei gleichen Spalten. Zum Schluss kommt ein sechs-spaltiger Fußbereich mit verschiedenen Kontakt-Möglichkeiten. Dieses Layout wollen wir nun Stück für Stück mit GridEasy umsetzen.

Schauen wir uns erst einmal das grundlegende (X)HTML an. Im folgenden Listing sehen wir, wie der Code für die Seite ohne Formatierung und Raster aussehen würde:

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>BlogPimp GridEasy Beispielseite</title>
    <link rel="stylesheet" type="text/css" media="all" href="style.css" />
  </head>
  <body>
    <div id="wrapper">
      <div id="logo">
        <img src="images/logo.gif" alt="Firmenlogo" />
      </div>
      <div id="firma">
        <h1>Firmenname</h1>
        <p>Tagline</p>
      </div>
      <ul id="menu">
        <li><a href="index.html">Home</a></li>
        <li><a href="menu1.html">Menü 1</a></li>
        <li><a href="menu2.html">Menü 2</a></li>
        <li><a href="menu3.html">Menü 3</a></li>
        <li><a href="menu4.html">Menü 4</a></li>
        <li><a href="menu5.html">Menü 5</a></li>
      </ul>
      <div id="spalte1">
        <h2>Dies ist die Überschrift von Spalte 1</h2>
        <p>Hier steht der Inhalt von Hauptinhalt Spalte 1</p>
      </div>
      <div id="spalte2">
        <h2>Dies ist die Überschrift von Spalte 2</h2>
        <p>Hier steht der Inhalt von Hauptinhalt Spalte 2</p>
      </div>
      <div id="spalte3">
        <h2>Dies ist die Überschrift von Spalte 3</h2>
        <p>Hier steht der Inhalt von Hauptinhalt Spalte 3</p>
      </div>
      <p id="tel">Tel.: 01234-56789</p>
      <p id="fax">Fax: 01234-56999</p>
      <p id="email"><a href="mailto://otto@test.de">otto@test.de</a></p>
      <p id="skype">Skype: otto.test</p>
      <p id="msn">MSN: ottotest21</p>
      <p id="Xing">Xing: otto.test.co</p>
    </div>
  </body>
</html>

Nun fügen wir Schritt für Schritt die Angaben ein, die wird brauchen, um GridEasy zu benutzen. Als erstes fügen wir die notwendigen Angaben in den Header ein, um die Stylesheets von GridEasy zu laden:

1
2
3
4
5
6
7
8
9
10
11

  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>BlogPimp GridEasy Beispielseite</title>
    <!-- Stylesheets für GridEasy -->
    <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/grid-06.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/grid.css" />
    <!-- eigenes Stylesheet -->
    <link rel="stylesheet" type="text/css" media="all" href="style.css" />
  </head>

Die Datei „reset.css“ enthält ein grundsätzliches Zurücksetzen aller Margin-, Padding- und Border-Werte, um unabhängig vom Browser einen definierten Anfangszustand zu haben. „text.css“ enthält ein paar grundsätzliche Formatierungen für die Texte und Überschriften. Diese Datei ist nicht unbedingt notwendig, erleichtert aber die nachfolgenden Schritte deutlich. Die Datei „grid.css“ enthält die Basisfunktionalität für alle Raster. Sie muss nach der (oder den) Raster-spezifischen Datei(en) geladen werden.
Die Datei „grid-06.css“ letztendlich enthält alles, was wir für unser Layout an Positionierungen benötigen. Und schließlich enthält „style.css“ alle eigenen Styles, die wir für dieses Projekt haben möchten.

Anschließend fügen wir die Klassen in den Body des Layouts ein, die die Seite so formatieren, wie wir es möchten. Zuerst erhält das Wrapper-DIV eine Klasse, die den Seitenrahmen auf 960 Pixel fixiert und horizontal zentriert:

1

    <div id="wrapper" class="rahmen">

Als nächstes erhält das Logo-DIV eine Klasse für 2 Spalten Breite, das Firma-DIV eine für 4 Spalten:

1
2
3
4
5
6
7

      <div id="logo" class="raster-06-2">
        <img src="images/logo.gif" alt="Firmenlogo" />
      </div>
      <div id="firma" class="raster-06-4">
        <h1>Firmenname</h1>
        <p>Tagline</p>
      </div>

Dann bekommt das Menü seine Formatierung. Die UL bekommt 6 Spalten, die einzelnen LIs erhalte 1 Spalte Breite. Da hier die Raster ineinander verschachtelt werden, sind zwei zusätzliche Angaben notwendig; das erste LI bekommt die zusätzliche Klasse „links“, das letzte LI die Klasse „rechts“. Dies ist notwendig, da normalerweise jedes Raster eine linke und rechte Margin hat und somit die Spalten nicht mehr übereinander stehen würden, wenn sich die Margins von UL und LI addieren:

1
2
3
4
5
6
7
8

      <ul id="menu" class="raster-06-6">
        <li class="raster-06-1 links"><a href="index.html">Home</a></li>
        <li class="raster-06-1"><a href="menu1.html">Menü 1</a></li>
        <li class="raster-06-1"><a href="menu2.html">Menü 2</a></li>
        <li class="raster-06-1"><a href="menu3.html">Menü 3</a></li>
        <li class="raster-06-1"><a href="menu4.html">Menü 4</a></li>
        <li class="raster-06-1 rechts"><a href="menu5.html">Menü 5</a></li>
      </ul>

Schließlich verpassen wir den drei Spalten des Hauptinhalts ihre Maße und Positionierungen:

1
2
3
4
5
6
7
8
9
10
11
12

      <div id="spalte1" class="raster-06-2">
        <h2>Dies ist die Überschrift von Spalte 1</h2>
        <p>Hier steht der Inhalt von Hauptinhalt Spalte 1</p>
      </div>
      <div id="spalte2" class="raster-06-2">
        <h2>Dies ist die Überschrift von Spalte 2</h2>
        <p>Hier steht der Inhalt von Hauptinhalt Spalte 2</p>
      </div>
      <div id="spalte3" class="raster-06-2">
        <h2>Dies ist die Überschrift von Spalte 3</h2>
        <p>Hier steht der Inhalt von Hauptinhalt Spalte 3</p>
      </div>

Die letzten Klassen gehen an die sechs Paragraphen, die den Fuß der Seite bilden:

1
2
3
4
5
6

      <p id="tel" class="raster-06-1">Tel.: 01234-56789</p>
      <p id="fax" class="raster-06-1">Fax: 01234-56999</p>
      <p id="email" class="raster-06-1"><a href="mailto://otto@test.de">otto@test.de</a></p>
      <p id="skype" class="raster-06-1">Skype: otto.test</p>
      <p id="msn" class="raster-06-1">MSN: ottotest21</p>
      <p id="Xing" class="raster-06-1">Xing: otto.test.co</p>

Der letzte Schritt zum formatierten Spalten-Layout ist das Einfügen von Etwas, das das Clearen der Floats übernimmt. Hier ist im Prinzip jede Methode möglich, die zum gewünschten Ergebnis führt. Am sichersten ist das Einfügen von DIVs, die mit der Klasse „clear“ versehen werden und als Inhalt ein untrennbares Leerzeichen enthalten. Die notwendige Klasse ist im „grid-06.css“ schon definiert.

Puristen würden dies als unsemantisches Markup tadeln, es gibt natürlich auch andere Methoden des Clearens. Aber nach meiner Erfahrung ist die hier verwendete die einzige, die definitiv in jeder Situation und in allen üblichen Browsern funktioniert. Aber Sie dürfen natürlich Ihre eigene Methode verwenden, Hauptsache die Floats werden gecleart, sondt funktioniert das ganze Layout unter Umständen nicht.

Unsere fertige XHTML-Datei sollte jetzt so aussehen:

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>BlogPimp GridEasy Beispielseite</title>
    <!-- Stylesheets für GridEasy -->
    <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/grid-06.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/grid.css" />
    <!-- eigenes Stylesheet -->
    <link rel="stylesheet" type="text/css" media="all" href="style.css" />
  </head>
  <body>
    <div id="wrapper" class="rahmen">
      <div id="logo" class="raster-06-2">
        <img src="images/logo.gif" alt="Firmenlogo" />
      </div>
      <div id="firma" class="raster-06-4">
        <h1>Firmenname</h1>
        <p>Tagline</p>
      </div>
      <div class="clear">&nbsp;</div>
      <ul id="menu" class="raster-06-6">
        <li class="raster-06-1 links"><a href="index.html">Home</a></li>
        <li class="raster-06-1"><a href="menu1.html">Menü 1</a></li>
        <li class="raster-06-1"><a href="menu2.html">Menü 2</a></li>
        <li class="raster-06-1"><a href="menu3.html">Menü 3</a></li>
        <li class="raster-06-1"><a href="menu4.html">Menü 4</a></li>
        <li class="raster-06-1 rechts"><a href="menu5.html">Menü 5</a></li>
      </ul>
      <div class="clear">&nbsp;</div>
      <div id="spalte1" class="raster-06-2">
        <h2>Dies ist die Überschrift von Spalte 1</h2>
        <p>Hier steht der Inhalt von Hauptinhalt Spalte 1</p>
      </div>
      <div id="spalte2" class="raster-06-2">
        <h2>Dies ist die Überschrift von Spalte 2</h2>
        <p>Hier steht der Inhalt von Hauptinhalt Spalte 2</p>
      </div>
      <div id="spalte3" class="raster-06-2">
        <h2>Dies ist die Überschrift von Spalte 3</h2>
        <p>Hier steht der Inhalt von Hauptinhalt Spalte 3</p>
      </div>
      <div class="clear">&nbsp;</div>
      <p id="tel" class="raster-06-1">Tel.: 01234-56789</p>
      <p id="fax" class="raster-06-1">Fax: 01234-56999</p>
      <p id="email" class="raster-06-1"><a href="mailto://otto@test.de">otto@test.de</a></p>
      <p id="skype" class="raster-06-1">Skype: otto.test</p>
      <p id="msn" class="raster-06-1">MSN: ottotest21</p>
      <p id="Xing" class="raster-06-1">Xing: otto.test.co</p>
      <div class="clear">&nbsp;</div>
   </div>
  </body>
</html>

Und siehe da – ein paar Klassen und ein wenig Clearing eingefügt, und unser Layout präsentiert sich schon sehr ansehnlich im Browser, und das, bevor wir eine einzige eigene CSS-Anweisung geschrieben haben:

(Die grauen Hintergründe und die etwas längeren Texte habe ich eingefügt, um das Raster besser sichtbar zu machen).