0. Inhaltsverzeichnis

1. Einleitung
    1.1. Voraussetzung
2. Was ist YAML?
3. Warum YAML?
4. Wie wird YAML integriert?
5. Erstellung eines Templates mit YAML
    5.1. Grundgerüst (Layout)
      5.1.1. Page
      5.1.2. Full Page
    5.2. Verwendung von Grids
      5.2.1. CSS für 960gs (12 Spalten)
      5.2.2. Equal Heights
    5.3. Tags für IE
6. Eigenes CSS ergänzen
7. Code für Template
8. Schlusswort

 

1. Einleitung

In diesem Tutorial erfährst du wie man ein Template-Grundgerüst mit dem YAML-Framework erstellen kann. Das Template ist so einfach wie möglich gehalten und kann beliebig mit weiteren Eigenschaften von YAML ergänzt werden.

Das Template kann in einem weiteren Schritt in ein CMS integriert werden. Dies ist jedoch kein Bestandteil dieses Tutorials.

Um auf dem neusten Stand zu sein, werden HTML5, CSS3 sowie YAML ab Version 4 verwendet.

Unter folgendem Link ist eine genauere Erklärung(English). http://en.wikipedia.org/wiki/HTML5_Shiv

Zurzeit unterstützen nicht alle Browser komplett HTML5 oder CSS3. Falls man kein Risiko eingehen will bleibt einem nur das Testen auf den verschiedene Browsern oder der Verzicht auf die neuste Technik. Eine kleine Auflistung welcher Browser was unterstützt findet man hier. http://fmbip.com/litmus/

Meine persönliche Ergänzung in diesem Tutorial ist die box-sizing Eigenschaft. Diese wird in folgenden Browsern unterstütz. http://caniuse.com/css3-boxsizing

Das Endprodukt sollte, mit Ausnahme der oben genannten Punkte, auf allen gängigen Browsern funktionieren. Ein Testing wird aber empfohlen, um zu sehen ob das eigene CSS in jedem Browser die gleiche Wirkung hat.

 

1.1. Voraussetzungen

Man sollte sich wenn möglich schon mal mit HTML und CSS auseinander gesetzt haben. Dies erleichtert das Verständnis und man ist in der Lage die einzelnen Codesnippeds später zusammen zufügen.

Man sollte wissen wie Google funktioniert. ;-)

Englischkenntnisse sind von Vorteil.

Weitere Voraussetzungen sind nicht nötig.

 

2. Was ist YAML?

Kurz und knapp: A modular CSS framework for truly flexible, accessible and responsive websites.

 

3. Warum YAML?

YAML ist so konzipiert, dass jeglicher Code/Style browserunabhängig ist. Dadurch können wir schnell und einfach ein sauberes Template erstellen, welches auf untenstehenden Browsern funktioniert. Wir müssen uns also nur noch um das eigene Style kümmern.

Gemäss http://www.yaml.de werden folgende Browser unterstützt:

  • Neuste von Google Chrome
  • Mozilla Firefox 3.6+
  • Opera 10+
  • Apple Safari 4+
  • Internet Explorer 6+

4. Wie wird YAML integriert?

Zuerst wird das ganze YAML-Packet unter folgendem Link heruntergeladen. http://www.yaml.de/resources.html

Anschliessend entpackt und der Ordner yaml/ in das css/ Verzeichnis deiner Webseite geladen. Natürlich kann es auch im root liegen. In diesem Tutorial werden wir aber vom css/ Verzeichnis ausgehen.

Ordnerstruktur

  • root
    • css
      • yaml
      • style.css
    • index.html

Die wichtigste Datei ist die base.css Datei. Diese ist in folgendem Verzeichnis abgelegt yaml/core/. Zusätzlich gibt es noch eine ohne Kommentar welche als base.min.css abgespeichert ist. Sie hat den Vorteil bei mobilen Geräten schneller geladen zu werden.

Die Datei ist wie folgt im HTML zu integrieren.

HTML

<head>
    ...
    <link href=" css/yaml/core/base.min.css" rel="stylesheet" type="text/css"/>
    ...
</head>

 

5. Erstellung eines Templates mit YAML

Nun werden wir ein einfaches Template erstellen, welches einen Header-, Navigation-, Content- und Footer-Bereich enthält. Der Content-Bereich soll in einem weiteren Schritt einfach mit Spalten erweitert werden können. Folgende Grafiken dienen zur Veranschaulichung.

 

Grundgerüst des Templates ohne Spalten
Grundgerüst des Templates ohne Spalten
Grundgerüst des Templates mit Spalten
Grundgerüst des Templates mit Spalten

 

Unser Beispiel Template wird 960px Breit sein. Wir haben dadurch den Vorteil die Webseite auf ein 12-Spalten bzw. 16-Spalten Layout anzupassen. Siehe auch http://960.gs/

 

5.1. Grundgerüst (Layout)

