Andreas Bruns

Softwareentwicklung für Oldenburg und Bremen

Webdesign vereinfachen mit CSS-Framework Blueprint

Bei der Gestaltung von Webseiten muss der Webdesigner einiges beachten. Insbesondere die unterschiedlichen Darstellungen bei der Vielzahl von Browsern, Geräten und Betriebssystemen sorgen für einen erhöhten Aufwand bei der Umsetzung einer Webseite.

Wer sich viel Zeit und Frust ersparen möchte, entwickelt eine Webseite daher lieber nicht komplett alleine. Stattdessen sollte man sogenannte CSS-Frameworks als Grundgerüst einsetzen und damit die Erfahrungen vieler CSS-Experten nutzen. Die bekanntesten CSS-Frameworks sind:

Die genannten CSS-Frameworks bieten größtenteils ähnliche Funktionen an. Ich habe mich bei meiner Webseite für Blueprint als solide Basis entschieden, weil es besonders schlank ist und trotzdem reichhaltige Funktionen beinhaltet:

  • CSS-Reset, damit alle Browser gleiche Standardeinstellungen haben
  • ein Grid-System womit auch komplizierte Layouts möglich sind
  • gute typographische Voreinstellungen
  • Styling von Formularelementen
  • Stylesheet speziell für Ausdrucke
  • Plugins for Buttons, Tabs und Sprites
  • vielfältige Browserunterstützung (IE ab 6.0, Firefox ab 3.0, Opera ab 9.6)

Anhand eines kleinen Beispiels möchte ich Blueprint vorstellen. Zunächst werden die CSS-Dateien eines CSS-Frameworks im Header des HTML-Dokuments eingebunden. Anschließend können HTML-Tags mit class-Attributen und den vordefinierten Werten des CSS-Frameworks ausgestattet werden.

In Blueprint wird der gesamte Inhalt in einem div-Element der Klasse 'container' eingebettet und dadurch zentriert mit der Breite von 950 Pixeln dargestellt. Durch den Einsatz spezieller class-Werte können wir den Inhalt stylen, wie beispielsweise eine Informationsbox mit 'info'.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <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 lt IE 8]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
    <title>Example Blueprint CSS</title>
  </head>
  <body>
    <div class="container">
      <h1>Example Blueprint CSS</h1>
      <div class="info">Blueprint ist ein tolles CSS-Framework</div>
    </div>
  </body>
</html>

Das meist genutzte Feature ist sicherlich das Grid-System, mit dem die 950 Pixels des 'container'-Elements in 24 Spalten einteilbar sind. Eine Spalte, die sich über sechs Spalten erstrecken soll, wird mit 'class="span-6"'ausgestattet. Dabei muss man darauf achten, dass die Summe der Spalten 24 beträgt. Zwischen den Spalten wird automatisch ein Rand dargestellt, den man für die letzte Spalte mit 'class="span-6 last"' verhindern kann.

Das folgende Beispiel kann bei Github (https://github.com/me4bruno/blog-examples -> example-blueprint-css) heruntergeladen werden. Die jeweiligen Container-Elemente sind farblich hervorgehoben.

Beispiel: Blueprint-CSS

Beispiel: Blueprint-CSS

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <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 lt IE 8]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
    <style type="text/css">
    <!--
      #header {
        background-color: #DDF;        
      }
      #navigation {
        background-color: #FDF;        
      } 
      #content {
        background-color: #DFD;        
      } 
      #sidebar {
        background-color: #DFF;        
      } 
      #footer {
        background-color: #FDD;        
      }      
    -->
    </style>
    <title>Example Blueprint CSS</title>
  </head>
  <body>
    <div class="container">
      <div id="header" class="span-24 last">        
        <h1>Header: Example Blueprint CSS</h1>
        <div class="info">Blueprint ist ein tolles CSS-Framework</div>
      </div>
      <div id="navigation" class="span-6">
        <h3>Navigation</h3>
        <ul>
          <li><a href="">Link 1</a></li>
          <li><a href="">Link 2</a></li>
          <li><a href="">Link 3</a></li>
        </ul>
      </div>
      <div id="content" class="span-12">
        <h2>Content</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div id="sidebar" class="span-6 last">
        <h3>Sidebar</h3>
        <ol>
          <li><a href="">Artikel</a></li>
          <li><a href="">Artikel</a></li>
          <li><a href="">Artikel</a></li>
        </ol>        
      </div>
      <div id="footer" class="span-24 last">        
        Footer: Ein wunderschöner Footer mit Blueprint CSS.
      </div>
    </div>
  </body>
</html>

Einen schönen Überblick bieten die Demos und das Quick Start Tutorial von Blueprint. Falls wir übrigens für alle Spalten die gleiche Höhe haben möchten, hilft dieses GitHub-Gist: Blueprint CSS rules to achieve equal-height columns

Also bitte nicht mehr alles CSS von Hand schreiben, sondern einfach ein CSS-Framework die Arbeit machen lassen und entspannen – das empfiehlt übrigens auch das Technology Radar von Thoughtworks (May 2013 – 82. CSS frameworks).

Ein Kommentar

  1. Danke für die Infos! Gut erklärt!