CSS-Framework YAML

Aus THM-Wiki
Wechseln zu: Navigation, Suche

"Yet Another Multicolumn Layout" (kurz: YAML) ist ein frei verfügbares (X)HTML-/CSS-Framework zur Erstellung von flexiblen und barrierefreien Webseitenlayouts. YAML wird von Dirk Jesse entwickelt und wird von ihm unter der CreativeCommonsLicense veröffentlicht. Die Homepage zum Projekt ist zu finden unter http://www.yaml.de.

Einleitung

YAML baut auf CSS und XHTML auf und lässt sich leicht an die eigenen Bedürfnisse anpassen. Hierfür bietet YAML verschiedene Grundbausteine für die Bildschirm- und Druckerausgabe an, die sich gezielt für das eigene Projekt auswählen und modifizieren lassen. Es handelt sich bei YAML um kein Fertiglayout, sondern es bietet vielmehr ein robustes und browserunabhängiges Basislayout, welches als Grundlage für die eigenen Webseiten verwendet werden kann.

Überblick

Folgende Features bietet YAML:

  • Stabilität
    YAML bietet ein solides, praxiserprobtes Grundgerüst, welches die meisten Browserbugs bereits abfängt. Der Layoutersteller kann sich also mehr um die eigentliche Arbeit des Gestaltens kümmern und weniger um die Beseitung von Browserbugs
  • funktional gegliederte Stylesheets
    Die CSS-Dateien sind bei YAML funktional strukturiert, so gibt es z.B. eigene CSS-Dateien für die Bildschirm- und Druckerausgabe, die Navigation oder die Anpassungen für den Internet Explorer
  • ausführliche Dokumentation
    Der Quellcode von YAML ist nahezu lückenlos kommentiert (in Deutsch und Englisch), dem Paket liegt auch eine ausführliche pdf-Datei bei, in der detailiert auf den Aufbau von YAML, die Modifikationsmöglichkeiten und die verschiedenen Browserbugs eingegangen wird
  • browserübergreifend einheitliche Darstellung
    YAML hält sich an Webstandards und unterstützt die gebräuchlichsten Webbrowser. Der Internet Explorer wird bis zur Version 5.0 voll unterstützt. Weitere Informationen zur Browserunterstützung gibt es unter http://www.yaml.de/de/dokumentation/einfuehrung/unterstuetzte-browser.html zu finden.

Der Autor

Der dresdener Bauingenieur Dirk Jesse beginnt im März 2005 CSS-Templates für eigene Web-Projekte zu schreiben. Angestiftet von seinem Bekannten Jens Grochtdreis, der ihm auch für verschiedene Fragen zum Thema CSS zur Seite steht, veröffentlicht er im Oktober des selben Jahres die erste Version des YAML-Frameworks. Dirk betreibt nebenbei einen eigenen Weblog, in dem er unter anderem auf verschiedene Aspekte des Web-Designs eingeht. Für das YAML-Framework hat er ein Buch geschrieben, in welchem er sehr detailiert auf die Layout-Entwicklung mit CSS, verschiedene Browser- und CSS-Bugs, die Struktur und den Praxiseinsatz von YAML eingeht.

Konzepte der Layoutentwicklung

Prinzipiell lassen sich für die Herangehensweise beim Webdesign folgende zwei Konzepte nennen:

  • Das Bottom-Up-Prinzip
    Hier beginnt der Erstellungsprozess des Layouts quasi bei Null. Der Designer erstellt hierbei die (X)HTML-Struktur von Grund auf neu und positioniert die einzelnen Container dann mithilfe von CSS. Ist das Layout fertig, muss es in der Regel noch an verschiedene Browser angepasst werden, um Darstellungsfehler zu vermeiden.
  • Das Top-Down-Prinzip
    Hierbei wird auf einer vorhandenen (X)HTML-/CSS-Struktur aufgebaut. Der Designer passt die Grundstruktur seinen Bedürfnissen an und kann sein Hauptaugenmerk mehr auf die Gestaltung der einzelnen Elemente legen.

Das YAML-Framework ist für die Layouterstellung nach dem Top-Down-Prinzip entwickelt worden.

Browserbugs und Probleme mit CSS

