CSS-Frameworks

Flexibilität mit YAML

11.2.2011 von Dr. Florence Maurice

Was so bescheiden als "yet another multicolumn layout" daherkommt, ist ein mächtiges und anpassungsfähiges CSS-Framework für flexible Layouts mit vielen nützlichen Ergänzungen.

ca. 3:45 Min
Ratgeber
VG Wort Pixel
  1. Flexibilität mit YAML
  2. Die Haupt-CSS-Datei
  3. Flicken für den IE
  4. Der Formularbaukasten
internet, webdesign, programmierung, css, framework, yaml, layout
internet, webdesign, programmierung, css, framework, yaml, layout
© Internet Magazin

Bei der Erstellung eines CSS-Layouts gibt es viel zu berücksichtigen: von der prinzipiellen Aufteilung der Seitenelemente über eine suchmaschinenoptimierte Anordnung der Inhalte im Quelltext, die passende Navigation und grundsätzliche Anforderungen der Barrierefreiheit bis hin zum Print-Layout.Und dann machen noch die schlechte CSS Unterstützung im Internet Explorer und die vielen Bugs dem Webprogrammierer das Leben schwer. Aber warum das Rad neu erfinden? Die meisten Layouts lassen sich auf ein Mehrspalten- oder Gridlayout zurückführen und sich damit über das CSS-Framework YAML von Dirk Jesse erstellen.

Eine flexible Basis

internet, webdesign, programmierung, css, framework, yaml, layout
Skiplinks: Der schwarze Balken mit dem direkten Link zur Navigation erscheint nur, wenn man auf der Seite per Tastatur navigiert.
© Internet Magazin

Ein über YAML erstelltes Basislayout besteht aus Kopf- und Fußzeile, einer Haupt und einer sekundären Navigation und drei Spalten. Es passt sich der Breite des Bildschirms an, begrenzt durch eine Minimalund Maximalbreite, für die es im Internet Explorer vor Version 7 einen Workaround gibt.Dieses Grundlayout lässt sich aber fast beliebig variieren und selbstverständlich kann man feste Einheiten verwenden, einzelne Bereiche wie Kopf- oder Fußzeile weglassen, das Ganze zu einem Zweispaltenlayout umfunktionieren, die Spaltenreihenfolge beliebig ändern oder auch ganz auf Spalten verzichten und ein sogenanntes Gridlayout erstellen.YAML ist äußerst flexibel und zudem hat man die Sicherheit, dass viele Bugs gar nicht erst auftreten oder man zumindest genaue Anweisungen bekommt, um sie zu beheben. Berücksichtigt wird dabei sogar noch der Internet Explorer 5.YAML hat sich bereits auf ganz unterschiedlichen Seiten bewährt - von der Webseite einfach-fuer-alle.de , die noch einen Sticky Footer ergänzt hat, über das Stadtportal von Wien und viele mehr. Häufig sind es Seiten, die bei der Barrierefreiheit punkten. Von Haus aus gibt es bei YAML Skiplinks, über die Tastaturnutzer direkt zum Hauptbereich oder zur Navigation springen können.Die einzelnen Bereiche sind mit WAI-ARIA-Rollen versehen, die die Navigation für Nutzer von Screenreadern erleichtern. YAML beinhaltet darüber hinaus auch Vorlagen für Printstylesheets, unterschiedliche Navigationsmuster, einen Formularbaukasten etc. Auch für Content-Management- Systeme oder gängige Shopsysteme gibt es YAML-Templates, unter anderem auch für Typo3, Joomla, Wordpress, xt:Commerce oder Drupal.YAML dürfen Sie sowohl auf privaten wie kommerziellen Sites verwenden, müssen allerdings einen Backlink auf die YAML-Website in der Fußzeile oder im Impressum einfügen (Creative Commons Lizenz CC-A 2.0). Alternativ kann man auch eine Lizenz erwerben. Eine einfache Lizenz für ein Projekt kostet 59,50 Euro, eine generelle Lizenz das Doppelte.

Der richtige Einstieg

internet, webdesign, programmierung, css, framework, yaml, layout
Eine Auflistung aller typischerweise bei Layouts vorkommenden Bugs und deren Behebung findet sich in der Online-Dokumentation.
© Internet Magazin

Die Flexibilität von YAML und sein Reichtum an Komponenten bringt es natürlich mit sich, dass Sie eine gewisse Einarbeitungszeit einplanen sollten, die Ihnen jedoch gleichzeitig tiefere Einblicke in CSS beschert, da YAML in vielen Punkten Best-Practice- Lösungen beinhaltet.Um ein eigenes Layout zu erstellen, muss man erst einmal die empfohlene Projektstruktur erstellen, die benötigten Dateien kopieren und in die korrekten Ordner verschieben und die Pfade anpassen. Es stehen mehrere Vorlagendateien zur Verfügung, die durch draft gekennzeichnet sind, wie etwa markup_draft.html für die grundlegende HTML-Datei. Einfacher gelingt der Einstieg mit der Projektvorlage Simple Project, wie Sie nun sehen werden.

Die HTML-Datei

Die mit YAML erstellten Layouts basieren auf einer HTML-Grundstruktur. Beim Simple Project ist das die Datei my_layout.html. Wenn Sie nicht mit dem Simple Project arbeiten, finden Sie diese Datei in Ihrem yaml-Ordner mit dem Namen markup_draft.html.Sehen wir uns an, wie sie aufgebaut ist: Die HTML-Datei benötigt am Anfang eine gültige Dokumenttypangabe, die dafür sorgt, dass Browser in den Standardmodus schalten. Beim Simple Project wird hier die in HTML5 vorgesehene vereinfachte Dokumenttypangabe benutzt:

<!DOCTYPE html>

In der Entwurfsvariante steht hingegen der klassische XHTML 1.0 Transitional Doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">

Welchen Sie verwenden, ist nicht relevant. Dann erfolgt die Einbindung der zwei Haupt-CSS-Dateien: my_layout.css gilt für alle Browser. patch_my_layout.css beinhaltet die für den Internet Explorer notwendigen Bugfixes und wird über konditionale Kommentare eingebunden. Diese sorgen dafür, dass die Datei nur vom Internet Explorer kleiner oder gleich Version 7 (lte IE 7) geladen wird.

<link href="css/my_layout.css"
rel="stylesheet" type="text/css"/><!--[if lte IE 7]><link href="css/patches/patch_my_
layout.css" rel="stylesheet"
type="text/css" /><![endif]-->

Innerhalb des body-Elements stehen zuallererst die Skiplinks:

<ul id="skiplinks"><li><a class="skip" href="#nav">Skip
to navigation (Press Enter).</a></li><li><a class="skip" href="#col3">Skip
to main content (Press Enter).</a></li></ul>

Skiplinks helfen Tastaturnutzern, die darüber direkt zur Navigation oder zum Inhalt gelangen können. Die Skiplinks sind standardmäßig über CSS versteckt und damit nicht sichtbar. Sie werden erst aktiviert, wenn ein Besucher mittels Tabulatortaste von Link zu Link springt.Dann beginnt der eigentliche Inhalt. Umschlossen wird nun das gesamte Layout von zwei mit Klassen versehenen div-Containern:

<div class="page_margins"><div class="page">

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.