YAML: Das standardkonforme Grundgerüst für universelle Webprojekte

2005 veröffentlichte der Webentwickler Dirk Jesse das Responsive-CSS-Framework YAML unter der Creative-Commons-Lizenz CC-BY 2.0, die es erlaubt, das Grundgerüst sowohl im privaten als auch im kommerziellen Bereich kostenfrei zu nutzen. Betreiber, die ihr Webprojekt unter einer anderen Lizenz online stellen wollen, können alternativ ein kommerzielles Modell erwerben, das ihnen freie Hand bei der Lizenzierung lässt. Der Fokus der CSS-Rahmenstruktur lag seit jeher darin, dem Nutzer größtmögliche Freiheit bei der Gestaltung barrierefreier Webanwendungen zu bieten. Die aktuelle Version (4.2.1) des Frameworks, das von zahlreichen Content-Management-Systemen wie WordPress, TYPO3 oder Joomla dank entsprechender CMS-Integration-Templates unterstützt wird, stammt aus dem Jahr 2013.

YAML ist eine Arbeitsumgebung, die Entwicklern die Arbeit mit den Websprachen HTML und CSS vereinfacht und dabei den Schwerpunkt auf die Bedienbarkeit und Einfachheit des geplanten Projekts setzt. Bei dem Namen YAML handelt es sich um die Abkürzung von „Yet Another Multicolumn Layout“ (dt. „Noch ein weiteres Mehrspalten-Layout“). Das YAML-Framework ist dabei nicht mit der Auszeichnungssprache YAML („YAML Ain’t Markup Language“) zu verwechseln, die mit dem Webgerüst nur indirekt zu tun hat: Die Module, aus denen sich das Framework zusammensetzt, wurden nämlich mit Sass („Syntactically Awesome Stylesheets“) kreiert. So können Sie die einzelnen Teilbereiche auch mithilfe des CSS-Präprozessors, der maßgeblich von der YAML-Auszeichnungssprache beeinflusst ist, anpassen und erweitern.

Seit Version 3.0 ist die JavaScript-Bibliothek jQuery implementiert und perfekt auf das CSS-Framework abgestimmt, was die Entwicklung dynamischer und animierter Elemente für den eigenen Webauftritt erheblich vereinfacht. Mit Thinkin’ Tags, dem Nachfolger von YAML Builder (bis 3.1), existiert darüber hinaus ein Drag-and-Drop-Editor, der Sie bei der Gestaltung eines eigenen YAML-Layouts unterstützt und alle erstellten HTML-Seiten und Stylesheets des Projekts automatisch verwaltet.

Mit seinem modularen System bietet YAML die typischen Vorzüge eines Frameworks: Wenn Sie ein neues Webprojekt angehen, müssen Sie nicht komplett bei null starten, sondern können direkt mit einem leistungsstarken Basisgerüst loslegen – was Ihnen wertvolle Zeit erspart. Als responsives CSS-Framework liegt die Stärke der vorgefertigten YAML-Bausteine insbesondere in ihrer Anpassungsfähigkeit: Unabhängig davon, mit welchen Geräten und Browsern Besucher auf Ihr Projekt zugreifen, sorgt der flexible Code für eine ansprechende visuelle Präsentation. Mit den Kernmodulen, die Ihnen dafür zur Verfügung stehen, deckt das Framework die am häufigsten benötigten Elemente ab – obwohl diese gerade einmal eine Gesamtgröße von knapp 6 KB haben.

Zu den Standardmodulen, die im Stylesheet base.css spezifiziert werden, zählen die folgenden:

Um auch alte Versionen des Internet Explorers zu unterstützen, werden die Kernkomponenten der base.css-Datei durch eine Bugfix-Sammlung für die Versionen 5, 6 und 7 des ehemaligen Microsoft-Browsers komplettiert. Diese ist in der Datei iehacks.css gespeichert, die zwar optional ist, aber in jedem Fall unverändert genutzt werden sollte, wenn Sie Ihr YAML-Projekt auch in den alten Internetbrowser-Versionen ansprechend präsentieren wollen.

