YAML4 - Rapid Prototyping mit HTML und CSS

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.

Transcript

1. Jens Grochtdreis YAML 4 - Rapid Prototyping mit HTML und CSS
2. ‣Frontendentwickler ‣seit 1999 Arbeit im und fürs Web ‣seit 2009 selbständig ‣Frontendentwicklung ‣Schulung ‣Beratung ‣twitter.com/Flocke
3. Photoshop ist nicht für Webdesign geeignet.
4. Es war es nie!
5. http://bradfrostweb.com/wp-content/uploads/2012/03/02-650x487.png
6. http://bradfrostweb.com/wp-content/uploads/2012/03/03-650x487.png
7. Das passt dazu nicht
8. http://www.flickr.com/photos/artrock2006/4177475479/ Rapid Prototyping macht eine Zusammenarbeit mit Designern und Konzeptern einfacher.
9. http://www.yaml.de/
10. YAML definiert Layout, kein Design
11. Design-Dateien sind zur Demonstration und zur eigenen Bequemlichkeit.
12. Diese sind nützlich für Rapid Prototyping.
13. YAML ist gross
14. Quatsch!
15. ‣ 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 ...
16. 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.
18. base: 4,5 KB minifiziert ie-hacks: 1,9 KB minifiziert
19. Klare Regeln lernen
20. Die Klassen haben alle einen Namespace: ym- 1
21. Es gibt zwei wichtige Bausteine 2
22. Die Kerndateien in zwei Varianten Produktionsdateien
23. Layoutbestandteile werden gedoppelt. Wegen des alten Boxmodells! 3
24. Die zwei Container Bei Nutzung des border-box-Modells oder fixen Layouts sind die inneren Container verzichtbar!
25. Es gibt eine klare Nomenklatur 4
26. ‣ ym-wrapper: Wrapper-Modul ‣ ym-column: Column-Modul ‣ ym-grid: Grid-Modul ‣ ym-form: Formular-Modul Nomenklatur der Module
27. ‣ ym-wbox: Wrapper-Modul ‣ ym-cbox: Column-Modul ‣ ym-gbox: Grid-Modul ‣ ym-fbox: Formular-Modul Nomenklatur der inneren Container
28. Nomenklatur der Formulare ‣ .ym-fbox-text ‣ .ym-fbox-select ‣ .ym-fbox-check ‣ .ym-fbox-button
29. Das Column-Modul
32. Das Grid-Modul
33. YAML4 YAML3
34. ‣ 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!
36. Individuelles Zweier-Grid
37. Formulare
38. Ausrichtung der Formularelemente durch Zuweisung einer Klasse
39. Default
40. .ym-full
41. .ym-columnar
42. Viele Goodies
43. ‣ 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
44. Zwei Navigationsvorlagen
45. Basis-Typographie
46. Accessible Tabs
47. Mikroformate
48. Use the Doc, Luke!
49. Einfache Konfiguration http://www.yaml.de/docs/index.html
50. Kopieren erwünscht!
51. Quick-Start Demos
52. Grab the code
53. Grab the code
54. Grab the code
55. Grab the code
56. Grab the code
57. Grab the code
58. Grab the code
59. Grab the code
60. Grab the code
61. Grab the code
62. Das reicht alles nicht?!
63. Eigene Elemente hinzufügen.
64. Aus alten Projekten sammeln.
65. Von anderen Projekten bedienen
66. http://foundation.zurb.com/
67. http://twitter.github.com/bootstrap/
68. http://chriscoyier.github.com/SurveyMonkey-Design-Patterns/ https://github.com/chriscoyier/SurveyMonkey-Design-Patterns
69. http://bootsnipp.com/
71. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke http://webkrauts.de http://slideshare.net/Flocke669