YAML vor­ge­stellt

2005 ver­öf­fent­lich­te der Web­ent­wick­ler Dirk Jesse das Re­spon­si­ve-CSS-Framework YAML unter der Creative-Commons-Lizenz CC-BY 2.0, die es erlaubt, das Grund­ge­rüst sowohl im privaten als auch im kom­mer­zi­el­len Bereich kos­ten­frei zu nutzen. Betreiber, die ihr Web­pro­jekt unter einer anderen Lizenz online stellen wollen, können al­ter­na­tiv ein kom­mer­zi­el­les Modell erwerben, das ihnen freie Hand bei der Li­zen­zie­rung lässt. Der Fokus der CSS-Rah­men­struk­tur lag seit jeher darin, dem Nutzer größt­mög­li­che Freiheit bei der Ge­stal­tung bar­rie­re­frei­er Web­an­wen­dun­gen zu bieten. Die aktuelle Version (4.2.1) des Frame­works, das von zahl­rei­chen Content-Ma­nage­ment-Systemen wie WordPress, TYPO3 oder Joomla dank ent­spre­chen­der CMS-In­te­gra­ti­on-Templates un­ter­stützt wird, stammt aus dem Jahr 2013.

YAML ist eine Ar­beits­um­ge­bung, die Ent­wick­lern die Arbeit mit den Web­spra­chen HTML und CSS ver­ein­facht und dabei den Schwer­punkt auf die Be­dien­bar­keit und Ein­fach­heit des geplanten Projekts setzt. Bei dem Namen YAML handelt es sich um die Abkürzung von „Yet Another Mul­ti­co­lumn Layout“ (dt. „Noch ein weiteres Mehr­spal­ten-Layout“). Das YAML-Framework ist dabei nicht mit der Aus­zeich­nungs­spra­che YAML („YAML Ain’t Markup Language“) zu ver­wech­seln, die mit dem Webgerüst nur indirekt zu tun hat: Die Module, aus denen sich das Framework zu­sam­men­setzt, wurden nämlich mit Sass („Syn­tac­ti­cal­ly Awesome Stylesheets“) kreiert. So können Sie die einzelnen Teil­be­rei­che auch mithilfe des CSS-Prä­pro­zes­sors, der maß­geb­lich von der YAML-Aus­zeich­nungs­spra­che be­ein­flusst ist, anpassen und erweitern.

Seit Version 3.0 ist die Ja­va­Script-Bi­blio­thek jQuery im­ple­men­tiert und perfekt auf das CSS-Framework ab­ge­stimmt, was die Ent­wick­lung dy­na­mi­scher und ani­mier­ter Elemente für den eigenen Web­auf­tritt erheblich ver­ein­facht. Mit Thinkin’ Tags, dem Nach­fol­ger von YAML Builder (bis 3.1), existiert darüber hinaus ein Drag-and-Drop-Editor, der Sie bei der Ge­stal­tung eines eigenen YAML-Layouts un­ter­stützt und alle er­stell­ten HTML-Seiten und Style­sheets des Projekts au­to­ma­tisch verwaltet.

Mit seinem modularen System bietet YAML die typischen Vorzüge eines Frame­works: Wenn Sie ein neues Web­pro­jekt angehen, müssen Sie nicht komplett bei null starten, sondern können direkt mit einem leis­tungs­star­ken Ba­sis­ge­rüst loslegen – was Ihnen wertvolle Zeit erspart. Als re­spon­si­ves CSS-Framework liegt die Stärke der vor­ge­fer­tig­ten YAML-Bausteine ins­be­son­de­re in ihrer An­pas­sungs­fä­hig­keit: Un­ab­hän­gig davon, mit welchen Geräten und Browsern Besucher auf Ihr Projekt zugreifen, sorgt der flexible Code für eine an­spre­chen­de visuelle Prä­sen­ta­ti­on. Mit den Kern­mo­du­len, die Ihnen dafür zur Verfügung stehen, deckt das Framework die am häu­figs­ten be­nö­tig­ten Elemente ab – obwohl diese gerade einmal eine Ge­samt­grö­ße von knapp 6 KB haben.

