2711. YAML – CSS ohne Jammern

Vielleicht kennen es einige noch nicht, daher möchte ich im Zuge unserer Academy auch das CSS-Framework YAML einmal vorstellen. YAML das steht für “Yet Another Multicolumn Layout” und ist ein (X)HTML/CSS Framework zur Erstellung moderner, flexibler Layouts auf Grundlage von float-Umgebungen.

Was macht also so ein CSS-Framework genau?

Nun, im Grunde genommen stellt euch YAML ein 3 spaltiges Layout zur Verfügung.
Nach dem Top-Down-Prinzip könnt ihr nun bestimmte Teile ausblenden, löschen oder umpositionieren.
Außerdem ermöglicht es euch alle Varianten des Layouts: Flexible, elastische, fixe und und und. Das Top-Down-Prinzip von YAML ermöglicht es fehler- und bugfrei zu arbeiten, da ein fester Standard immer gegeben ist. Das wird ebenfalls durch ein getrenntes Nutzer- und Core-CSS ermöglicht.

Erste Schritte:

Zuerst ladet euch das Simple Project herunter, dies liegt dem großen Downloadpackage nicht bei. Gerade für YAML Einsteiger liegt hier der beste Ansatz, da man im großen Package doch tiefer in der Dokumentation stecken sollte.
Hauptsächlich benötigt man den Ordner CSS und die Datei “my_layout.html”. Der Ordner YAML ist für den Anfang uninteressant. Im Unterordner Screen findet ihr die content.css und die basemod.css, diese ist wiederum eine Modifikation der base.css, die sich im YAML Core Ordner befindet. Damit hält YAML eine stabile Lösung für den Fall eines Fehlers bereit. Die base.css sollte also daher auch nicht angefasst werden. In my_layout.html stehen die gesamten HTML DIVs für euer Layout. Die CSS Datei my_layout.css ist für die Verlinkungen zu den Patches und CSS Dateien geeignet.
Jeder der mit CSS schon mal gearbeitet hat, weiß nun also hoffentlich wie YAML funktioniert und kann damit sofort loslegen.

YAML Builder

Intressant ist auch der YAML Builder, der eine Art Schnittstelle für Mensch und Maschine ist. Hier kann ganz easy mit ein paar Clicks ein HTML/CSS Layout zusammengestellt werden, der Code kann ausgegeben und in das fertige Simple Project eingebunden werden. Das geht in einer enormen Schnelligkeit und Genauigkeit, sodass man den CSS Code nur noch im geringen Maße anschauen muss.

Weitere interessante Informationen:

Wer noch mehr über YAML erfahren möchte sollte sich den Podcast von Technikwürze anhören.

Beitrag vom 27.11.2008
Abgelegt unter 72dpiAcademy
Tags , , , ,

Post von Marvin Kerkhoff

Marvin arbeitet als Freiberufler im Marketing in Frankfurt am Main. Er ist seit Start dieses Blogs dabei und arbeitet seit 4 Jahren mit Sebastian und Hanta zusammen. Er bezieht Stellung zu Themen wie Flash & Actionscript, Tools & Gadgets, HTML & CSS.

Alle Artikel von | Homepage/Blog | Marvin auf Twitter folgen, direkt kontaktieren.



  1. Hanta Seewald | 27112008 18:42

    Zu Ergänzung: Es gibt für YAML auch eine typo3/TemplaVoila Erweiterung und auch für xt:commerce ein auf YAML basierendes Template
    http://yaml.t3net.de/
    http://yaml.t3net.de/YAML-fuer-xt-Commerce.101.0.html

  2. Sebastian Gerhards | 28112008 09:40

    Und nicht zu verwechseln mit http://www.yaml.org/ – hier geht es um eine menschenlesbare Datenserialisation. Z. B. wird dieses YAML genutzt, um Tabellendefinitionen in Symfoni, einem ähnlichen Framework (aber empfehlenswerteren) wie CakePHP genutzt.

    Und um die Verwirrung komplett zu machen: In CakePHP gibt es Tutorials, YAML Templates, also die von Marv beschriebenen, einzubinden. ;)

Leave a Reply




Unsere Kommentare unterstützen Gravatare. Hier (?) schnell einen einstellen.