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.

Jens Grochtdreis

October 15, 2012
Tweet

More Decks by Jens Grochtdreis

Other Decks in Programming

Transcript

  1. ‣Frontendentwickler ‣seit 1999 Arbeit im und fürs Web ‣seit 2009

    selbständig ‣Frontendentwicklung ‣Schulung ‣Beratung ‣twitter.com/Flocke
  2. ‣ 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 ...
  3. 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.
  4. ‣ ym-wbox: Wrapper-Modul ‣ ym-cbox: Column-Modul ‣ ym-gbox: Grid-Modul ‣

    ym-fbox: Formular-Modul Nomenklatur der inneren Container
  5. ‣ 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!
  6. ‣ 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