Schnell und sicher zum Ziel mit YAML4

Einführung in das CSS-Framework YAML auf der Webinale 2014. Ziel ist vor allem weiter verwendbares Rapid Prototyping während des responsiven Designprozesses.

Transcript

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