Beim Erstellen von Layouts mithilfe von CSS, steht der Designer vor dem Problem, dass CSS von den verschiedenen Webbrowsern unterschiedlich gut umgesetzt und interpretiert wird. Auch hat CSS bestimmte Eigenheiten, die teilweise dem intuitiven Verständnis entgegenstehen und somit bei der Layouterstellung behindern können. Im Folgenden sollen einige dieser Eigenheiten und Probleme im Umgang mit CSS vorgestellt werden:

  • Boxmodell
    Das Boxmodell von CSS ist so ausgelegt, dass Rahmenstärke, Innen- sowie Außenabstand eines Containers zu dessen angegeben Höhe und Breite hinzuaddiert werden. Ein Container mit einem gegebenen Rahmen ist also z.B. breiter bzw. höher, als es die CSS-Eigenschaften height und width vorgeben. Will man nun z.B. einen Container mit Rahmen auf genau 50% des aüßeren Containers setzen, ist dies mit CSS2 schon nicht mehr möglich. Zur Lösung des Problems, kann man zwei Container schachteln, dem aüßeren Container gibt man die Breite von 50%, beim inneren setzt man die Breite auf auto und verpasst diesem den Rahmen. Daraus ergibt sich die Notwendigkeit, ein Layout mit vielen verschachtelten Containern zu erstellen, wenn man beim Einsatz von CSS möglichst flexibel bleiben möchte.
  • Umschließen von "floatenden" Containern
    Folgendes Szenario: Container A enthalte nur einen Container B mit der CSS-Eigenschaft float: left. Container B enthalte mehrzeiligen Text. Container A hat einen sichtbaren Rahmen. Anstatt dass der Rahmen den Text nun ganz umschließt, umschließt dieser nur die erste Zeile des Textes. Dieses sonderbare Verhalten lässt sich nur dadurch umgehen, dass man Container A einer der folgenden beiden Klassen zuweist:
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clear {
    overflow:hidden
}

Erst dann umschließt Container A tatsächlich den kompletten Text von Container B.

  • Der Internet Explorer
    Der Internet Explorer ist der momentan meist genutze Browser der Welt, enthält aber auch mit Abstand die meisten Bugs in Bezug auf den Umgang mit CSS. Deswegen verdient der Internet Explorer eine erhöhte Aufmerksamkeit beim Webdesign. Eine Liste mit den verschiedenen Bugs des IEs ist bei positioniseverything.net zu finden.

Diese Beispiele sollten an dieser Stelle verdeutlichen, dass der Umgang mit CSS nicht ganz einfach ist und eine Motivation dafür liefern, ein Framework zu nutzen, das diese Probleme/Eigenheiten teilweise beseitigt bzw. ausnutzt.

Das Framework

Das Framework lässt sich als zip-Archiv unter folgender Adresse herunterladen: http://www.yaml.de/de/download.html. Zusätzlich werden auf der Webseite ausführliche Anleitungen (in deutscher und englischer Sprache) als pdf-Dokumente angeboten.

Aufbau des Pakets

In dem Download-Paket befinden sich die folgenden vier Verzeichnisse:

  • yaml/
    In diesem Verzeichnis befinden sich alle Dateien des Frameworks. Dieser Ordner wird in das eigene Web-Projekt kopiert, um darauf aufbauend eigene Layouts zu erstellen.
  • documentation/
    In dieses Verzeichnis können die erwähnten pdf-Dokumente hineinkopiert werden. Um das Paket klein zu halten, werden sie nicht mitgeliefert.
  • examples/
    Dieses Verzeichnis enthält eine Vielzahl von Beispiel-Layouts, die auf dem YAML-Framework basieren. Durch das Studieren dieser, lassen sich gut der Aufbau und die Einsatzmöglichkeiten von YAML kennenlernen.
  • tools/
    In diesem Verzeichnis befinden sich einige Werkzeuge zur Layoutentwicklung. Die hier abgelegten Dateien sind für die Funktion des Frameworks nicht erforderlich. Sie stellen somit keine festen Bestandteile des YAML-Frameworks dar.

Aufbau des Layouts

