YAML 4 das CSS-Framework

Transkript

1 Jürgen Wolf Zusatzkapitel zum Buch»HTML5 und CSS3«YAML 4 das CSS-Framework Rheinwerk Verlag 2015 ISBN

2 YAML 4 das CSS-Framework 9 YAML Zusatzkapitel 4 das CSS-Framework Aus der Vielzahl an CSS-Frameworks wird sehr häufig YAML hervorgehoben. Aus diesem Grund zeigt Ihnen das folgende Bonuskapitel, wie Sie das Framework in der Praxis einsetzen können. Ein weiteres, sehr beliebtes Mehrseitenlayout-System ist das Framework YAML (»Yet Another Multicolumn Layout«), was sich in der Tat übersetzen lässt mit»und noch ein weiteres Mehrspaltenlayout«. YAML ist ein extrem flexibles Framework, mit dem sich bei geringem Aufwand tolle Webseiten erstellen lassen. Wie viele andere Frameworks auch bietet YAML weit mehr als ein Layoutmodul für feste, flexible und rasterbasierte Layouts mit und ohne flexible Eigenschaften. YAML stellt u. a. Formatierungen für Tabellen, Formulare, Text oder Navigationsmenüs bereit. Mit dem Builder von YAML ( können Sie ganz komfortabel ein Layout mit einem Onlinetool zusammenklicken. Eine Idee weiter geht das Nachfolgeprojekt des YAML-Builder,»Thinkin Tags«, zu finden unter wo Ihnen ein ganzer Webbaukasten online auf Basis von YAML zur Verfügung steht. Die Projektseite zu YAML selbst finden Sie unter Neben einer sehr umfangreichen Dokumentation finden Sie dort auch sämtliche Ressourcen, die Sie benötigen, um mit YAML anzufangen. Was suchen Sie? Dokumentation YAML herunterladen YAML-Forum Quelle Tabelle 1 Wichtige Adressen zum Starten mit YAML Wenn Sie YAML heruntergeladen und entpackt haben, finden Sie fünf Ordner im entpackten Archiv vor. Die Basis für YAML finden Sie im Verzeichnis yaml/core unter base.css und die Korrekturen für die alten IE6 und IE7 unter iehacks.css. Beide Dateien finden Sie auch komprimiert unter den Namen base.min.css und iehacks.css für den Praxiseinsatz. 2

3 Das nackte HTML-Grundgerüst Ordner demos docs lib sass yaml Beschreibung Hier finden Sie die Quick-Start-Demos zum Ausprobieren. die Dokumentation von YAML zum Offlinelesen jquery und HTML5Shiv die Dateien für den Sass-Port von YAML Hier ist das eigentliche Framework enthalten. Tabelle 2 Enthaltene Ordner im entpackten YAML-Archiv Das nackte HTML-Grundgerüst Wie bei jedem anderen Framework auch benötigen Sie in YAML etwas an Einarbeitungszeit. Am einfachsten dürfte es sein, wenn Sie das folgende Beispiel praktisch nachvollziehen und dabei mithilfe der YAML-Dokumentation das eine oder andere ausprobieren. Als Ausgangsbasis wird hierzu das folgende HTML-Grundgerüst verwendet. <body> <header> <h1>titel der Webseite</h1> <p>kurze Beschreibung der Webseite</p> </header> <nav> <ul> <li><a href="#">home</a></li> <li><a href="#">berichte</a></li> <li><a href="#">links</a></li> <li><a href="#">about</a></li> <li><a href="#">kontakt</a></li> </ul> </nav> <h2>bericht 1 </h2> <p>lorem ipsum <a href="#">weiterlesen...</a></p> <img src="image/phare01.jpg" alt="artikelbild"> <h2>bericht 2 </h2> <p>lorem ipsum <a href="#">weiterlesen...</a></p> 3

4 YAML 4 das CSS-Framework <img src="image/phare02.jpg" alt="artikelbild"> <h2>bericht 3 </h2> <p>lorem ipsum <a href="#">weiterlesen...</a></p> <img src="image/phare03.jpg" alt="artikelbild"> <h2>bericht 4</h2> <p>lorem ipsum <br><a href="#">weiterlesen...</a></p> <h2>bericht 5</h2> <p>lorem ipsum <br><a href="#">weiterlesen...</a></p> <footer><p> Name <a href="#">impressum</a></p></footer> </body> Listing 1 /Beispiele/Extra/ohne-yaml.html Abbildung 1 Das nackte HTML-Grundgerüst ist zunächst noch recht unspektakulär. 4

5 YAML zum Projekt hinzufügen Das Grundgerüst enthält ein header-, ein footer-, ein nav- und fünf article-elemente. Das Ergebnis sehen Sie in Abbildung 1. In diesem Grundgerüst soll jetzt YAML für unser Layout eingesetzt werden. YAML zum Projekt hinzufügen Im folgenden HTML-Ausschnitt vom head-element sehen Sie die von YAML benötigten Stylesheets in fett gedruckten Zeilen. Hierbei wurden neben dem Basis-Stylesheet base.min.css und den IE-Korrekturen iehacks.min.css noch hlist.css für die Gestaltung einer horizontalen Navigation, screen-page-layout.css für die Struktur des eigentlichen Layouts und typography.css für eine grundlegende Typografie hinzugefügt. <head> <title>mit YAML</title> <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <fett><link rel="stylesheet" href="yaml/core/base.min.css" type="text/css"> <link rel="stylesheet" href="yaml/navigation/hlist.css"> <link rel="stylesheet" href="yaml/screen/screen-page-layout.css"> <link rel="stylesheet" href="yaml/screen/typography.css"></fett>   </head> Wollen Sie außerdem noch Formulare von YAML verwenden, finden Sie im Ordner yaml/forms Stylesheets dafür. Für das Drucklayout finden Sie außerdem noch das Stylesheet yaml/print/print.css. Wenn Sie dann noch eigene Stylesheets hinzufügen und so mehrere Webseiten gestalten wollen, kann es recht unübersichtlich werden. Daher drängt sich in diesem Beispiel ein zentrales Stylesheet geradezu auf. Das folgende zentrale Stylesheet central.css wurde in einen eigenen Ordner css gelegt und wird so von allen Beispielen im Buch verwendet. /* Datei: central.css url("../yaml/navigation/hlist.css"); 5

6 YAML 4 das url("../yaml/print/print.css"); Listing 2 /Beispiele/Extra/css/central.css Dieses zentrale Stylesheet brauchen Sie jetzt nur noch künftig in Ihr Projekt miteinzubinden, in dem Sie YAML verwenden wollen. Änderungen brauchen Sie so auch nur noch an diesem einen zentralen Stylesheet central.css durchzuführen. Somit sieht der Kopf Ihres HTML-Dokuments schon etwas aufgeräumter aus: <head> <title>mit YAML</title> <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link rel="stylesheet" href="css/central.css">   </head> Listing 3 /Beispiele/Extra/mit-yaml.html Ob Sie HTML5Shiv integrieren wollen oder nicht, müssen Sie selbst entscheiden. In diesem Beispiel wurde hierfür die von YAML mitgelieferte HTML5Shiv-Version aus dem Ordner lib verwendet. Layoutmodul wählen Als Nächstes sollten Sie sich über das Layoutmodul, das Sie verwenden wollen, Gedanken machen. Zur Auswahl steht PAGE Layout, das Sie als screen-page-layout.css bereits in die zentrale Stylesheet-Datei notiert haben. Bei PAGE Layout wird das ganze Layout in ein Element mit dem body-element an der Spitze verpackt. Hierzu verwenden Sie die Wrapper-Klasse ym-wrapper und die Klasse ym-wbox wie folgt: 6

7 Layoutmodul wählen <body> <div class="ym-wrapper"> <div class="ym-wbox"> <header> <h1>titel der Webseite</h1> <p>kurze Beschreibung der Webseite</p> </header> <nav class="ym-hlist"> <ul> <li class="active"><a href="#">home</a></li> <li><a href="#">berichte</a></li> <li><a href="#">links</a></li> <li><a href="#">about</a></li> <li><a href="#">kontakt</a></li> </ul> </nav> <hr> <h2>bericht 1</h2> <p>lorem ipsum <a href="#">weiterlesen...</a></p> <img src="image/phare01.jpg" alt="artikelbild"> <h2>bericht 2</h2> <p>lorem ipsum <a href="#">weiterlesen...</a></p> <img src="image/phare02.jpg" alt="artikelbild"> <h2>bericht 3</h2> <p>lorem ipsum. <a href="#">weiterlesen...</a></p> <img src="image/phare03.jpg" alt="artikelbild"> <h2>bericht 4</h2> <p>lorem ipsum < br><a href="#">weiterlesen...</a></p> <h2>bericht 5</h2> <p>lorem ipsum <br><a href="#">weiterlesen...</a></p> <footer><p> Name <a href="#">impressum</a></p></footer> 7

8 YAML 4 das CSS-Framework </body> Listing 4 /Beispiele/Extra/mit-yaml.html Die Verwendung des inneren div-elements mit der Klasse ym-wbox ist nicht zwingend nötig, wenn Sie das Box-Modell auf border-box umstellen. In diesem Artikel belassen wir es aber nochmals dabei. Im Beispiel haben Sie außerdem im nav-element noch die Klasse ym-hlist verwendet. Diese Klasse haben Sie mit hlist.css im zentralen Stylesheet notiert, und damit wird aus der ul-liste eine horizontale Navigation. Wenn Sie eine vertikale Navigation benötigen, finden Sie auch hierzu in YAML eine Lösung mit vlist.css, wo der Klassenname dann eben ym-vlist heißen müsste. Namensraum»ym-«Sie werden bereits festgestellt haben, dass alle von YAML verwendeten Klassen mit ym- anfangen. So verpackt bekommt unser Beispiel nun schon eine erste Struktur, wie Sie in Abbildung 2 sehen. Abbildung 2 Nachdem das Beispiel in einen YAML-Wrapper gesteckt wurde, sehen Sie bereits erste Anzeichen von YAML. 8

9 Layoutmodul wählen Als Alternative können Sie auch FULLPAGE Layout (screen-fullpage-layout.css) verwenden. Damit teilen Sie das Layout in mehrere vertikale Sektionen für die volle Breite des Viewports ein. Statt alles in ein Element ausgehend von <body> zu verpacken, würden Sie mit FULLPAGE Layout für jede vertikale Sektion wie <header>, <footer>, <nav> usw. ein Element zum»verpacken«benötigen. In der Praxis sieht dies wie folgt aus: <body> <header> <div class="ym-wrapper"> <div class="ym-wbox"> <h1>titel der Webseite</h1> <p>kurze Beschreibung der Webseite</p> </header> <nav class="ym-hlist"> <div class="ym-wrapper"> <div class="ym-wbox"> <ul> <li class="active"><a href="#">home</a></li> <li><a href="#">berichte</a></li> <li><a href="#">links</a></li> <li><a href="#">about</a></li> <li><a href="#">kontakt</a></li> </ul> </nav> <footer> <div class="ym-wrapper"> <div class="ym-wbox"> <p> Name <a href="#">impressum</a></p> </footer> </body> Listing 5 /Beispiele/Extra/mit-yaml-fullpage.html 9

10 YAML 4 das CSS-Framework Der Aufwand hierbei ist geringfügig größer, aber auf der Gegenseite haben Sie ein Layout, das sich auf den kompletten Viewport ausbreitet, wie Abbildung 3 zeigt. Abbildung 3 Mit dem FULLPAGE Layout wird die komplette Breite des Viewports im Webbrowser verwendet. Aufteilen des Inhalts mit Gridmodulen Nachdem Sie im Buch schon ein Rastermodul erstellt haben und mit der Verwendung von Bootstrap vertraut sind, werden Sie vermutlich an dieser Stelle auch wieder die typische Implementierung eines Grid-Frameworks erwarten. YAML ist allerdings ein wenig anders und legt keine feste Spaltenzahl wie etwa 12 oder 16 Spalten fest. Bei YAML besteht ein Grid aus mehreren Gridmodulen, die Sie ineinander verschachteln können. Hierbei packen Sie das oder die Elemente in die Klasse ym-grid. Innerhalb dieses Moduls, das ja eine Zeile darstellt, teilen Sie den Raum der einzelnen Elemente mit einer der Klassen ym-gxx auf. Das XX steht für die Prozentzahl, wie viel Raum Sie den Elementen in ym-grid geben wollen. Hierbei geben Sie gewöhnlich auch die float- Richtung mit ym-gl für links gefloatet und ym-gr für rechts gefloatet an. Wie schon beim Wrapper ym-wrapper können Sie auch hier noch ein inneres div mit der Klasse ym-gbox (Grid-Box) verwenden, womit die Werte für padding und margin übernom- 10

11 Aufteilen des Inhalts mit Gridmodulen men werden. Auch hier gilt allerdings: Beim Box-Modell border-box ist dies nicht mehr zwingend nötig. Das waren jetzt viele theoretische Informationen auf engstem Raum, daher hierzu ein Beispiel, das das eben Beschriebene in der Praxis demonstriert. Im Beispiel werden drei Artikel gleichmäßig nebeneinander in einer Zeile aufgeteilt. Dasselbe soll auch noch in der nächsten Zeile mit zwei Artikeln nebeneinander demonstriert werden: <div class="ym-grid"> <div class="ym-g33 ym-gl"> <h2>bericht 1 </h2> <p>lorem ipsum <a href="#">weiterlesen...</a></p> <img src="image/phare01.jpg" alt="artikelbild" class="flexible"> <div class="ym-g33 ym-gl"> <h2>bericht 2 </h2> <p>lorem ipsum <a href="#">weiterlesen...</a></p> <img src="image/phare02.jpg" alt="artikelbild" class="flexible"> <div class="ym-g33 ym-gl"> <h2>bericht 3 </h2> <p>lorem ipsum <a href="#">weiterlesen...</a></p> <img src="image/phare03.jpg" alt="artikelbild" class="flexible"> <div class="ym-grid"> <div class="ym-g50 ym-gl"> 11

12 YAML 4 das CSS-Framework <h2>bericht 4</h2> <p>lorem ipsum <br><a href="#">weiterlesen...</a></p> <div class="ym-g50 ym-gl"> <h2>bericht 5</h2> <p>lorem ipsum <br><a href="#">weiterlesen...</a></p> Listing 6 /Beispiele/Extra/mit-yaml-layout.html Abbildung 4 Aufteilung der Artikel mit Gridmodulen von YAML 12

13 Aufteilen des Inhalts mit Gridmodulen Medien flexibel machen Damit die Bilder auch passend zu den Artikeln herunterskaliert werden, wurde die YAML-Klasse flexible bei den img-elementen verwendet. Damit werden die Bilder immer an ihr Elternelement angepasst. In Abbildung 4 sehen Sie das Beispiel bei der Ausführung. Die Artikel wurden dabei ordentlich in einer Zeile mit drei und einer zweiten Zeile mit zwei Artikeln nebeneinander aufgeteilt. Im Beispiel haben Sie die Gridklassen ym-g33 und ym-g50 zum Aufteilen der Artikel im Grid ym-grid verwendet. Die Werteangaben bedeuten hier nichts anders als eine Prozentangabe. Mit ym-g33 geben Sie einem Element 33 % Raum im Grid ym-grid. Genauso geben Sie einem Element mit der Klasse ym-g50 einen Raum von 50 %. Sie können diese Prozentwerte aber nicht willkürlich verwenden, sondern diese werden mit vordefinierten Klassen zur Verfügung gestellt, die in Tabelle 3 aufgelistet sind. YAML-Klasse Spaltenbreite.ym-g20 20 %.ym-g25 25 %.ym-g33 33 %.ym-g38 38,2 % (Goldener Schnitt).ym-g40 40 %.ym-g50 50 %.ym-g60 60 %.ym-g62 61,8 % (Goldener Schnitt).ym-g66 66 %.ym-g75 75 %.ym-g80 80 % Tabelle 3 Die vordefinierten Klassen von YAML für die Spaltenbreite Mit diesen Werten können Sie jetzt nach Herzenslust experimentieren und die Artikel in unterschiedlichen Breiten in einem Grid aufteilen. Wenn Sie Probleme mit unterschiedlich langen Spalten bei der Aufteilung im Grid mit beispielsweise unterschiedlich langen Artikeln haben, bietet Ihnen YAML hier mit der Klasse ymequalize eine praktische Lösung und sorgt dafür, dass die einzelnen Spalten immer gleich lang bleiben. 13

14 YAML 4 das CSS-Framework Eigene Rasterlayouts verwenden Sie können YAML auch um eigene Layouts erweitern und sind nicht nur auf die vordefinierten Klassen beschränkt. Auf dieses Thema wird hier allerdings nicht eingegangen. Bei Bedarf finden Sie im Ordner demos vom heruntergeladenen YAML-Archiv Beispiele zum Studieren. Elemente mit YAML untereinanderstellen Die Raster, die mit YAML erzeugt werden, sind sehr flexibel. Trotzdem wird es ab einer bestimmten Viewport-Breite schwierig, den Inhalt noch ordentlich auf engem Raum aufzuteilen. In Abbildung 5 können Sie erkennen, dass die Grenze der akzeptablen Flexibilität wohl erreicht wurde und das Layout bei einer solchen schmalen Breite wie beispielsweise bei Smartphones nicht mehr sehr schön anzusehen ist. Abbildung 5 Bei einem schmalen Bildschirm wird eine alternative Lösung nötig. Dies sieht nicht mehr schön aus. Für diesen Zweck bietet YAML mit der Klasse linearize-level-1 eine ziemlich einfache Lösung an, was in YAML als Progressive Linearization bezeichnet wird. Wenn Sie einem Grid diese Klasse mit ym-grid hinzufügen, stellen Sie sicher, dass ab einer 14

15 Elemente mit YAML untereinanderstellen bestimmten Viewport-Breite die Elemente nicht mehr gefloatet werden, sondern untereinanderstehen. In YAML ist diese Viewport-Breite in screen-page-layout.css auf 760 Pixel eingestellt. Ist die Viewport-Breite unter 60 Pixeln und verwenden Sie die Klasse linearize-level-1 in ym-grid, stehen die einzelnen Elemente übereinander. Der folgende HTML-Ausschnitt zeigt, wie einfach es mit nur einer YAML-Klasse ist, das Layout auch noch richtig responsiv zu machen. Der fett hervorgehobene Teil wurde gegenüber dem Beispiel /Beispiele/Extra/mit-yaml-layout.html geändert: <div class="ym-grid linearize-level-1"> <div class="ym-g33 ym-gl"> <h2>bericht 1 </h2> <p>lorem ipsum <a href="#">weiterlesen...</a></p> <img src="image/phare01.jpg" alt="artikelbild" class="flexible"> <div class="ym-g33 ym-gl"> <h2>bericht 2 </h2> <p>lorem ipsum <a href="#">weiterlesen...</a></p> <img src="image/phare02.jpg" alt="artikelbild" class="flexible"> <div class="ym-g33 ym-gl"> <h2>bericht 3 </h2> <p>lorem ipsum <a href="#">weiterlesen...</a></p> <img src="image/phare03.jpg" alt="artikelbild" class="flexible"> <div class="ym-grid linearize-level-1"> <div class="ym-g50 ym-gl"> 15

16 YAML 4 das CSS-Framework <h2>bericht 4</h2> <p>lorem ipsum <br><a href="#">weiterlesen...</a></p> <div class="ym-g50 ym-gl"> <h2>bericht 5</h2> <p>lorem ipsum <br><a href="#">weiterlesen...</a></p> Listing 7 /Beispiele/Extra/mit-yaml-layout-2.html Jetzt ist unser Beispiel wirklich responsiv, und ab einer Viewport-Breite von unter 760 Pixeln wird unser Layout einspaltig, wie Sie in Tabelle 6 sehr schön sehen. Abbildung 6 Dank der Klasse»linearize-level-1«wird das Layout ab einer bestimmten Viewport-Breite einspaltig. 16

17 Testen Sie YAML Testen Sie YAML Dies war zwar nur eine kleine Einführung in das YAML-Framework, aber zusammen mit der tollen Dokumentation und den vorhandenen Demos haben Sie alles in der Hand, um sich intensiver mit YAML auseinanderzusetzen. Wenn Sie YAML für Webseiten praktisch einsetzen wollen, sollten Sie einen sichtbaren Hinweis auf den Urheber setzen oder eine Lizenz erwerben, wobei Sie diesen Hinweis dann nicht mehr anbringen müssen. Mehr dazu können Sie unter nachlesen. Eine tolle Sache dabei ist das eingangs erwähnte Projekt»Thinkin Tags«vom YAML- Erfinder Dirk Jesse, mit dem Sie ein Layout direkt im Webbrowser entwerfen und so einen fertigen Code produzieren können. Wenn Sie sich mit YAML befassen, sollten Sie unbedingt auch diesen Onlineeditor unter ausprobieren. 17