201123Aug

The Semantic Grid System: Verschiedene LESS-Raster

Für alle, die gerne mit CSS-Gridsystemen experimentieren oder Systeme auf LESS-Basis (JavaScript) ausprobieren möchten, können einen Blick auf "The Semantic Grid System" werfen. Tyler Tate, der Entwickler hinter dem 1KB-Gridsystem, stellt mit seinem CSS/JS-Framework ein Rastersystem bereit, dass dank LESS mit CSS-Variablen umgehen kann und ohne überflüssige ".grid_x"-Klassen auskommt.

The Semantic Grid System

Die Implementierung des Gridsystems erfolgt also, nachdem LESS eingebunden wurde:

  • <link rel="stylesheet" href="css/screen.less" type="text/less" media="screen" />
    <script src="js/less-1.1.3.min.js" type="text/javascript"></script>

Anschließend könnte das LESS-Stylesheet beispielsweise so aussehen:

  • @import 'grid.less';
  •  
  • @columns: 12;
  • @column-width: 60;
  • @gutter-width: 20;
  •  
  • article {
  • .column(9);
  • }
  •  
  • sidebar {
  • .column(3);
  • }

Mithilfe von LESS-Mixins können zudem auch ganze Sets (Klassen) mit Eigenschaften übernommen und mit einer Variable angepasst werden. Das Gridsystem bietet verschiedene Layouts, darunter auch die Möglichkeit für responsive Layouts. Wen also der JavaScript-Aspekt derartiger Lösungen nicht stört, sollte sich das Projekt einmal ansehen.