Upgrade to Pro — share decks privately, control downloads, hide ads and more …

YAML4 - Rapid Prototyping mit HTML und CSS

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.

521db10df5241d9b2b70a555cc54e9e8?s=128

Jens Grochtdreis

October 15, 2012
Tweet

More Decks by Jens Grochtdreis

Other Decks in Programming

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.
  17. None
  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

  30. None
  31. None
  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!
  35. None
  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/

  70. None
  71. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke http://webkrauts.de http://slideshare.net/Flocke669