Webseite mit YAML erstellen – Teil 1

YAML (Yet Another Multicolumn Layout) ist ein CSS Framework, welches ein robustes und flexibles Layout bereitstellt, das dem Programmierer und Designer die lästige Arbeit der Grundkonzeption abnimmt und die meisten Browserbugs von vornherein aushebelt.

Das Framework samt Dokumentation kann unter www.yaml.de heruntergeladen werden. Sämtliche Lizenzbedingungen sind dort ebenfalls erläutert. Wer das Framework noch nicht kennt, sollte es sich ansehen. Für sehr große Projekte kann es sich lohnen, selber zu programmieren – für kleine bis mittelgroße Projekte stellt YAML in meinen Augen eine tolle Basis dar.

Herangehensweise YAML Grundstruktur der Webseiten
Hat man sich das Framework heruntergeladen, sieht man sich einer ganzen Struktur von Ordnern gegenüber. Zu empfehlen ist das “Simple Project”, welches in Verbindung mit dem YAML Builder sehr leistungsfähig ist.

Als erstes sollte man sich die CSS-Dateien

  • basemod.sss
  • content.css
  • nav_vlist.css
  • nav_shinybuttons.css
  • nav_slidingdoor.css

in den Ordner css/screen/ kopieren. Diese Dateien werden angepasst und sollen durch ein Update der Version nicht überschrieben werden.

Anschließend kann man sich über den YAML Builder (zu finden auf der YAML Webseite) das Grundlayout zusammenklicken. Zu Auswahl stehen u.A. die Spaltenanzahl, feste und flexible Größen, Container und vieles mehr. Dies kann man natürlich auch alles manuell konfigurieren – mit dem Builder geht’s aber um ein Vielfaches schneller. Anschließend fügt man den Code, den der Builder produziert seinen bestehenden Dateien hinzu und hat somit eine optimale Ausgangsposition, um mit der Arbeit an der Webseite zu beginnen.

Zu Webseite mit YAML erstellen – Teil 2

Ähnliche Artikel

  • Keine Ähnlichen Artikel vorhanden.

1 comment

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>