Drupal und 960 Grid System

Your rating: None Average: 3.4 (33 votes)

Heute bin ich auf das CSS-Framework 960 Grid System aufmerksam geworden. Damit lassen sich Layouts anhand eines 960 Pixel breiten Rasters erstellen. Das Framework ist - im Gensatz von zum Beispiel Yaml - sehr schmal und einfach zu bedienen. Das Prinzip ist ein in 12 oder 16 Spalten aufgeteiltes Layout. Darin lassen sich Blöcke über eine beliebige Anzahl (1-12/16) von Spalten anlegen. Diese haben eine breite von 60 (Grid 12) bzw. 40 (Grid 16) Pixeln und ein zusätzliches Margin von 20 Pixeln.

Layouts mit einer festen Breite von 960 Pixeln lassen sich damit sehr leicht und vor allem schnell für Drupal erstellen. Beliebige (verschachtelte) Inhaltsbereiche für Blöcke sind damit sehr einfach geschaffen. Da mich die Idee und die Einfachheit des CSS-Frameworks überzeugten habe ich mein Layout gleich mal dahingehen umgestellt. Die Umbauten und Übernahme meiner bisherigen Styles dauerte keine Stunde und das Ergebnis kann sich denke ich sehen lassen. Mit Hilfe von browsershots.org ließ dich die Stabilität in den gängigen Browsern nachweisen.

Wer sich mit 12 bzw. 16 Spalten und einer Breite von 960 Pixeln zu sehr eingegrenzt fühlt, kann sich mit dem verlinkten CSS-Generator sein eigenes Framework mit beliebigen Maßen erstellen lassen. Mit 960 Gridder lässt sich das Raster über ein Bookmark auch mal eben auf jede beliebige Seite zimmern.

Die Kombination von Drupal und 960 Grid System kann ich somit jedem empfehlen, der mit geringem Zeitlichen Aufwand ein mehrspaltiges Layout erstellen möchte, bei welchem auch eine gewisse Stabilität in den verschiedenen Browsern gewährleistet ist.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <abbr>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.

Tags