YAML 4 - Rapid Prototyping mit

HTML und CSS

‣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

Jens Grochtdreis

Kann YAML4 mit HTML5 und CSS3 umgehen?

Klar!Warum nicht?

In der basemod.css

Drei grundlegende Neuerungen

Neue Klassennamen

1

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

Aus IDs werden Klassen!

2

‣ Mehrfachverwendung von Layoutelementen

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

Formular-Grundlagen wandern in die base.css

3

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

Formularoptik in eigenen 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 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.

‣ #page_margins und #page

‣ In der basemod.css definiert

‣ Nicht mehrfach anwendbar

YAML3

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

YAML3

Das Grid-Modul

YAML4 YAML3

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

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

/** * (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;}

Im Patchfile für den IE

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 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: @Flocke

Slideshare: Flocke669

Jens Grochtdreishttp://grochtdreis.de

http://twitter.com/Flockehttp://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/