Das Dokument beschreibt die Neuerungen des YAML 4-Layouts mit HTML5 und CSS3, einschließlich der Einführung neuer Klassennamen zur Vermeidung von Kollisionen und der Umwandlung von IDs in Klassen zur mehrfachen Verwendung von Layoutelementen. Es werden grundlegende Änderungen zur Strukturierung von Inhalten, wie die Wrapper- und Column-Module, sowie zur Normalisierung von Formularen erläutert. Zudem wird auf die Vereinfachungen bei der Erstellung von Formularen und die Anpassung an verschiedene Layout-Anforderungen eingegangen.

1. YAML 4 -
Rapid Prototyping mit
HTML und CSS

2. Jens Grochtdreis
‣ Frontendentwickler
‣ 10 Jahre Agenturerfahrung
‣ 12 Jahre Arbeit im und fürs Web
‣ Gründer der Webkrauts
‣ Blogger
‣ Autor für: PHPMagazin, PHPUser, T3N,
Webstandards-Magazin
‣ Fachliche Buchbetreuung bei Galileo, O'Reilly, MuT

3. Kann YAML4 mit HTML5
und CSS3 umgehen?

4. Klar!
Warum nicht?

5. In der basemod.css

6. Drei grundlegende
Neuerungen

7. 1
Neue Klassennamen

8. Alle mit Namespace ym- !

9. ‣ Viele CMSe vergeben eigene Klassen, die sich
mit YAML3 überschnitten haben.
‣ Bspw. Wordpress vergibt .page als Body-Klasse.
‣ So werden Kollisionen vermieden.
‣ Ein Umstieg von YAML3 auf YAML4 ist so erst
bei einem neuen Projekt ratsam.
‣ Der YAML3-Zweig wird weitergepflegt.

10. 2
Aus IDs werden Klassen!

11. ‣ Mehrfachverwendung von Layoutelementen
‣ IDs freigeben für Applikation (JavaScript etc.),
die Framework-Logik steht mit den Klassen
in der zweiten Reihe.

12. 3
Formular-Grundlagen
wandern in die base.css

13. Die Basis-Styles für
Formulare und Druck
sind in die Kern-
Dateien gewandert.
Formularoptik in
eigenen Theme-
Dateien

14. Normalisierung bleibt

16. Da steht Reset, es ist aber mehr eine Normalisierung

17. Die Inhalte der base.css

19. Seitenstruktur

20. ‣ Immer eine Wrapper-Klasse und eine für
Innenabstände (altes Boxmodell)
‣ Ein Buchstabe bei ym-*box zeigt auf das Modul
‣ ym-wbox: Wrapper-Modul
‣ ym-cbox: Column-Modul
‣ ym-gbox: Grid-Modul
‣ ym-fbox: Formular-Modul

21. ‣ Das Wrapper-Modul umgibt alles, Spalten
(Columns), Grids und Formulare können frei
verschachtelt werden.
‣ Hier benötigt man immer wieder
unterschiedliche Randabstände zur
Ausrichtung. Daher jeweils eine Klasse pro
Modul.
‣ Mit dem CSS3 Border-Box-Modell kann die
jeweils entfallen.

22. Das Layout-Wrapper-Modul

23. ‣ Das Layout-Wrapper-Modul umschließt einen
Seitenbereich und definiert dessen minimale
und maximale Breite
‣ Die *box-Klassen sind für flexible Layouts auf
CSS2-Basis zwingend notwendig, um stressfrei
layouten zu können.

24. YAML3
‣ #page_margins und #page
‣ In der basemod.css definiert
‣ Nicht mehrfach anwendbar

25. Das Column-Modul

26. ‣ Das Column-Modul ermöglicht die horizontale
Gliederung eines Inhaltsbereiches in 2 oder 3
Spalten, dessen Breiten in beliebigen Einheiten
[px,em, %] definiert werden können und
dessen Reihenfolge per CSS frei definierbar ist.
‣ Die *box-Klassen sind für flexible Layouts auf
CSS2-Basis zwingend notwendig, um stressfrei
layouten zu können.