Das CSS-Framework sorgt nicht nur dafür, dass Ihr Webauftritt am Ende optimal für alle Besucher aufbereitet ist, sondern in erster Linie dafür, dass sich der Entwicklungsprozess und die mögliche Anbindung an Ihr präferiertes Content-Management-System für Sie so einfach wie möglich gestalten. So helfen Ihnen der modulare Aufbau und die strikte Trennung von Layout- und Design-Komponenten dabei, den Code nutzerfreundlich und schlank zu halten. Benötigen Sie ein bestimmtes Website-Element nicht, müssen Sie auch nicht darauf zurückgreifen, denn das Grundgerüst gibt Ihnen nur einen Weg vor, dessen Richtung Sie maßgeblich bestimmen.

Dass Sie zu diesem Zweck auf die vereinfachte Stylesheet-Sprache Sass zurückgreifen können, ist zweifelsohne einer der größten Vorteile des YAML-Frameworks. Dank der einfacheren Syntax sind die gewünschten Stylesheets wesentlich schneller verfasst als mit gewöhnlichem CSS. Darüber hinaus reduziert der Präprozessor die Anzahl an HTTP-Requests, indem Stylesheets miteinander verknüpft werden, und automatisiert die Kompression der Vorlagebögen. Zuletzt generiert Sass automatisch die notwendigen CSS-Dateien, ohne dass Sie sich darum kümmern müssen.

Ein zweites großes Plus des Responsive-CSS-Frameworks resultiert aus der Entwicklungsarbeit der engagierten YAML-Community, die diverse Vorlagen für die verschiedensten Content-Management-Systeme entworfen und veröffentlicht hat und dafür teilweise sogar spezifischen Support anbietet. Diese fertigen Templates verknüpfen das Framework mit den Anwendungen zur Verwaltung Ihrer Webinhalte. Sie können sie teils kostenfrei, teils kostenpflichtig herunterladen und nutzen. So ersparen Sie sich die notwendigen Anpassungen am Kern-Framework und richten den Fokus ganz auf die Gestaltung Ihres Webprojekts. U. a. existieren folgende YAML-CMS-Templates:

• JYAML: Komplettpaket bestehend aus Template, Plug-in und Bibliothek für Joomla ab Version 3.6.0 auf Basis von YAML 4
• yamltheme (Contao): Contao-Template auf Basis von YAML 4.1 für Contao 3.0.0 und 3.1.0
• YAML for Drupal: Verschiedene Templates für Drupal, die das CSS-Framework in Drupal 6 und 7 (geplant auch 8) implementieren

Der Aufbau und die Sprachbasis des YAML-Frameworks stehen stellvertretend für dessen Einfachheit. Damit Nutzer diese Vorzüge optimal zur Gestaltung des eigenen Webprojekts einsetzen können, erschien 2008 die erste stabile Version des bereits erwähnten YAML Builder. Alle Grundfunktionen des CSS-Grundgerüsts (bis YAML 3.1) vereinend, ermöglicht es das Onlinetool mithilfe nützlicher Drag-and-Drop-Elemente, das geplante Weblayout zügig und intuitiv zu erstellen. Jede einzelne Veränderung kann dabei sofort in der Live-Vorschau begutachtet werden. Abschließend erstellt der Builder automatisch die notwendigen Stylesheets sowie das (X)HTML-Mark-up.

Mit der vierten Version des Frameworks fand der YAML Builder in dem Tool Thinkin’ Tags seinen legitimen Nachfolger. Dieses zeichnet sich durch einen noch besseren Workflow bei der Erstellung von Website-Prototypen auf Basis von YAML oder des ebenfalls unterstützten CSS-Frameworks Blueprint aus. Entwicklern stehen zu diesem Zweck u. a. folgende Features zur Verfügung:

