CSS-Frameworks

Flexibilität mit YAML

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.

internet, webdesign, programmierung, css, framework, yaml, layout

© Internet Magazin

internet, webdesign, programmierung, css, framework, yaml, layout

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

© Internet Magazin

Skiplinks: Der schwarze Balken mit dem direkten Link zur Navigation erscheint nur, wenn man auf der Seite per Tastatur navigiert.

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

© Internet Magazin

Eine Auflistung aller typischerweise bei Layouts vorkommenden Bugs und deren Behebung findet sich in der Online-Dokumentation.

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 zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Film Amazon Prime Instant Video Warner Bros Emily Browning
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im Oktober mit Highlights wie "Sucker Punch", "Fifty Shades of Grey", "Spotlight" und der zweiten Staffel von "Ash vs. Evil…