Ein Einblick in die neuen Konzepte von YAML4.

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/