Zu den Stan­dard­mo­du­len, die im Style­sheet base.css spe­zi­fi­ziert werden, zählen die folgenden:

Um auch alte Versionen des Internet Explorers zu un­ter­stüt­zen, werden die Kern­kom­po­nen­ten der base.css-Datei durch eine Bugfix-Sammlung für die Versionen 5, 6 und 7 des ehe­ma­li­gen Microsoft-Browsers kom­plet­tiert. Diese ist in der Datei iehacks.css ge­spei­chert, die zwar optional ist, aber in jedem Fall un­ver­än­dert genutzt werden sollte, wenn Sie Ihr YAML-Projekt auch in den alten In­ter­net­brow­ser-Versionen an­spre­chend prä­sen­tie­ren wollen.

Das CSS-Framework sorgt nicht nur dafür, dass Ihr Web­auf­tritt am Ende optimal für alle Besucher auf­be­rei­tet ist, sondern in erster Linie dafür, dass sich der Ent­wick­lungs­pro­zess und die mögliche Anbindung an Ihr prä­fe­rier­tes Content-Ma­nage­ment-System für Sie so einfach wie möglich gestalten. So helfen Ihnen der modulare Aufbau und die strikte Trennung von Layout- und Design-Kom­po­nen­ten dabei, den Code nut­zer­freund­lich und schlank zu halten. Benötigen Sie ein be­stimm­tes Website-Element nicht, müssen Sie auch nicht darauf zu­rück­grei­fen, denn das Grund­ge­rüst gibt Ihnen nur einen Weg vor, dessen Richtung Sie maß­geb­lich bestimmen.

Dass Sie zu diesem Zweck auf die ver­ein­fach­te Style­sheet-Sprache Sass zu­rück­grei­fen können, ist zwei­fels­oh­ne einer der größten Vorteile des YAML-Frame­works. Dank der ein­fa­che­ren Syntax sind die ge­wünsch­ten Style­sheets we­sent­lich schneller verfasst als mit ge­wöhn­li­chem CSS. Darüber hinaus reduziert der Prä­pro­zes­sor die Anzahl an HTTP-Requests, indem Style­sheets mit­ein­an­der verknüpft werden, und au­to­ma­ti­siert die Kom­pres­si­on der Vor­la­ge­bö­gen. Zuletzt generiert Sass au­to­ma­tisch die not­wen­di­gen CSS-Dateien, ohne dass Sie sich darum kümmern müssen.

Ein zweites großes Plus des Re­spon­si­ve-CSS-Frame­works re­sul­tiert aus der Ent­wick­lungs­ar­beit der en­ga­gier­ten YAML-Community, die diverse Vorlagen für die ver­schie­dens­ten Content-Ma­nage­ment-Systeme entworfen und ver­öf­fent­licht hat und dafür teilweise sogar spe­zi­fi­schen Support anbietet. Diese fertigen Templates ver­knüp­fen das Framework mit den An­wen­dun­gen zur Ver­wal­tung Ihrer Web­in­hal­te. Sie können sie teils kos­ten­frei, teils kos­ten­pflich­tig her­un­ter­la­den und nutzen. So ersparen Sie sich die not­wen­di­gen An­pas­sun­gen am Kern-Framework und richten den Fokus ganz auf die Ge­stal­tung Ihres Web­pro­jekts. U. a. exis­tie­ren folgende YAML-CMS-Templates:

• JYAML: Kom­plett­pa­ket bestehend aus Template, Plug-in und Bi­blio­thek für Joomla ab Version 3.6.0 auf Basis von YAML 4
• YAML for Drupal: Ver­schie­de­ne Templates für Drupal, die das CSS-Framework in Drupal 6 und 7 (geplant auch 8) im­ple­men­tie­ren

