Your SlideShare is downloading. ×
0
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
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
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
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
Einführung in YAML4
Einführung in YAML4
Einführung in YAML4
Einführung in YAML4
Einführung in YAML4
Einführung in YAML4
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Einführung in YAML4

5,873

Published on

Ein Einblick in die neuen Konzepte von YAML4.

Ein Einblick in die neuen Konzepte von YAML4.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,873
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
54
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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, OReilly, MuT
  • 3. Kann YAML4 mit HTML5 und CSS3 umgehen?
  • 4. Klar!Warum nicht?
  • 5. In der basemod.css
  • 6. Drei grundlegende Neuerungen
  • 7. 1Neue 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. 2Aus 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-Grundlagenwandern in die base.css
  • 13. Die Basis-Styles fürFormulare und Drucksind in die Kern-Dateien gewandert.Formularoptik ineigenen Theme-Dateien
  • 14. Normalisierung bleibt
  • 15. Da steht Reset, es ist aber mehr eine Normalisierung
  • 16. Die Inhalte der base.css
  • 17. Seitenstruktur
  • 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. ‣ 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. Das Layout-Wrapper-Modul
  • 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. YAML3‣ #page_margins und #page‣ In der basemod.css definiert‣ Nicht mehrfach anwendbar
  • 23. Das Column-Modul
  • 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. ‣ Können überall genutzt und auch verschachtelt werden‣ Innerer Container ist optional‣ Innerer Container hat Ausrichtungseigenschaft wie bei den Subcolumns/Grids
  • 26. YAML3
  • 27. Das Grid-Modul
  • 28. YAML4 YAML3
  • 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. Floats einfassen
  • 31. Warum so viele Methoden? ‣ Es gibt kein "bestes" Float-Containing. Jedes hat seine Vorteile und Anwendungsgebiete
  • 32. ‣ overflow:hidden schneidet eingeschlossene Inhalte ab, vor allem auch CSS-Schatten und Outlines von Child-Elementen.
  • 33. ‣ display:table - eigentlich perfekt, erlaubt im FF allerdings parallel keine relative Positionierung.
  • 34. ‣ float:left - Alternative für display:table, vorwiegend wegen Support älterer Browser.
  • 35. versteckte Inhalte
  • 36. Eigene Subcolumns
  • 37. YAML3
  • 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. YAML4
  • 40. Ohne separate IE-Styles!
  • 41. Formulare
  • 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. ftheme-standard.css
  • 44. ftheme-simple.css
  • 45. ftheme-green.css
  • 46. Eigenentwicklungen
  • 47. Twitter: @FlockeSlideshare: Flocke669
  • 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/

×