Die Grundstruktur des Layouts von YAML wird in der Datei yaml/markup_draft.html festgelegt. Sie ist darauf ausgelegt, ein robustes und flexibles Grundgerüst für das eigene Weblayout zu schaffen auf welchem sich leicht aufbauen lässt. Das Layout besteht in seinem Rohbau aus drei Spalten, nicht benötigte Spalten lassen sich aber auch einfach entfernen.

Die einzelnen Container des Layouts:

Aufbau der YAML-Container
  • #page_margins - äußerster Container des Layouts; über ihn wird die Layoutbreite festgelegt
  • #page - kann zur grafischen Gestaltung der Randbereiche genutzt werden
  • #header - Kopfbereich des Layouts
  • #topnav - befindet sich in der rechten oberen Ecke des Kopfbereichs; hier können wichtige Links untergebracht werden
  • #nav - Container für die Hauptnavigation
  • #main - dieser Container enthält die drei Spalten des Layouts:
    • #col1 & #col1_content - Erster float-Container
    • #col2 & #col2_content - Zweiter float-Container
    • #col3 & #col3_content - Statischer Container
  • #ie_clearing - der Container wird ausgeblendet und dient nur zur korrekten Darstellung der Spalten im Internet Explorer
  • #footer - Fußbereich des Layouts

Die Bausteine

Das YAML-Framework bietet mehrere CSS-Bausteine, die sich für das eigene Layout ganz individuell auswählen und anpassen lassen. Die Bausteine befinden sich im Verzeichnis yaml/ und sind dort in weiteren Unterverzeichnissen organisiert.

Grundbausteine

Im Unterverzeichnis core/ befinden sich die Grundbausteine. Diese Bausteine stellen die Grundlage für jeden YAML-Style dar und sorgen dafür, dass in allen Webbrowsern die gleichen Ausgangsbedingungen gelten. Sie sollten unverändert in das eigene Layout übernommen werden. Foldende Grundbausteine sind vorhanden:

  • base.css stellt die grundlegene Funktionalität des Frameworks bereit (Browser-Reset, Clearing, Subtemplates usw.)
  • iehacks.css beinhaltet struktur- und layoutunabhängige Bugfixes für verschiedene Versionen des Internet Explorers
  • print_base.css passt das Layout für den Druck an (Linearisierung der Spaltencontainer, Ausblenden von nicht benötigten Elementen, Auszeichnung von Links, etc.)

Zusätzlich beinhaltet das core-Verzeichnis für alle Grundbausteine noch abgespeckte Versionen, bei denen die Kommentare und unnötige Leerzeichen und Zeilenumbrüche weggelassen wurden, um die Performance für den Betrieb in der Produktion zu erhöhen.

Bausteine für die Bildschirmausgabe

Im Unterverzeichnis screen/ befinden sich die CSS-Dateien basemod_draft.css und content_draft.css. Diese Bausteine sind Vorlagen und nüssen für das eigene Layout angepasst bzw. erweitert werden.

  • basemod.css
    Mithilfe dieses Bausteins können die einzelnen Container des Layouts nach den persönlichen Wünschen gestaltet werden (Anordnung der Spalten, Hintergründe, Rahmen, Maße, etc.)
  • content.css
    Dieser Baustein ist für die Gestaltung des Inhalts vorgesehen (Formatierungen für Text, Links, Überschriften, Tabellen, Listen, etc.)

Die so angepassten Bausteine sollten dann in das selber zu erstellende Verzeichnis css/screen/ kopiert werden.

Bausteine für die Druckausgabe

Für die Druckausgabe gibt es im Unterverzeichnis print/ sieben CSS-Vorlagen (print_xxx_draft.css). In jeder Vorlage werden bestimmte Spalten für den Druck abgeschaltet um so z.B. nicht beötigte Menü-Spalten zu entfernen. So wird bei der Vorlage print_100_draft.css nur die erste Spalte col1 angezeigt, bei der Vorlage print_023_draft.css die Spalten col2 und col3. Für das eigene Drucklayout wird die gewünschte Vorlage in das Verzeichnis css/print kopiert und mit eigenen Anpassungen ergänzt.

Navigationsbausteine