YAML gibt uns die Möglichkeit das Design auf zwei verschiedene Arten zu gliedern. Bzw. das Grundgerüst entsprechend zu verwalten. Auf der YAML-Webseite werden sie bezeichnet als „Page“ und „Full Page“. Siehe auch http://www.yaml.de/docs/index.html#yaml-layouts

Page Layout
Page Layout
Full Page Layout
Full Page Layout


Wir haben danke YAML den Vorteil das Design ganz einfach zu zentrieren. Natürlich nutzen wir dies für unser Template. Dazu verwende entweder den CSS Code aus dem Punkt 5.1.1. für das „Page“-Layout, bzw. aus dem Punkt 5.1.2. für das „Full Page“-Layout.

In diesem Tutorial werden wir mit dem "Full Page"- Layout fortfahren. Welche Variante du am Schluss wählst ist natürlich deine Sache.

Wichtig! Der Code muss in einem eigenen CSS-Dokument stehen. Jegliche Dateien vom YAML-Framework sollten/dürfen nicht bearbeitet werden.

 

5.1.1. Page

Beim Page Layout wird die komplette Seite nie die vorgegebene Breite überschreiten. Um dies umzusetzen wird folgender HTML und CSS Code verwendet.

HTML

<body>
    <div class="ym-wrapper">
        <header>...</header>
        <nav>...</nav>
        <div class="content">...</div>
        <footer>...</footer>
    </div>
</body>

CSS

.ym-wrapper {
    width: 960px;
    margin:0 auto;
}
div, header, nav, footer{
    -webkit-box-sizing: border-box;   /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;   /* Firefox, other Gecko */
    box-sizing: border-box;   /* Opera/IE 8+ */
}

 

ym-wrapper: Diese Klasse zentriert das div-Element, welches um die ganze Seite liegt. In diesem Fall muss es immer das Äusserste sein und darf nur einmal vorkommen. Die Breite welche im CSS definiert wird, kann nach Wunsch angepasst werden.

Folgender Link verdeutlicht den Vorteil von box-sizing (CSS3) http://css-tricks.com/box-sizing/

5.1.2. Full Page

Das Full Page Layout hat den Vorteil einzelne Elemente über die ganze Breite des Bildschirms darzustellen. Dadurch kann z.B. ein Footer breiter sein weder der Rest der Webseite. Der Webseite wird trotzdem eine Breite zugewiesen um den Rest sauber darzustellen.

Falls das Layout nicht zentriert wird, empfehle ich das Page Layout zu verwenden.

Folgender HTML und CSS Code soll dazu verwendet werden.

HTML

<body>
    <header>
        <div class="ym-wrapper">...</div>
    </header>
    <nav>
        <div class="ym-wrapper">...</div>
    </nav>
    <div class="content">
        <div class="ym-wrapper">...</div>
    </div>
    <footer>
        <div class="ym-wrapper">...</div>
    </footer>
</body>

CSS

.ym-wrapper {
    width: 960px;
    margin:0 auto;
}
div, header, nav, footer{
    -webkit-box-sizing: border-box;   /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;   /* Firefox, other Gecko */
    box-sizing: border-box;   /* Opera/IE 8+ */
}


ym-wrapper: Ein div-Element mit dieser Klasse muss in jedem „Hauptelement“ vorhanden sein um die Breite der Webseite zu definieren. Ausserdem werden diese zentriert. Folgende Hauptelemente sind in unserem Beispiel vorhanden: <header>, <nav>, <div class=“content“>, <footer>.

Die übergeordneten Elemente(„Hauptelemente“) können in einem eigenen CSS beliebig angepasst werden. Die Breite ist automatisch 100% und somit über dem ganzen Bildschirm.

Folgender Link verdeutlicht den Vorteil von box-sizing (CSS3)  http://css-tricks.com/box-sizing/

 

5.2. Verwendung von Grids

Dank YAML ist es sehr einfach Spalten in einzelnen Elementen auf der Webseite hinzuzufügen. Man kann zum Beispiel eine konstante Newsbox darstellen oder man verwendet mehrere Templates für unterschiedliche fixe Darstellungen. Je nach CMS ist es auch sehr einfach den Inhalt in mehrere Spalten aufzutrennen.

YAML liefert schon eine grosse Anzahl an Spaltenvarianten(in Prozent). Man kann diese jedoch einfach mit weiteren Klassen erweitern(in Pixel). Dies ist z.B. beim 960gs, wie wir es in diesem Tutorial verwenden, empfehlenswert.

Zuerst bleiben wir aber bei den schon vorhandenen Möglichkeiten. Folgender Code muss für eine Aufteilung in zwei 50%-Elemente verwendet werden.

HTML

<div class="ym-grid">
    <div class="ym-g50 ym-gl">
        ...
    </div>
    <div class="ym-g50 ym-gr">
        ...
    </div>
</div>


ym-grid: Diese Klasse umfasst jeweils die Spalten. Bei Spalten innerhalb von einer Spalte muss wieder ein <div> mit dieser Klasse verwendet werden.