29. ‣ Können überall genutzt und auch verschachtelt
werden
‣ Innerer Container ist optional
‣ Innerer Container hat Ausrichtungseigenschaft
wie bei den Subcolumns/Grids

31. YAML3

32. Das Grid-Modul

34. YAML4 YAML3

35. ‣ Die Breitendefinition ist von den restlichen
Regeln getrennt.
‣ Dadurch können schnell neue Grids erstellt
werden.
‣ Neue Grids werden nur an einer Stelle
definiert, nicht wie früher an zwei!
‣ Es gibt keine gleichen Breiten mit
unterschiedlichen Floatrichtungen mehr!
‣ Mehrere Klassen auf einem Element, dafür
einfacher erweiterbar als früher!

38. Floats einfassen

40. Warum so viele Methoden?
‣ Es gibt kein "bestes" Float-Containing. Jedes
hat seine Vorteile und Anwendungsgebiete

41. ‣ overflow:hidden schneidet eingeschlossene
Inhalte ab, vor allem auch CSS-Schatten und
Outlines von Child-Elementen.

42. ‣ display:table - eigentlich perfekt, erlaubt im FF
allerdings parallel keine relative Positionierung.

43. ‣ float:left - Alternative für display:table,
vorwiegend wegen Support älterer Browser.

44. versteckte Inhalte

48. Eigene Subcolumns

50. YAML3

52. Im Patchfile für den IE
/**
* (en) IE-Adjustments for content columns and subtemplates
* @see iehacks.css in yaml/core for more comments
*/
.c1-9l, .c15-9l, .c2-9l, .c3-9l, .c4-9l, .c5-9l, .c6-9l, .c7-9l, .c8-9l,
.c1-9r, .c2-9r, .c3-9r, .c4-9r, .c5-9r, .c6-9r, .c7-9r, .c8-9r {display: inline;}
.equalize .c1-9l, .equalize .c15-9l, .equalize .c2-9l, .equalize .c3-9l, .equalize .c4-9l,
.equalize .c5-9l, .equalize .c6-9l, .equalize .c7-9l, .equalize .c8-9l {float:left; display:inline;
padding-bottom:32767px; margin-bottom:-32767px;}
.equalize .c1-9r, .equalize .c2-9r, .equalize .c3-9r, .equalize .c4-9r, .equalize .c5-9r,
.equalize .c6-9r, .equalize .c7-9r, .equalize .c8-9r { float:right; margin-left:-5px; display:inline;
padding-bottom:32767px; margin-bottom:-32767px;}
.no-ie-padding .c1-9l, .no-ie-padding .c15-9l, .no-ie-padding .c2-9l, .no-ie-padding .c3-9l,
.no-ie-padding .c4-9l, .no-ie-padding .c5-9l, .no-ie-padding .c6-9l, .no-ie-padding .c7-9l,
.no-ie-padding .c8-9l, .no-ie-padding .c1-9r, .no-ie-padding .c2-9r, .no-ie-padding .c3-9r,
.no-ie-padding .c4-9r, .no-ie-padding .c5-9r, .no-ie-padding .c6-9r, .no-ie-padding .c7-9r,
.no-ie-padding .c8-9r {padding-bottom:0; margin-bottom:0;}

53. YAML4

54. Ohne separate IE-Styles!

55. Formulare

56. ‣ Die Basis-Regeln für ein verletzungsfreies
Arbeiten mit Formularen sind in die base.css
gewandert.
‣ Die Optik wird nun durch eine separate
Theme-Datei bestimmt.
‣ Drei Themes liegen bei. Zum Einsatz wie zur
Ansicht für Eigenentwicklungen geeignet.
‣ Einfache Formulare sind so in Windeseile
erstellt.

57. ftheme-standard.css

58. ftheme-simple.css

59. ftheme-green.css

60. Eigenentwicklungen

61. Twitter: @Flocke
Slideshare: Flocke669

62. Jens Grochtdreis
http://grochtdreis.de
http://twitter.com/Flocke
http://webkrauts.de
http://slideshare.net/Flocke669
Diese Präsentation steht unter
der Creative Commons Lizenz
„Attribution-ShareAlike 2.0“
http://creativecommons.org/licenses/by-sa/2.0/de/