Für die Menü-Navigation stellt das YAML-Framework im Verzeichnis navigation/ drei Bausteine zur Verfügung (2 für horizontale, einen für vertikale Navigation).

  • nav_slidingdoor.css Reiternavigation mit abgerundeten Ecken und grafischem Hover-Effekt
  • nav_shinybuttons.css Horizontal angeordnete Buttons mit leichtem Glanz-Effekt
  • nav_vlist.css Vertikale Listennavigation mit Einrückung von Untermenüeinträgen

Das zentrale Stylesheet

Um die verschiedenen Bausteine zusammenzubringen, werden die einzelnen css-Dateien über die @import-Anweisung in eine einzige css-Datei eingebunden, dem zentralen Stylesheet. Das zentrale Stylesheet könnte z.B. folgendermaßen aussehen:

css/beispiel_layout.css

/* import core styles | Basis-Stylesheets */
@import url(../yaml/core/base.css);

/* import screen layout | Screen-Layout einbinden */
@import url(../yaml/navigation/nav_shinybuttons.css);
@import url(screen/basemod.css);
@import url(screen/content.css);

/* import print layout | Druck-Layout einbinden */
@import url(../yaml/print/print_003_draft.css);

Das so erstellte Stylesheet lässt sich nun einfach in die Markup-Datei einbinden:

<head>
...
<link href="css/beispiel_layout.css" rel="stylesheet" type="text/css"/>
...
</head>

Subtemplates

Zur weiteren Strukturierung der Inhalte bietet das YAML-Framework sog. Subtemplates. Mithilfe dieser Templates lassen sich Inhalte in horizontal angeordnete Blöcke fassen und in unterschiedlichem Verhältnis teilen. Für folgende Teilungsverhälnisse werden css-Klassen angeboten:

  • 50% : 50% Teilung
  • 33% : 66% Teilung
  • 25% : 75% Teilung
  • Goldener Schnitt

Durch Schachtelung von mehreren solcher Blöcke lassen sich auf diesem Wege die Inhalte in beliebiger Kombination aufteilen. Es wäre z.B. denkbar, vier Textböcke so nebeneinander zu arrangieren, dass jeweils zwei im Verhältnis 50:50 geteilt werden und die beiden Blöcke jeweils zusammengenommen z.B. im Verhältnis 33:66.

Skip Links

Skip Links sollen Sehbehinderten dabei helfen, schneller durch die Webseite zu navigieren. Screenreader gehen meist so vor, dass sie den Inhalt der html-Datei sequentiell von oben nach unten vorlesen. So kann es passieren, dass der Screenreader die Navigation vorliest, währrend sich der Nutzer aber gerade für den Inhaltsbereich interessiert (oder umgekehrt). Um dem Nutzer das Überspringen der jeweiligen Bereiche zu ermöglichen, sind in der Markup-Datei des YAML-Frameworks weit oben Anker-Elemente für die Navigation und den Contentbereich platziert. Über spezielle css-Klassen werden diese Anker versteckt, und zwar so, dass sie ein Screenreader noch "findet", für den sehenden Nutzer aber unsichtbar bleiben.

Lizenzbedingungen

Das YAML-Framework wird unter der Creative Commons Attribution 2.0 Lizenz veröffentlicht. YAML kann sowohl im privaten als auch im kommerziellen Bereich kostenlos verwendet werden, Voraussetzung hierfür ist, dass auf der Webseite der Autor namentlich genannt und ein Link zur YAML-Homepage positioniert werden (z.B. im Impressum oder im Fußbereich). Alternativ stellt YAML auch zwei kostenpflichtige Lizenzmodelle zur Verfügung.

CMS-Templates auf YAML-Basis

Für viele Content-Management-Systeme existieren CSS-Templates, die auf dem YAML-Framework basieren.

  • Drupal
  • ExpressionEngine
  • Joomla
  • Papoo CMS
  • Papaya CMS
  • Postnuke
  • Serendipity
  • TYPO3
  • Wordpress
  • ZMS
  • xt-Commerce

Die Templates stammen nicht vom Autor des YAML-Frameworks und unterliegen deshalb jeweils anderen Nutzungsbedingungen.

Anwendung des Frameworks

Variationen der Spalten

