YAML 4 -Rapid Prototyping mit   HTML und CSS
Jens Grochtdreis‣ Frontendentwickler‣ 10 Jahre Agenturerfahrung‣ 12 Jahre Arbeit im und fürs Web‣ Gründer der Webkrauts‣ B...
Kann YAML4 mit HTML5  und CSS3 umgehen?
Klar!Warum nicht?
In der basemod.css
Drei grundlegende  Neuerungen
1Neue Klassennamen
Alle mit Namespace ym- !
‣ Viele CMSe vergeben eigene Klassen, die sich  mit YAML3 überschnitten haben.‣ Bspw. Wordpress vergibt .page als Body-Kla...
2Aus IDs werden Klassen!
‣ Mehrfachverwendung von Layoutelementen‣ IDs freigeben für Applikation (JavaScript etc.),  die Framework-Logik steht mit ...
3 Formular-Grundlagenwandern in die base.css
Die Basis-Styles fürFormulare und Drucksind in die Kern-Dateien gewandert.Formularoptik ineigenen Theme-Dateien
Normalisierung bleibt
Da steht Reset, es ist aber mehr eine Normalisierung
Die Inhalte der base.css
Seitenstruktur
‣ Immer eine Wrapper-Klasse und eine für  Innenabstände (altes Boxmodell)‣ Ein Buchstabe bei ym-*box zeigt auf das Modul ‣...
‣ Das Wrapper-Modul umgibt alles, Spalten  (Columns), Grids und Formulare können frei  verschachtelt werden.‣ Hier benötig...
Das Layout-Wrapper-Modul
‣ Das Layout-Wrapper-Modul umschließt einen  Seitenbereich und definiert dessen minimale  und maximale Breite‣ Die *box-Kla...
YAML3‣ #page_margins und #page‣ In der basemod.css definiert‣ Nicht mehrfach anwendbar
Das Column-Modul
‣ Das Column-Modul ermöglicht die horizontale  Gliederung eines Inhaltsbereiches in 2 oder 3  Spalten, dessen Breiten in b...
‣ Können überall genutzt und auch verschachtelt  werden‣ Innerer Container ist optional‣ Innerer Container hat Ausrichtung...
YAML3
Das Grid-Modul
YAML4   YAML3
‣ Die Breitendefinition ist von den restlichen  Regeln getrennt.‣ Dadurch können schnell neue Grids erstellt  werden.‣ Neue...
Floats einfassen
Warum so viele Methoden? ‣ Es gibt kein "bestes" Float-Containing. Jedes   hat seine Vorteile und Anwendungsgebiete
‣ overflow:hidden schneidet eingeschlossene  Inhalte ab, vor allem auch CSS-Schatten und  Outlines von Child-Elementen.
‣ display:table - eigentlich perfekt, erlaubt im FF  allerdings parallel keine relative Positionierung.
‣ float:left - Alternative für display:table,  vorwiegend wegen Support älterer Browser.
versteckte Inhalte
Eigene Subcolumns
YAML3
Im Patchfile für den IE/**  * (en) IE-Adjustments for content columns and subtemplates  * @see            iehacks.css in ya...
YAML4
Ohne separate IE-Styles!
Formulare
‣ Die Basis-Regeln für ein verletzungsfreies  Arbeiten mit Formularen sind in die base.css  gewandert.‣ Die Optik wird nun...
ftheme-standard.css
ftheme-simple.css
ftheme-green.css
Eigenentwicklungen
Twitter: @FlockeSlideshare: Flocke669
Jens Grochtdreis                                                     http://grochtdreis.de                                ...
Einführung in YAML4
Einführung in YAML4
Einführung in YAML4
Einführung in YAML4
Einführung in YAML4
Einführung in YAML4
Einführung in YAML4
Einführung in YAML4
Einführung in YAML4
Einführung in YAML4
Einführung in YAML4
Einführung in YAML4
Einführung in YAML4
Einführung in YAML4
Nächste SlideShare
Wird geladen in …5
×

Einführung in YAML4

6.479 Aufrufe

Veröffentlicht am

Ein Einblick in die neuen Konzepte von YAML4.

Veröffentlicht in: Technologie
0 Kommentare
4 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
6.479
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2.069
Aktionen
Geteilt
0
Downloads
54
Kommentare
0
Gefällt mir
4
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Einführung in YAML4

  1. 1. YAML 4 -Rapid Prototyping mit HTML und CSS
  2. 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, OReilly, MuT
  3. 3. Kann YAML4 mit HTML5 und CSS3 umgehen?
  4. 4. Klar!Warum nicht?
  5. 5. In der basemod.css
  6. 6. Drei grundlegende Neuerungen
  7. 7. 1Neue Klassennamen
  8. 8. Alle mit Namespace ym- !
  9. 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. 10. 2Aus IDs werden Klassen!
  11. 11. ‣ Mehrfachverwendung von Layoutelementen‣ IDs freigeben für Applikation (JavaScript etc.), die Framework-Logik steht mit den Klassen in der zweiten Reihe.
  12. 12. 3 Formular-Grundlagenwandern in die base.css
  13. 13. Die Basis-Styles fürFormulare und Drucksind in die Kern-Dateien gewandert.Formularoptik ineigenen Theme-Dateien
  14. 14. Normalisierung bleibt
  15. 15. Da steht Reset, es ist aber mehr eine Normalisierung
  16. 16. Die Inhalte der base.css
  17. 17. Seitenstruktur
  18. 18. ‣ 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
  19. 19. ‣ 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.
  20. 20. Das Layout-Wrapper-Modul
  21. 21. ‣ 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.
  22. 22. YAML3‣ #page_margins und #page‣ In der basemod.css definiert‣ Nicht mehrfach anwendbar
  23. 23. Das Column-Modul
  24. 24. ‣ 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.
  25. 25. ‣ Können überall genutzt und auch verschachtelt werden‣ Innerer Container ist optional‣ Innerer Container hat Ausrichtungseigenschaft wie bei den Subcolumns/Grids
  26. 26. YAML3
  27. 27. Das Grid-Modul
  28. 28. YAML4 YAML3
  29. 29. ‣ 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!
  30. 30. Floats einfassen
  31. 31. Warum so viele Methoden? ‣ Es gibt kein "bestes" Float-Containing. Jedes hat seine Vorteile und Anwendungsgebiete
  32. 32. ‣ overflow:hidden schneidet eingeschlossene Inhalte ab, vor allem auch CSS-Schatten und Outlines von Child-Elementen.
  33. 33. ‣ display:table - eigentlich perfekt, erlaubt im FF allerdings parallel keine relative Positionierung.
  34. 34. ‣ float:left - Alternative für display:table, vorwiegend wegen Support älterer Browser.
  35. 35. versteckte Inhalte
  36. 36. Eigene Subcolumns
  37. 37. YAML3
  38. 38. 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;}
  39. 39. YAML4
  40. 40. Ohne separate IE-Styles!
  41. 41. Formulare
  42. 42. ‣ 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.
  43. 43. ftheme-standard.css
  44. 44. ftheme-simple.css
  45. 45. ftheme-green.css
  46. 46. Eigenentwicklungen
  47. 47. Twitter: @FlockeSlideshare: Flocke669
  48. 48. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke http://webkrauts.de http://slideshare.net/Flocke669Diese Präsentation steht unterder Creative Commons Lizenz„Attribution-ShareAlike 2.0“http://creativecommons.org/licenses/by-sa/2.0/de/

×