CSS Framework für Webdesigner

Oft schreibt man die selben CSS-Angaben immer und immer wieder, ohne einen einheitlichen Kontext für jedes Projekt zu schaffen. Zugegeben, dies ist vielleicht nicht immer möglich, aber besser man startet mit “etwas” als mit nichts. Aus diesem Grund habe ich ein typisches Template mit zugehörigem CSS entworfen, das mir ein sauberes Grundgerüst für neue Projekte liefert.

Fokus auf DRY KISS

Die Prinzipien sind klar – DRY und KISS soweit wie möglich, ohne die Flexibilität von CSS zu beschneiden. Gerade bei Code der bei jedem Seitenaufruf geladen wird sollte man extrem darauf achten, daß dieser so schlank und effizient wie möglich bleibt.

Bei einer Webseite mit 100.000 Besuchern pro Monat machen 5 KB Ersparnis beim HTML und CSS-Code bereits 5,7 GB weniger Traffic im Jahr aus! Bei einem meiner Projekte habe ich den CSS-Code von 58 KB auf ca. 13 KB reduziert, und das bei einem identischen Anzeigeergebnis. Gleichzeitig schrumpfte der HTML-Code auf 1/3 zusammen, weil die ganzen unnützen Klassen und Tabellen rausflogen. Eine Gesamtersparnis von fast 100 KB pro Seitenaufruf waren die Folge.

Wendet man das auf das Beispiel von oben an, so kommt man auf mindestens 114 GB weniger Traffic im Jahr – von den Ladezeiten und Speicherkapazitäten des Webservers mal ganz abgesehen. Zusammen mit den äußerst positiven Einflüssen von semantischem Markup auf Suchmaschinenpositionen war das eine sehr lohnende Investition für den Webseitenbetreiber.

Es gibt also gute Gründe, sich auf die W3C-Standards zu stützen und diese ordentlich umzusetzen. Mit diesem Framework macht man es sich um einiges leichter

Natürlich ist es “Work in Progress”, für mich ist es allerdings schon sehr gut nutzbar.

Die Struktur

Das Framework setzt sich aus sieben CSS-Dateien zusammen, wovon eine (base.css) nur die anderen inkludiert, und zwar in dieser Reihenfolge:

1. reset.css: Zurücksetzen der Attribute einiger HTML-Elemente um einen einheitlichen Start in allen Browsern zu bekommen.
2. global.css: Stile für HTML-Elemente und global genutzte Klassen wie .center, .float-left, .float-right usw.
3. structure.css: Die allgemeine Struktur der Seite, Farben, Hintergründe, Breiten und Höhen usw.
4. typo.css: Die Typographie aller Elemente – Schriftarten, Größen, Schriftfarben und weitere Attribute.
5. forms.css: Formulare und deren Elemente wie legend, fieldset, textarea und input-Elemente.
6. misc.css: Alles was in die anderen Kategorien nicht hineinpasst – bleibt bei mir meistens leer.

Dazu gibt es eine index.html, die alle diese Stylesheets inkludiert. Diese Datei inkludiert über Conditional Comments zusätzliche Stylesheets für den IE < 6.0 und > 7.0. Getestet habe ich es bisher im IE 6, IE 7 und Firefox 2.0. Das Ganze ist natürlich xHTML 1.0 Strict valide, und mit einem hohen Anspruch an Codequalität und Flexibilität geschrieben worden. Das Framework wird unter der GNU General Public License v2 herausgegeben.

Download

CSS-Framework Version 20070613

Screenshot

Und auch wenn ich mir sicher bin, daß das Design keinen Blumentopf gewinnen wird, gibt es einen Screenshot: