Einführung in YAML4

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‣ Blogger‣ Autor für: PHPMagazin, PHPUser, T3N, Webstandards-Magazin‣ Fachliche Buchbetreuung bei Galileo, OReilly, MuT

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-Klasse.‣ So werden Kollisionen vermieden.‣ Ein Umstieg von YAML3 auf YAML4 ist so erst bei einem neuen Projekt ratsam.‣ Der YAML3-Zweig wird weitergepﬂegt.

2Aus IDs werden Klassen!

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

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 ‣ ym-wbox: Wrapper-Modul ‣ ym-cbox: Column-Modul ‣ ym-gbox: Grid-Modul ‣ ym-fbox: Formular-Modul

‣ 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.

Das Layout-Wrapper-Modul

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

YAML3‣ #page_margins und #page‣ In der basemod.css deﬁniert‣ Nicht mehrfach anwendbar

Das Column-Modul

‣ 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.

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

Das Grid-Modul

YAML4 YAML3

‣ Die Breitendeﬁnition ist von den restlichen Regeln getrennt.‣ Dadurch können schnell neue Grids erstellt werden.‣ Neue Grids werden nur an einer Stelle deﬁniert, 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!

Floats einfassen

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

‣ overﬂow: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.

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

versteckte Inhalte

Eigene Subcolumns

Im Patchﬁle 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;}

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 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.

ftheme-standard.css

ftheme-simple.css

ftheme-green.css

Eigenentwicklungen

Twitter: @FlockeSlideshare: Flocke669

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/

http://grochtdreis.de	1468
http://www.scoop.it	50
http://blog.grochtdreis.de	15
http://a0.twimg.com	5
http://127.0.0.1	2
http://paper.li	1
http://www.netvibes.com	1
http://translate.googleusercontent.com	1

Einführung in YAML4

by Jens Grochtdreis on Oct 11, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 1,543

Statistics

Einführung in YAML4 — Presentation Transcript