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.

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. Rapid Prototyping macht eine Zusammenarbeit
mit Designern und Konzeptern einfacher.
http://www.flickr.com/photos/artrock2006/4177475479/

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. 96 Zeilen CSS für ...
‣ 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

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. 1
Die Klassen haben alle
einen Namespace: ym-

21. 2
Es gibt zwei wichtige
Bausteine

22. Die Kerndateien
in zwei Varianten
Produktionsdateien

23. 3
Layoutbestandteile werden
gedoppelt. Wegen des alten
Boxmodells!

24. Die zwei Container
Bei Nutzung des border-box-Modells oder fixen
Layouts sind die inneren Container verzichtbar!

25. 4
Es gibt eine klare
Nomenklatur

26. Nomenklatur der Module
‣ ym-wrapper: Wrapper-Modul
‣ ym-column: Column-Modul
‣ ym-grid: Grid-Modul
‣ ym-form: Formular-Modul

27. Nomenklatur der inneren
Container
‣ ym-wbox: Wrapper-Modul
‣ ym-cbox: Column-Modul
‣ ym-gbox: Grid-Modul
‣ ym-fbox: Formular-Modul

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. Fertige Buttons
‣ 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.

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