Embed Size (px)
DESCRIPTION
Vortrag auf der Webtech 2012. Die Nomenklatur von YAML wird erklärt sowie die vielen Addons und die helfende Dokumentation genauer vorgestellt. Alles als Basis für das später folgende Livecoding. Damit konnte ich zeigen, dass man mit YAML schnell zu einem testbaren Ergebnis, einem Prototypen, kommen kann. Der kann dann die Basis weiterer Designiterationen sein und später in den produktiven Code übergehen.
Citation preview
Jens Grochtdreis
YAML 4 - Rapid Prototyping mit HTML und CSS
‣Frontendentwickler
‣seit 1999 Arbeit im und fürs Web
‣seit 2009 selbständig
‣Frontendentwicklung
‣Schulung
‣Beratung
‣twitter.com/Flocke
Photoshop ist nicht für Webdesign geeignet.
Es war es nie!
http://bradfrostweb.com/wp-content/uploads/2012/03/02-650x487.png
http://bradfrostweb.com/wp-content/uploads/2012/03/03-650x487.png
Das passt dazu nicht
http://www.flickr.com/photos/artrock2006/4177475479/
Rapid Prototyping macht eine Zusammenarbeit mit Designern und Konzeptern einfacher.
YAML definiert Layout, kein Design
Design-Dateien sind zur Demonstration und zur eigenen Bequemlichkeit.
Diese sind nützlich für Rapid Prototyping.
YAML ist gross
Quatsch!
‣ unfallfreie Spaltenlayouts
‣ Grids, die beliebig erweitert werden können
‣ Accessibility-Tools
‣ Formularbaukasten
‣ Basis Print-Styles
‣ alles für px, em und %
‣ Grid sind schon responsive!
‣ HTML5-ready
96 Zeilen CSS für ...
45 Zeilen IE-CSS
‣ Alle Layouts funktionieren bis einschließlich IE 5!
‣ Nicht mehr um fiese Bugs kümmern.
‣ HTML5-Elemente werden mit berücksichtigt.
base: 4,5 KB minifiziertie-hacks: 1,9 KB minifiziert
Klare Regeln lernen
Die Klassen haben alle einen Namespace: ym-
1
Es gibt zwei wichtige Bausteine
2
Die Kerndateien in zwei Varianten
Produktionsdateien
Layoutbestandteile werden gedoppelt. Wegen des alten
Boxmodells!
3
Die zwei Container
Bei Nutzung des border-box-Modells oder fixen Layouts sind die inneren Container verzichtbar!
Es gibt eine klare Nomenklatur
4
‣ ym-wrapper: Wrapper-Modul
‣ ym-column: Column-Modul
‣ ym-grid: Grid-Modul
‣ ym-form: Formular-Modul
Nomenklatur der Module
‣ ym-wbox: Wrapper-Modul
‣ ym-cbox: Column-Modul
‣ ym-gbox: Grid-Modul
‣ ym-fbox: Formular-Modul
Nomenklatur der inneren Container
Nomenklatur der Formulare
‣ .ym-fbox-text
‣ .ym-fbox-select
‣ .ym-fbox-check
‣ .ym-fbox-button
Das Column-Modul
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.
‣ Breite und Floatrichtung sind getrennte Klassen.
‣ Mehrere Klassen auf einem Element, dafür einfach erweiterbar!
Individuelles Zweier-Grid
Formulare
Ausrichtung der Formularelemente durch Zuweisung einer Klasse
Default
.ym-full
.ym-columnar
Viele Goodies
‣ Zeichen werden mittels „content“ als ASCII eingebracht.
‣ Dadurch sind sie skalierbar
‣ Der IE zeigt sie erst ab Version 8.
‣ Ältere IE zeigen den Button ohne Zeichen.
Fertige Buttons
Zwei Navigationsvorlagen
Basis-Typographie
Accessible Tabs
Mikroformate
Use the Doc, Luke!
Einfache Konfiguration
http://www.yaml.de/docs/index.html
Kopieren erwünscht!
Quick-Start Demos
Grab the code
Grab the code
Grab the code
Grab the code
Grab the code
Grab the code
Grab the code
Grab the code
Grab the code
Grab the code
Das reicht alles nicht?!
Eigene Elemente hinzufügen.
Aus alten Projekten sammeln.
Von anderen Projekten bedienen
http://twitter.github.com/bootstrap/
http://chriscoyier.github.com/SurveyMonkey-Design-Patterns/ https://github.com/chriscoyier/SurveyMonkey-Design-Patterns
Jens Grochtdreishttp://grochtdreis.de
http://twitter.com/Flockehttp://webkrauts.de
http://slideshare.net/Flocke669
