creativemac.de Weblog: Strukturiertes Markup mit dem YAML-Builder zusammenklicken

Den meisten haben sicherlich schon von Dirk Jesse und seinem CSS-“Framework” YAML gehört. Mit YAML steht ein Paket an CSS-Dateien zur Verfügung, das browserübergreifende DIV-basierende Layouts ermöglicht. Der YAML-Builder geht noch einen Schritt weiter.

Mit ein paar Mausklicks lassen sich mit diesem Javascript-Hilfsmittel strukturierte XHTML-Grundgerüste zusammenklicken, die neben einem Header, einem Footer und der Navigation bis zu 3 Spalten enthalten können.

In diese Boxen lassen sich dann per Drag ‘n Drop Elemente wie Überschriften, Absätze und Listen einfügen. Ist alles fertig, kann man das XHTML-Markup und den CSS-Code per Copy & Paste in den Editor seiner Wahl übernehmen und mit Inhalten füllen.

Das erhaltene Markup sieht gut aus, ebenso das Single-Line CSS. Das Layout basiert auf “floatenden” DIVisions mit elastischer Gesamtbreite. Arbeitet man viel mit Templates, also der Umsetzung von Photoshop-Layouts in XHTML-Dokumente, könnte dieses Tool demnach eine Zeitersparnis bringen.