201112Sep

The Heads-Up Grid: Responsives Raster einblenden

Mit Hashgrid steht bereits ein nützliches jQuery-Plugin zur Verfügung, mit dem sich dynamisch ein Raster auf der gewünschten Website einblenden lässt. Ähnlich arbeitet auch das Heads-Up Grid, das noch etwas besser angepasst werden kann und zudem für responsive Layouts eingesetzt werden kann.

The Heads-Up Grid

In den Optionen des Skripts können diverse Einstellungen vorgenommen werden, darunter die Breite des kompletten Rastersystems, die Anzahl der Spalten, die Breite der Spalten oder die Breite der Zwischenräume. Eine Beispiel-Konfiguration kann so aussehen:

  • pageUnits = "px";
  • colUnits = "px";
  • pagewidth = 960;
  • columns = 6;
  • columnwidth = 140;
  • gutterwidth = 24;
  • pagetopmargin = 35;
  • rowheight = 20;
  • makehugrid();

Ein responsives Raster wird mithilfe von "$(window).width()" erzeugt und je nach Breite des Browserfensters werden andere Einstellungen geladen. Das Plugin lässt sich über eine Schaltfläche ganz bequem ein- und ausschalten und blendet zudem ein Grundlinienraster ein, das bei der Layout-Gestaltung sehr hilfreich sein kann.