Der Aufbau und die Sprach­ba­sis des YAML-Frame­works stehen stell­ver­tre­tend für dessen Ein­fach­heit. Damit Nutzer diese Vorzüge optimal zur Ge­stal­tung des eigenen Web­pro­jekts einsetzen können, erschien 2008 die erste stabile Version des bereits erwähnten YAML Builder. Alle Grund­funk­tio­nen des CSS-Grund­ge­rüsts (bis YAML 3.1) vereinend, er­mög­licht es das On­line­tool mithilfe nütz­li­cher Drag-and-Drop-Elemente, das geplante Weblayout zügig und intuitiv zu erstellen. Jede einzelne Ver­än­de­rung kann dabei sofort in der Live-Vorschau be­gut­ach­tet werden. Ab­schlie­ßend erstellt der Builder au­to­ma­tisch die not­wen­di­gen Style­sheets sowie das (X)HTML-Mark-up.

Mit der vierten Version des Frame­works fand der YAML Builder in dem Tool Thinkin’ Tags seinen legitimen Nach­fol­ger. Dieses zeichnet sich durch einen noch besseren Workflow bei der Er­stel­lung von Website-Pro­to­ty­pen auf Basis von YAML oder des ebenfalls un­ter­stütz­ten CSS-Frame­works Blueprint aus. Ent­wick­lern stehen zu diesem Zweck u. a. folgende Features zur Verfügung:

• HTML-Editor: Mithilfe des in­te­grier­ten HTML-Editors können Sie den Code per Dop­pel­klick im Layout oder im DOM-Struk­tur­baum un­kom­pli­ziert be­ar­bei­ten. Der Editor ver­ein­facht Ihnen das Code-Schreiben mit typischen Hil­fe­stel­lun­gen wie Syn­tax­her­vor­he­bung, au­to­ma­ti­scher Ver­voll­stän­di­gung und Live-Über­prü­fung.

• CSS-Editor: Auch die CSS-Dateien Ihres Projekts können Sie über einen internen Editor (inklusive Syn­tax­her­vor­he­bung und Live-Analyse) direkt in Thinkin’ Tags editieren. Hierfür greift der Editor auf die ent­spre­chen­den Me­di­en­ab­fra­gen (Media Queries) zurück, mit deren Hilfe ein Style­sheet zu einem Medium zu­ge­ord­net wird.

• Seiten- und Style­sheet-Ma­nage­ment: Jedes Projekt kann diverse HTML-Seiten und Style­sheets enthalten, wobei Sie jeder HTML-Datei die ent­spre­chen­den Ge­stal­tungs­bö­gen zuweisen können. Zudem ist es möglich, Style­sheets auf bestimmte Zeit aus­zu­blen­den.

• Re­spon­si­ve-Webdesign-Check: Ohne Thinkin’ Tags verlassen zu müssen, testen Sie Ihr Layout für un­ter­schied­li­che Szenarien – so kann bei­spiels­wei­se die Dar­stel­lungs­brei­te auf ver­schie­de­nen Geräten wie Desktop-PCs, Tablets oder Smart­phones emuliert werden, um etwaige Un­ge­reimt­hei­ten fest­zu­stel­len und zu entfernen.

• Nut­zer­freund­li­che Ty­po­gra­fie-Op­ti­mie­rung: Ver­än­de­run­gen in der Ty­po­gra­fie sind dank hilf­rei­cher Slider schnell getestet. Zudem haben Sie direkt aus der Ap­pli­ka­ti­on heraus Zugriff auf über 600 Schrift­ar­ten aus der Google-Webfont-Bi­blio­thek, die Sie mit nur einem Klick in Ihr Projekt in­te­grie­ren.