Die drei Spalten des Basislayouts lassen sich auf zahlreiche Arten über CSS anordnen, ohne dabei an der Container-Struktur in der Markup-Datei etwas ändern zu müssen. So lassen sich z.B. alle Spalten in allen Kombinationen permutieren oder einzelne Spalten über die volle Breite anzeigen. Je nach gewählter Anordnung ergeben sich bestimmte Einschränkungen in der Wahl der Einheiten für die Spaltenmaße. Dazu bietet die YAML-Dokumentation eine detailierte Auflistung.

Gestaltung der Spalten

Durch die Ausnutzung des "Globalen Clearings" für den statischen Container col3, wird dieser automatisch zur längsten Spalte. Dieser Umstand gibt dem Designer mehr Möglichkeiten bei der Gestaltung der Spalten. So ist es z.B. möglich, durch Setzen der border-Eigenschaft der statischen Spalte, optische Spaltentrenner anzuzeigen oder den angrenzenden Spalten unterschiedliche Hintergrundfarben zu spendieren.

Flexible Seitenbreiten

Da Webanwender mit unterschiedlichen Auflösungen und Bildschirmgrößen aufwarten, sind bei der Gestaltung von Webseiten dynamische Breiten wünschenswert. Allerdings ist es schlecht, die Kontolle über die Breite komplett aus der Hand zu geben, denn zum einen gibt es bei hohen Breiten das Problem, dass lange Fließtexte zu langen Zeilen werden, was die Lesbarkeit beinträchtigt, zum anderen zerfällt bei zu schmalen Breiten das ganze Layout. Deswegen nutzt YAML zur Beschränkung der Seitenbreiten die min- und max-width-Eigenschaften von CSS, was die genannten Probleme bei dynamischen Breiten beseitigt.

Beispiel für eine dynamische und beschränkte Seitenbreite:

#page_margins {
  min-width: 760px;
  max-width: 100em;
  ...
}

YAML und eStudy

Für die Lehr- und Lernplattform eStudy wurde das YAML-Framework angepasst und eingebunden, um Portal-Styles auf YAML-Basis erstellen zu können. Das angepasste YAML-Framework befindet sich im Ordner style/yaml/.

Aufbau des angepassten Layouts

Um Header und Footer des Layouts beim Scrollen der Seite stehen lassen zu können und gleichzeitig noch flexibel bei der Gestaltung der Container zu bleiben, wurden die beiden Bereiche noch weiter geschachelt:

Aufbau der YAML-Container bei eStudy
  • #fixed_header
    • #fixed_header_content
      • #header
  • #footer
    • #footer_content

Erstellung eines Styles auf YAML-Basis

Für YAML-basierte Styles ist eine eigene Stylevorlage vorhanden, die als Basis für neu zu erstellende Styles verwendet werden kann. Das Template befindet sich im Ordner style/yaml_template. Um die Vorlage nutzen zu können, muss der Ordner kopiert, umbenannt und danach in den Style-Ordner zurückkopiert werden. Bei der Bennenung des Ordners ist darauf zu achten, dass der Name das Wort yaml enthält, damit beim Laden des Styles die speziell für YAML erstellte HTML-Struktur geladen wird (zu finden unter common/templates/yaml/).

Damit der neue Style verwendet werden kann, muss noch eine Datei mit dem Namen _about.txt in der Wurzel des neuen Style-Ordners angelegt werden, der Metainformationen zum Style enthält (Name, Autor, Beschreibung). Nun kann der Style auch schon im Portal-Menü unter Profil/eStudyStyle ausgewählt werden.

Das Template ist folgendermaßen aufgebaut:

  • images/
  • print/
    • print.css
  • screen/
    • basemod.css
    • content.css
  • ieextra.css
  • print.css
  • stylesheets.css

Für den neu zu erstellenden Style sind vor allem an den rot hervorgehobenen Dateien Anpassungen vorzunehmen.

Quellen

http://www.yaml.de

http://www.einfach-persoenlich.de/2006-12-21/autorengespraech-css-layouts-autoren-gespraech-mit-dirk-jesse-teil-1.html

Dirk Jesse: CSS-Layouts - Praxislösungen mit YAML, Galileo Computing, Bonn 2007, ISBN 978-3-89842-837-8