Slide 1
Slide 1 text
Schnell und sicher
zum Ziel mit YAML 4
Slide 2
Slide 2 text
http://www.yaml.de/
Slide 3
Slide 3 text
http://boagworld.com/dev/css-frameworks/
Paul Boag
Sitepoint.com
Joren Rapini
Onextrapixel.com
Slide 4
Slide 4 text
http://sharpsuits.net/photoshopit
Slide 5
Slide 5 text
https://twitter.com/trilodge/status/438331938949304320
Slide 6
Slide 6 text
Rapid Prototyping mit
wiederverwertbarem Code!
Slide 7
Slide 7 text
YAML definiert Layout, kein
Design
Slide 8
Slide 8 text
YAML = Werkzeugkasten
http://commons.wikimedia.org/wiki/File:Gereedschapskist.jpg
Slide 9
Slide 9 text
YAML ≠ Fertighaus
http://commons.wikimedia.org/wiki/File:Fertighaus_mit_Flachdach.jpg?uselang=de
Slide 10
Slide 10 text
Zwei wichtige Bausteine
Produktionsdateien
dokumentierte Arbeitsdateien
Slide 11
Slide 11 text
Beigaben
Slide 12
Slide 12 text
Die Inhalte der base.css
Slide 13
Slide 13 text
CSS-Reset
Floats einfassen
Skiplinks
Spalten-Modul
Grid-Modul
Formular-Modul
minimales Print-CSS
http://commons.wikimedia.org/wiki/File:Danger_Don%27t_Touch_Art.IWMPST2904.jpg?uselang=de
Slide 14
Slide 14 text
Mit Sass konfigurierbar
Slide 15
Slide 15 text
Das Grid-Modul
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Breite und Padding getrennt
Slide 18
Slide 18 text
YAML3
Breite Ausrichtung
in diese Richtung kein Padding
Slide 19
Slide 19 text
Mit dem neuen Boxmodell
Slide 20
Slide 20 text
Gleichhohe Gridcontainer
Slide 21
Slide 21 text
‣ keine Linie unten
‣ kein Schatten
‣ keine absolute Positionierung in Firefox
Einschränkungen!
Slide 22
Slide 22 text
individuell, variabel
Slide 23
Slide 23 text
Individuelles Sechser-Grid
Slide 24
Slide 24 text
Das Spalten-Modul
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Mit dem neuen Boxmodell
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
Floats einfassen
Slide 30
Slide 30 text
Auch per Sass zu verwenden
Slide 31
Slide 31 text
versteckte Inhalte
Slide 32
Slide 32 text
Formulare
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
Use the Doc, Luke!
http://www.yaml.de/docs/index.html
Slide 39
Slide 39 text
YAML ist gross
Slide 40
Slide 40 text
Quatsch!
Slide 41
Slide 41 text
‣ 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 ...
Slide 42
Slide 42 text
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.
Slide 43
Slide 43 text
base: 4,5 KB minifiziert
ie-hacks: 1,9 KB minifiziert
Slide 44
Slide 44 text
YAML und Sass
Slide 45
Slide 45 text
YAML wird mit Sass
entwickelt. CSS ist Ergebnis
eines Grunt-Prozesses!
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
_yaml-var-globals.scss
Slide 48
Slide 48 text
styles.scss
Slide 49
Slide 49 text
Linearisierung vorbereitet!
Slide 50
Slide 50 text
Jens Grochtdreis
http://grochtdreis.de
http://twitter.com/Flocke
https://github.com/jensgro
http://webkrauts.de
http://slideshare.net/Flocke669
https://speakerdeck.com/flocke