• HTML-Editor: Mithilfe des integrierten HTML-Editors können Sie den Code per Doppelklick im Layout oder im DOM-Strukturbaum unkompliziert bearbeiten. Der Editor vereinfacht Ihnen das Code-Schreiben mit typischen Hilfestellungen wie Syntaxhervorhebung, automatischer Vervollständigung und Live-Überprüfung.

• CSS-Editor: Auch die CSS-Dateien Ihres Projekts können Sie über einen internen Editor (inklusive Syntaxhervorhebung und Live-Analyse) direkt in Thinkin’ Tags editieren. Hierfür greift der Editor auf die entsprechenden Medienabfragen (Media Queries) zurück, mit deren Hilfe ein Stylesheet zu einem Medium zugeordnet wird.

• Seiten- und Stylesheet-Management: Jedes Projekt kann diverse HTML-Seiten und Stylesheets enthalten, wobei Sie jeder HTML-Datei die entsprechenden Gestaltungsbögen zuweisen können. Zudem ist es möglich, Stylesheets auf bestimmte Zeit auszublenden.

• Responsive-Webdesign-Check: Ohne Thinkin’ Tags verlassen zu müssen, testen Sie Ihr Layout für unterschiedliche Szenarien – so kann beispielsweise die Darstellungsbreite auf verschiedenen Geräten wie Desktop-PCs, Tablets oder Smartphones emuliert werden, um etwaige Ungereimtheiten festzustellen und zu entfernen.

• Nutzerfreundliche Typografie-Optimierung: Veränderungen in der Typografie sind dank hilfreicher Slider schnell getestet. Zudem haben Sie direkt aus der Applikation heraus Zugriff auf über 600 Schriftarten aus der Google-Webfont-Bibliothek, die Sie mit nur einem Klick in Ihr Projekt integrieren.

Als größtes Problem von Frameworks wie YAML wird oftmals die lange Einarbeitungszeit aufgeführt, die notwendig ist, um sich mit dem Code der verschiedenen Module vertraut zu machen. Wer auf vorgefertigte Code-Schnipsel zurückgreift, muss sich in der Tat ausführlich mit deren Funktionsprinzipien befassen, selbst wenn er fundierte Kenntnisse in HTML, CSS und Co. besitzt. Es gilt daher, die eigene Arbeitsweise an die konzeptionellen Ansätze des Frameworks anzupassen, um am Ende das gewünschte Ergebnis zu erzielen. YAML bietet zu diesem Zweck zwar ausführliche Dokumentationen zu den einzelnen Komponenten, die für die aktuelle Version allerdings ausschließlich in englischer Sprache vorliegen. Ebenso typisch für Frameworks ist der Umstand, dass für ein YAML-Projekt in der Regel mehr Code geladen wird, als eigentlich benötigt wird – sofern Sie diesen nicht gezielt optimieren.

Ein weiterer Nachteil des Responsive-CSS-Frameworks ist die eingangs erwähnte Lizenzierung. Zwar erlaubt es Ihnen die eingesetzte Creative-Commons-Attribution-2.0-Lizenz (CC-BY 2.0), das Webgerüst sowohl privat als auch kommerziell kostenlos zu nutzen; Voraussetzung dafür ist jedoch, dass Sie in Ihrer Webpräsenz einen Rückverweis auf die YAML-Homepagesetzen. Spätestens, wenn Sie Ihr Projekt unter einer anderen Lizenz veröffentlichen wollen, kommen Sie nicht darum herum, eine der kostenpflichtigen Lizenzmodelle (Project, General, OEM) zu erwerben.

Mit seiner Browserfreundlichkeit, dem responsiven Webdesign-Ansatz und der Unterstützung von CSS3 und HTML5 ist YAML trotz der Tatsache, dass der letzte Release bereits eine gewisse Zeit zurückliegt, ein durchaus interessantes Framework für Webanwendungen. Dank des Accessibility-Moduls gestalten Sie Ihren Auftritt maschinenlesbar, womit Sie nicht nur einen entscheidenden Schritt in Richtung Barrierefreiheit machen, sondern auch in Sachen Suchmaschinenoptimierung wertvolle Punkte sammeln. In Kombination mit Thinkin’ Tags haben Sie somit alles, was Sie zum Erstelleneiner modernen, standardkonformen Webpräsenz benötigen. Wenn Sie den Inhalt Ihres Projekts zusätzlich mithilfe eines der unterstützten Content-Management-Systeme verwalten, können Sie sich komplett auf die Gestaltung von Layout und Design konzentrieren.

