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:

CSS-Framework Screenshot

Getagged mit: , ,
2 Kommentare zu “CSS Framework für Webdesigner
  1. Michael G. sagt:

    Also auch zu empfehlen ist YAML (http://www.yaml.de/)

    Ein schönes abgespecktes Framework, das zusätzlich noch alle Browser unterstüzt und viel bekannte Layoutprobleme mit den unterschiedlichen Browsern löst.

  2. Daniel Sasse sagt:

    Klasse Framework (Klein aber fein) – das absolute Highlight stellt für mich die Datei „base.css“ da, die die anderen CSS-Files inkludiert.

    Die am häufigsten verwendeten Klassen & IDs sind dabei und sind noch dazu in Kurzschrift gehalten.

    Wirklich tolle Arbeit, die du dort geleistet hast!

    Hier noch ein Kompatiblitätstipp für den Internet Explorer 8, falls du dich nicht mit deren verschiedenen Darstellungsmodi herumschlagen willst.

    Füge folgendes Tag innerhalb des head-Bereichs hinzu:

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

    Wichtig hierbei ist, dass es umbedingt vor den anderen Tags eingepflegt wird, im Idalfall direkt nach dem öffnenden head Tag.

    Mit dieser Anweisung nimmst du in einer 100% identischen Darstellung den IE 7 & 8 mit und kannst dich gelassen zurücklehnen.

    Nochmal vielen Dank für das Klasse Framework!

    Daniel

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.