Als größtes Problem von Frame­works wie YAML wird oftmals die lange Ein­ar­bei­tungs­zeit auf­ge­führt, die notwendig ist, um sich mit dem Code der ver­schie­de­nen Module vertraut zu machen. Wer auf vor­ge­fer­tig­te Code-Schnipsel zu­rück­greift, muss sich in der Tat aus­führ­lich mit deren Funk­ti­ons­prin­zi­pi­en befassen, selbst wenn er fundierte Kennt­nis­se in HTML, CSS und Co. besitzt. Es gilt daher, die eigene Ar­beits­wei­se an die kon­zep­tio­nel­len Ansätze des Frame­works an­zu­pas­sen, um am Ende das ge­wünsch­te Ergebnis zu erzielen. YAML bietet zu diesem Zweck zwar aus­führ­li­che Do­ku­men­ta­tio­nen zu den einzelnen Kom­po­nen­ten, die für die aktuelle Version al­ler­dings aus­schließ­lich in eng­li­scher Sprache vorliegen. Ebenso typisch für Frame­works ist der Umstand, dass für ein YAML-Projekt in der Regel mehr Code geladen wird, als ei­gent­lich benötigt wird – sofern Sie diesen nicht gezielt op­ti­mie­ren.

Ein weiterer Nachteil des Re­spon­si­ve-CSS-Frame­works ist die eingangs erwähnte Li­zen­zie­rung. Zwar erlaubt es Ihnen die ein­ge­setz­te Creative-Commons-At­tri­bu­ti­on-2.0-Lizenz (CC-BY 2.0), das Webgerüst sowohl privat als auch kom­mer­zi­ell kostenlos zu nutzen; Vor­aus­set­zung dafür ist jedoch, dass Sie in Ihrer Web­prä­senz einen Rück­ver­weis auf die YAML-Homepage setzen. Spä­tes­tens, wenn Sie Ihr Projekt unter einer anderen Lizenz ver­öf­fent­li­chen wollen, kommen Sie nicht darum herum, eine der kos­ten­pflich­ti­gen Li­zenz­mo­del­le (Project, General, OEM) zu erwerben.

Mit seiner Brow­ser­freund­lich­keit, dem re­spon­si­ven Webdesign-Ansatz und der Un­ter­stüt­zung von CSS3 und HTML5 ist YAML trotz der Tatsache, dass der letzte Release bereits eine gewisse Zeit zu­rück­liegt, ein durchaus in­ter­es­san­tes Framework für Web­an­wen­dun­gen. Dank des Ac­ces­si­bi­li­ty-Moduls gestalten Sie Ihren Auftritt ma­schi­nen­les­bar, womit Sie nicht nur einen ent­schei­den­den Schritt in Richtung Bar­rie­re­frei­heit machen, sondern auch in Sachen Such­ma­schi­nen­op­ti­mie­rung wertvolle Punkte sammeln. In Kom­bi­na­ti­on mit Thinkin’ Tags haben Sie somit alles, was Sie zum Erstellen einer modernen, stan­dard­kon­for­men Web­prä­senz benötigen. Wenn Sie den Inhalt Ihres Projekts zu­sätz­lich mithilfe eines der un­ter­stütz­ten Content-Ma­nage­ment-Systeme verwalten, können Sie sich komplett auf die Ge­stal­tung von Layout und Design kon­zen­trie­ren.

Um die aktuelle Version des CSS-Frame­works zu nutzen, müssen Sie zunächst die ent­spre­chen­den Core-Dateien her­un­ter­la­den, die Sie ei­ner­seits auf der of­fi­zi­el­len Website, an­de­rer­seits im YAML-GitHub-Re­po­si­to­ry vorfinden. Dabei erhalten Sie zu­sätz­lich u. a. die Do­ku­men­ta­ti­on, ver­schie­de­ne Layout-Demos und die Ja­va­Script-Bi­blio­thek jQuery. Um aus den vor­lie­gen­den Dateien die Stan­dard­aus­füh­rung des Frame­works zu kom­pi­lie­ren, benötigen Sie folgende fünf Kom­po­nen­ten:

