Schnell und sicher zum Ziel mit YAML4

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.

521db10df5241d9b2b70a555cc54e9e8?s=128

Jens Grochtdreis

June 03, 2014
Tweet

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

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

  25. None
  26. None
  27. Mit dem neuen Boxmodell

  28. None
  29. Floats einfassen

  30. Auch per Sass zu verwenden

  31. versteckte Inhalte

  32. Formulare

  33. None
  34. None
  35. None
  36. None
  37. None
  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!

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