Rapid Prototyping mit YAML4
1 gefällt mir•970 aufrufe
Das Dokument beschreibt die Verwendung von YAML 4 für Rapid Prototyping in der Frontend-Entwicklung, betont die Vorteile von modularen und flexiblen Layouts sowie die Trennung von Breiten- und Floatdefinitionen für eine einfachere Erstellung von Grids. Es enthält auch Empfehlungen zur Verwendung von klaren Namenskonventionen und die Bedeutung von Accessibility-Tools. Jens Grochtdreis, der seit 1999 im Webbereich tätig ist, bietet weitere Ressourcen und Hinweise zur Integration von YAML in bestehende Projekte.
Rapid Prototyping mit YAML4
- 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!
- 7. Das passt dazu nicht
- 8. Rapid Prototyping macht eine Zusammenarbeit mit Designern und Konzeptern einfacher. http://www.flickr.com/photos/artrock2006/4177475479/
- 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
- 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!
- 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.
- 46. Accessible Tabs
- 47. Mikroformate
- 48. Use the Doc, Luke!
- 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?!
- 64. Aus alten Projekten sammeln.
- 65. Von anderen Projekten bedienen
- 68. http://chriscoyier.github.com/SurveyMonkey-Design-Patterns/ https://github.com/chriscoyier/SurveyMonkey-Design-Patterns
- 71. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke http://webkrauts.de http://slideshare.net/Flocke669