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.