Um die aktuelle Version des CSS-Frameworks zu nutzen, müssen Sie zunächst die entsprechenden Core-Dateien herunterladen, die Sie einerseits auf der offiziellen Website, andererseits im YAML-GitHub-Repository vorfinden. Dabei erhalten Sie zusätzlich u. a. die Dokumentation, verschiedene Layout-Demos und die JavaScript-Bibliothek jQuery. Um aus den vorliegenden Dateien die Standardausführung des Frameworks zu kompilieren, benötigen Sie folgende fünf Komponenten:

• Node.js: Serverseitige Laufzeitumgebung auf Basis der JavaScript-Engine V8

• Grunt-CLI: Kommandozeilenbasiertes Tool, das auf Node.js aufbaut und für das Automatisieren von Aufgaben benötigt wird (z. B. Kompilieren von LESS- oder SCSS-Dateien)

• Ruby: Objektorientierte Programmiersprache

• Sass: Alternative Stylesheet-Sprache, die die Nutzung von Variablen und Mixins ermöglicht und auf diese Weise das Erstellen der Gestaltungsbögen vereinfacht

• Compass: Framework, das Sass als Standardbibliothek dient und dem Präprozessor eine große Anzahl von Mixins zur Verfügung stellt

Haben Sie diese Komponenten installiert und die YAML-Dateien auf Ihrem System gespeichert, gilt es, alle notwendigen Grunt-Abhängigkeiten aufzulösen und einzurichten. Folgende Tasks sind vorausgesetzt, damit die Kompilierung des YAML-Frameworks ordnungsgemäß vonstattengeht:

• grunt: Startet eine einfache Compass-Sequenz, um die vorliegenden Sass-/SCSS-Dateien in CSS zu kompilieren

• grunt watch: Aktiviert die Compass-Überwachungsfunktion, mit deren Hilfe die Sass/SCSS-Dokumente bei allen späteren Veränderungen automatisch erneut kompiliert werden

• grunt build: Kompiliert alle statischen YAML-CSS-Dateien

• grunt build-utf8: Gleiche Funktionalität wie grunt build, allerdings bleibt die Regel @charset "utf8" in den CSS-Dateien aktiv

YAML vereinfacht die Entwicklung eines neuen Webprojekts sowie dessen optische Ausarbeitung via CSS ungemein. Der Lernprozess, der der Nutzung des Frameworks vorausgeht, ist jedoch keineswegs zu unterschätzen: Nur, wenn Sie mit HTML und CSS vertraut und zudem dazu bereit sind, sich auf die konzeptionellen Ideen der standardkonformen Entwicklungsbasis einzulassen, können Sie deren volles Potenzial ausschöpfen. Mit Thinkin’ Tags hat Entwickler Dirk Jesse aber ein Tool auf den Markt gebracht, dass erfahrene Nutzer bei der Kreation von YAML-Layouts tatkräftig unterstützt und den Einstieg zumindest erleichtert. Neueinsteiger werden jedoch mit der vorgefertigten Layout-Struktur auch trotz des Hilfstools ihre Probleme haben.

Ein großes Fragezeichen steht hinter der Zukunftsfähigkeit des Frameworks. 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 Responsive-CSS-Frameworks bestätigt hat, bleibt abzuwarten, wie und ob die weitere Entwicklung vorangeht. Bis dato stellen YAML und Thinkin’ Tags aber eine absolut empfehlenswerte Plattform für moderne Webprojekte zur Verfügung, die sich durch eine flexible und standardkonforme Struktur auszeichnen.