CSS Layouts am Fließband 3


Immer wieder werden ähnlich bzw. gleiche Layouts beim Webdesign gebraucht. Ich habe einmal versucht eine relative einfaches Framework zur schnellen Erzeugung von verschiedenen Layouts zu erstellen.

Um die Verwaltung des Framework einfach zu halten, habe ich mich dazu entschlossen die CSS-Dateien aufzuteilen. In der HTML-Datei existieren zwar nur 3 relative Verlinkungen zu den jeweiligen Ausgabedesigns, aber für jedes Design sind dann weitere 3 Dateien zuständig. Um die Designs flexibel administrieren zu können, benutze ich eine Layout-Datei für die Positionierung der Boxen, eine Color-Datei für die Farbgebung und eine Typographie-Datei für die Texteinstellung.


Der Aufbau der HTML-Datei ist nach den Semantik-Regel wohlgeformt und besteht aus der üblichen 3 großen Bereichen: Kopf, Körper und Fuß. Um innerhalb des Körpers mit bis zu 3 Spalten arbeiten zu können, existieren dort eine Content-, Navigations- und Marginal-Box.

Hier die Originalstruktur der HTML-Datei:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="de xml:lang="de">
  3. <head></head>
  4. <body>
  5. <div id="header"></div>
  6. <div id="body">
  7. <div id="wrapper">
  8. <div id="content"></div>
  9. </div>
  10. <div id="navigation"></div>
  11. <div id="marginal"></div>
  12. </div>
  13. <div id="footer"></div>
  14. </body>
  15. </html>

Um die 3 benötigten Design-Dateien in die HTML-Datei zu laden, importiert die verlinkten Style-Datei die restlichen Dateien:

  1. @charset "utf-8″;
  2. /* Screen Style Document */
  3. @import url("reset.css");
  4. @import url("screen/layout.css");
  5. @import url("screen/color.css");
  6. @import url("screen/typographie.css");

Die mit importierte Reset-Datei normalisiert die von Browsern vorgegebene Formatierung.

  1. body, div, dl, dt. dl, ul, ol, li, h1, h2, h3, h4, h5, h6,
  2. pre, form, fieldset, input, p, blockoute, th, td
  3. {margin:0;padding:0}
  4. h1, h2, h3, h4, h5, h6
  5. {font-size:100%}
  6. ol, ul
  7. {list-style:none}
  8. address, caption, cite, code, dfn, em, strong, th, var
  9. {font-style:normal;font-weight:normal}
  10. table
  11. {border-collapse:collapse;border-spacing:0;font-size:100%}
  12. fieldset, img
  13. {border:0}
  14. caption, th
  15. {text-align:left}
  16. q:before, q:after
  17. {content:""}

Ich habe schließlich, um die Flexibilität des Frameworks zu demonstrieren, für das Layout, die Farben und die Typographie jeweils 3 Versionen erstellt. Dadurch stehen mal eben 18 verschiedene Darstellungen nur alleine für das Screen-Design zur Verfügung. Wenn man nun mit dem gleichen Verfahren auch noch verschiedene Print- und SSB-Darstellungen erzeugt, hat man wirklich schnelle und effektive Fließbandarbeit.


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

3 Gedanken zu “CSS Layouts am Fließband