Cascading Style Sheets (CSS) geben den Internetseiten ihr Aussehen. CSS-Frameworks unterstützen Webentwickler bei der schnellen und einfachen Umsetzung moderner Layouts.YAML ist solch ein CSS-Framework. Es wurde im Jahr 2005 vorgestellt und ist für die Entwicklung barrierefreier und responsiver Webanwendungen optimiert. Das flexible Grid-System bietet kreative Gestaltungsfreiheit und ermöglicht die Realisierung verschiedener Layouts. Lernen Sie jetzt Vorteile, Nachteile, Einsatzmöglichkeiten und Alternativen kennen!
YAML: Was ist das?
Das CSS-Framework YAML in der Version 4
YAML ist ein CSS-Framework, das Sie beim Design ansprechender, barrierefreier und responsiver Webanwendungen und Webseiten unterstützt. Es steht in der vierten Version zum Herunterladen bereit. YAML 4 („Yet Another Multicolumn Layout“) macht die Arbeit mit HTML5 und CSS3 leichter. Es verfügt über ein flexibles Grundgerüst, mit dem Sie Webprojekte schnell umsetzen können. Für dynamische und animierte Inhalte integriert es die JavaScript-Bibliothek JQuery.
Das CSS-Framework ist inzwischen seit knapp zwei Jahrzehnten im Einsatz und war bei Frontend-Entwicklern beliebt. Die aktuelle Version 4.1.2 wurde im Juli 2013 veröffentlicht.
Hinweis: Das CSS-Framework YAML ist nicht mit der Auszeichnungssprache YAML („YAML Ain’t Markup Language) zu verwechseln!
Was sind die Vorteile vom CSS-Framework YAML?
Bei der Arbeit mit dem Framework starten Sie Ihre Projekte mit einer leistungsstarken Basis und erreichen Meilensteine früher. Mit dem elastischen Grid-System bauen Sie für jedes Design eine stabile Basis.
- Sie entwickeln responsive und ansprechende Websites schneller; die Darstellung der Elemente passt sich automatisch an die Größe des Anzeigegeräts an.
- Modularer Aufbau und Trennung von Layout und Design: Das Framework bringt die am häufigsten benötigten Bausteine in seinen Kernmodulen mit.
- Die vereinfachte Stylesheet-Sprache Sass erleichtert die Programmierung mit ihrer unkomplizierten Syntax.
- Eine Anbindung an Content-Management-Systeme wie WordPress ist problemlos möglich.
- Der aktuelle Google Chrome Browser, Mozilla Firefox 3.6+, Apple Safari 4+, Opera 10+ und Internet Explorer 6+ unterstützen YAML.
Die Einsatzmöglichkeiten
Die letzte Aktualisierung der Software liegt einige Jahre zurück, dennoch eignet sich das CSS-Framework mit Unterstützung von HTML5 und CSS3 weiterhin für die Entwicklung von Webanwendungen. Mit YAML erstellen Sie maschinenlesbare und barrierefreie Websites und müssen nicht bei jedem Projekt bei null anfangen.
Schnellstart
Nach dem Herunterladen des Frameworks von yaml.de finden Sie im Ordner „Yaml“ die Core-Dateien und weitere Komponenten wie Add-ons und Forms. Die wichtigste Datei ist base.css in yaml/core, die Sie in den Header-Bereich einbinden:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Test Yaml</title>
<meta name="description" content=""/>
<meta name="author" content=""/>
<!-- mobile viewport optimisation -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- stylesheets -->
<link rel="stylesheet" href="yaml/core/base.min.css" type="text/css"/>
<link rel="stylesheet" href="css/styles.css" type="text/css"/>
<!--[if lte IE 7]>
<link rel="stylesheet" href="yaml/core/iehacks.min.css" type="text/css"/>
<![endif]-->
</head>
<body>
...
</body>
</html>
Hinweis: Nutzen Sie bei der Entwicklung die nicht-verkleinerten Dateiversionen. Für die fertige Website können Sie die Version „base.min.css“ verwenden, die nur 4,6 KB groß ist.
Es gibt zahlreiche Elemente wie Layouts, Grids, Columns und Forms. Die folgenden Codezeilen fügen ein Formular mit einem Eingabefeld ein:
<form class="ym-form"><!-- form row wrapper -->
<div class="ym-fbox">
<label for="your-id">Eingabefeld X label</label>
<input type="text" name="your-id" id="your-id" placeholder="Tragen Sie einen Wert ein" />
</div>
</form>
YAML für ein CMS-Template nutzen
Content-Management-Systeme (CMS) sind die Basis zahlreicher Webseiten, allein WordPress ist auf rund ein Drittel aller Internetseiten im Einsatz. Die Vorlagen legen das Design fest und lassen sich mit YAML erstellen. Auf der YAML-Webseite werden eine Reihe von Projekten vorgestellt. Davon sind allerdings einige veraltet und wurden eingestellt. Als Grund nennen die Entwickler von t3YAML für TYPO3 zum Beispiel die Verfügbarkeit komplexerer Frameworks wie das Bootstrap Framework. Für WordPress ist das Xtreme One Theme-Framework aus dem Jahr 2015 gelistet, die zweite Quelle zum Simplex Theme führt zu einer 404-Fehlerseite.
Welche CSS-Frameworks gibt es noch?
Webentwickler steigern mit CSS-Frameworks ihre Produktivität, im Netz stehen mehr als 100 Frontend-Frameworks zur Auswahl. Diese unterscheiden sich im Funktionsumfang und in der Bedienung.
- Das von Twitter entwickelte Bootstrap ist mehr als ein CSS-Framework, es handelt sich um ein Open-Source-Toolkit mit Grid-System, JavaScript-Plug-ins und vielen fertigen Komponenten. Es gehört seit Jahren zu den beliebtesten Frameworks und eignet sich auch für Einsteiger.
- Foundation zählt zu den fortschrittlichsten Frontend-Frameworks, es ist äußerst flexibel und leicht anpassbar. Es wird für das Design responsiver Websites sowie von E-Mails verwendet.
- Bulma basiert auf dem Flexbox-Layout und ist noch beliebter als Foundation. Es ist Open-Source, 100 % responsiv, modular und modern.
- Das Materialize CSS-Framework basiert auf dem Material Design von Google. Es bietet den Anwendern vier Kategorien: CSS, JavaScript, Mobile und Components. Jede Kategorie enthält eine Reihe von Beispielen und Erklärungen, wie das Material Design am besten eingesetzt wird.
- Pure ist ein Leichtgewicht unter den CSS-Frameworks; es wurde 2014 von Yahoo entwickelt und ist leicht zu erlernen.
Fazit
YAML ist ein solides CSS-Framework zum Erstellen responsiver und barrierefreier Webanwendungen. Die aktuelle Version stammt aus dem Jahr 2013, inzwischen gibt es moderne Alternativen mit mehr Funktionen. Für kleine Webanwendungen kann YAML ausreichen. Schauen Sie sich auch die weiteren Optionen wie Bootstrap, Foundation und Bulma an und wählen Sie das CSS-Framework nach Ihrem Bedarf aus!
Titelmotiv: Photo by Antonio Janeski on Unsplash