ym-g50: Definiert die Breite auf 50%.
Folgende weitere Optionen sind Standardmässig schon vorhanden: ym-g20, ym-g25, ym-g33, ym-g38 (Goldener Schnitt), ym-g40, ym-g50, ym-g60, ym-g62(Goldener Schnitt), ym-g66, ym-g75, ym-g80

ym-gl: richtet das Element nach Links aus. Diese Klasse benötigen alle Elemente, ausser das letzte.

ym-gr: Richtet das Element nach Rechts aus. Nur das letzte Element sollte diese Klasse besitzen.

 

5.2.1. CSS für 960gs (12 Spalten)

Bei einem 960gs welches in 12 Spalten aufgeteilt wird, muss folgendes CSS in einem eigenen Style ergänzt werden. Anstelle der YAML-Klassen (z.b. ym-g50, ym-g75, ... ) werden im HTML dann diese verwendet. Die Ausrichtungen (ym-gl, ym-gr) müssen ebenfalls dem Element hinzugefügt werden.

CSS

.ym-g960-1 { width: 80px; }
.ym-g960-2 { width: 160px; }
.ym-g960-3 { width: 240px; }
.ym-g960-4 { width: 320px; }
.ym-g960-5 { width: 400px; }
.ym-g960-6 { width: 480px; }
.ym-g960-7 { width: 560px; }
.ym-g960-8 { width: 640px; }
.ym-g960-9 { width: 720px; }
.ym-g960-10 { width: 800px; }
.ym-g960-11 { width: 880px; }
.ym-g960-12 { width: 960px; }

 

5.2.2. Equal Heights

Oft wird gewünscht, dass die Spalten die gleiche Höhe haben. Meistens ist aber das Problem, dass nicht in beiden gleich viel Text steht. Dank YAML kann dies ganz einfach gelöst werden.

 

HTML

<div class="ym-grid ym-equalize">
    ...
</div>

 

ym-equalize: Diese Klasse dem Element mit der ym-grid Klasse hinzufügen und die Spalten darin werden die gleiche Höhe haben.

 

5.3 Tags für IE

Leider werden die neuen Tags bei den Versionen IE8 und älter nicht unterstütz. Um die neuen Elemente zu „erstellen“ und somit den CSS-Code, welcher einem Element/Tag zugewiesen wurde, auszuführen, sollte folgender Code im <head> hinzugefügt werden.

HTML

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

 

6. Eigenes CSS ergänzen

Da wir nun das Grundgerüst für unsere Webseite schon haben, müssen wir nun nur noch die eigenen Eigenschaften ergänzen. Dazu gehören unter anderem Schriftgrösse, Farben, Links, Buttons, ...

Ich empfehle aber zuerst die YAML-Webseite - Docs & Demos (http://www.yaml.de/docs/index.html) zu durchstöbern. Es kann ja sein, dass etwas schon vorhanden ist welches man nur noch kurz integrieren muss. ;-)

7. Code für Template

Anbei ist noch ein zusammengesetzter Code. Dieser kann beliebig angepasst werden. Er besitzt folgende Eigenschaften.

  • Breite 960px
  • Full Page-Layout
  • Content mit 2 Spalten (75% | 25%) – gleiche Höhen
  • Navigation als Liste – horizontal

HTML (index.html)

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Simple Template</title>
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link href="css/yaml/core/base.min.css " rel="stylesheet" type="text/css"/>
        <link href="css/my_style.css " rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <header>
            <div class="ym-wrapper">I am a header</div>
        </header>
        <nav>
            <div class="ym-wrapper">
                <ul id="navigation">
                    <li>menu 1</li>
                    <li>menu 2</li>
                    <li>menu 3</li>
                </ul>
            </div>
        </nav>
        <div id="content" class="ym-grid">
            <div class="ym-wrapper">
                <div class="ym-grid ym-equalize">
                    <div class="ym-g75 ym-gl">I am 75% width</div>
                    <div class="ym-g25 ym-gr">I am 25% width and have the same height</div>
                </div>
            </div>
        </div>
        <footer>
            <div class="ym-wrapper">I am a footer</div>
        </footer>
    </body>
</html>

CSS (css/my_style.css)

/*my_style.css*/
 
.ym-wrapper {
    width: 960px;
    margin:0 auto;
}
div, header, nav, footer{
    -webkit-box-sizing: border-box;   /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;   /* Firefox, other Gecko */
    box-sizing: border-box;   /* Opera/IE 8+ */
}
 
#navigation li{
    float:left;
    margin-right:20px;
}
 
header, nav, footer{
    height:50px;
}
 
#content{
    height:100px;
}

 

8. Schlusswort

Ich hoffe du hast die Vorteile von YAML kennen gelernt und den Einstig als einfach empfunden. Auf der YAML-Webseite (http://www.yaml.de) kannst du noch mehr nützliche Optionen entdecken.

Viel Spass beim ausprobieren.