Zum Inhalt springen
Der Guide für ein smartes Leben.
Ratgeber: "HTML, CSS, Javascript & PHP"

Grid Layouts mit Boks

Lösungen für professionelle Grid-Layouts gibt es wie Sand am Meer, und doch hat sich die Aufgabe dadurch kaum vereinfacht. Abhilfe will ein Tool namens Boks schaffen.

Autoren: Anna Kobylinska und Filipe Pereira Martins • 4.6.2012 • ca. 0:55 Min

Grid Layouts mit Boks
Grid Layouts mit Boks
© Archiv

Boks basiert auf dem CSS-Framework Blueprint 1.0 und läuft in AIR unter Windows, Mac OS X und Linux....

Boks basiert auf dem CSS-Framework Blueprint 1.0 und läuft in AIR unter Windows, Mac OS X und Linux.

image.jpg
Die AIR-Anwendung Boks bietet intuitive Tools zum Erstellen rasterbasierter CSS-Layouts unter Windows und Mac OS X.
© Internet Magazin

Das Tool ist unter  toki-woki.net/  kostenlos erhältlich und setzt Adobes ebenfalls kostenlose AIR-Laufzeitumgebung voraus.Boks unterstützt eine beeindruckende Vielfalt von Parametern und trumpft zudem mit einem visuellen Editor von HTML-Layoutelementen. Das Basisraster wird unter Verwendung der Schaltfläche Grid Settings eingerichtet. Es stellt sich im grafischen Editor erst einmal als eine einzige Zeile dar. Hier kommt der entscheidende Punkt: Zum Anlegen neuer HTML-Layoutelemente zeichnet man diese ganz einfach mit der Maus, und schon erweitert sich das Raster automatisch.Auch das Umpositionieren von Elementen klappt problemlos, allerdings nicht mit der Maus (das erzeugt weitere Elemente): Nach dem einmaligen Anklicken einer Auswahl betätigen Sie nur noch die Pfeiltasten, um das aktive Element um je eine Rastereinheit in die gewünschte Richtung zu verschieben. Mit der Rückschritttaste lässt sich die aktive Auswahl löschen.Alle Tags, die über eine ID verfügen, lassen sich im Übrigen bei Bedarf kommentieren. Parameter wie die Einbindung externer Stylesheets (gerne direkt von Ihrem Webserver) oder Javascript-Dateien können Sie zu einem beliebigen Zeitpunkt anpassen. Das resultierende Layout lässt sich als XHTML 1.0 sowie HTML 4.01 (beides Strict oder Transitional) und als HTML5 mit optional komprimiertem CSS ausgeben.