• Node.js: Ser­ver­sei­ti­ge Lauf­zeit­um­ge­bung auf Basis der Ja­va­Script-Engine V8
• Grunt-CLI: Kom­man­do­zei­len­ba­sier­tes Tool, das auf Node.js aufbaut und für das Au­to­ma­ti­sie­ren von Aufgaben benötigt wird (z. B. Kom­pi­lie­ren von LESS- oder SCSS-Dateien)
• Ruby: Ob­jekt­ori­en­tier­te Pro­gram­mier­spra­che
• Sass: Al­ter­na­ti­ve Style­sheet-Sprache, die die Nutzung von Variablen und Mixins er­mög­licht und auf diese Weise das Erstellen der Ge­stal­tungs­bö­gen ver­ein­facht
• Compass: Framework, das Sass als Stan­dard­bi­blio­thek dient und dem Prä­pro­zes­sor eine große Anzahl von Mixins zur Verfügung stellt

Haben Sie diese Kom­po­nen­ten in­stal­liert und die YAML-Dateien auf Ihrem System ge­spei­chert, gilt es, alle not­wen­di­gen Grunt-Ab­hän­gig­kei­ten auf­zu­lö­sen und ein­zu­rich­ten. Folgende Tasks sind vor­aus­ge­setzt, damit die Kom­pi­lie­rung des YAML-Frame­works ord­nungs­ge­mäß von­stat­ten­geht:

• grunt: Startet eine einfache Compass-Sequenz, um die vor­lie­gen­den Sass-/SCSS-Dateien in CSS zu kom­pi­lie­ren
• grunt watch: Aktiviert die Compass-Über­wa­chungs­funk­ti­on, mit deren Hilfe die Sass/SCSS-Dokumente bei allen späteren Ver­än­de­run­gen au­to­ma­tisch erneut kom­pi­liert werden
• grunt build: Kom­pi­liert alle sta­ti­schen YAML-CSS-Dateien
• grunt build-utf8: Gleiche Funk­tio­na­li­tät wie grunt build, al­ler­dings bleibt die Regel @charset "utf8" in den CSS-Dateien aktiv

YAML ver­ein­facht die Ent­wick­lung eines neuen Web­pro­jekts sowie dessen optische Aus­ar­bei­tung via CSS ungemein. Der Lern­pro­zess, der der Nutzung des Frame­works vor­aus­geht, ist jedoch kei­nes­wegs zu un­ter­schät­zen: Nur, wenn Sie mit HTML und CSS vertraut und zudem dazu bereit sind, sich auf die kon­zep­tio­nel­len Ideen der stan­dard­kon­for­men Ent­wick­lungs­ba­sis ein­zu­las­sen, können Sie deren volles Potenzial aus­schöp­fen. Mit Thinkin’ Tags hat Ent­wick­ler Dirk Jesse aber ein Tool auf den Markt gebracht, dass erfahrene Nutzer bei der Kreation von YAML-Layouts tat­kräf­tig un­ter­stützt und den Einstieg zumindest er­leich­tert. Neu­ein­stei­ger werden jedoch mit der vor­ge­fer­tig­ten Layout-Struktur auch trotz des Hilfs­tools ihre Probleme haben.

Ein großes Fra­ge­zei­chen steht hinter der Zu­kunfts­fä­hig­keit des Frame­works. Das vorerst letzte Update für die aktuelle Version 4 stammt aus dem Jahr 2014. Auch wenn Jesse die Arbeiten an einer fünften Ausgabe des Re­spon­si­ve-CSS-Frame­works bestätigt hat, bleibt ab­zu­war­ten, wie und ob die weitere Ent­wick­lung vorangeht. Bis dato stellen YAML und Thinkin’ Tags aber eine absolut emp­feh­lens­wer­te Plattform für moderne Web­pro­jek­te zur Verfügung, die sich durch eine flexible und stan­dard­kon­for­me Struktur aus­zeich­nen.