Modulare Webentwicklung

Auf dem Barcamp in Heidelberg habe ich über modulare Webentwicklung gesprochen. Auch mein aktueller Ansatz der Arbeit im Living Styleguide kam zur Sprache. Ebenso Ansätze zur Klassenbenamung wie BEM und SMACSS.

Transcript

1. Webseiten modular entwickeln Jens Grochtdreis
2. Ziele ‣ Mehrere Personen arbeiten an einem Projekt. ‣ Einzelne Seitenbestandteile können in anderen Projekten wiederverwendet werden. ‣ Theming ‣ Dokumentation in einem Living Styleguide ‣ Arbeit in einem Living Styleguide http://upload.wikimedia.org/wikipedia/commons/3/32/Lego_Color_Bricks.jpg
3. Seite ist eine Ansammlung von Modulen
4. http://daverupert.com/2013/04/responsive-deliverables/
7. Platzierung sollte egal sein
8. http://styletil.es/
9. http://styletil.es/
10. http://styletil.es/
11. http://styletil.es/
12. http://www.studiobonito.co.uk/work/youth-for-christ-website-design-development-birmingham/
13. Wichtigste Grundbedingung
14. Die Module müssen für sich selber stehen!
16. Möglichst wenige Ebenen!
19. Styleguides
20. http://codeforamerica.clearleft.com/
21. http://codeforamerica.clearleft.com/
22. http://ux.mailchimp.com/patterns/tables
23. http://rackerlabs.github.io/canon/ui-components/#tables
24. https://medium.com/@operatino/living-style-guide-tools-in-depth-overview-28cfffb92d05
25. http://styleguides.io/
26. Mein aktueller Ansatz
29. Nächste Modifikation
31. inc/ sass/
33. Richtiger Umgang mit Klassen
34. https://github.com/stubbornella/oocss/wiki
38. Modifikator
40. Das media-Element http://jsbin.com/ipupew/2/
41. http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
42. https://smacss.com/
43. 1. Base 2. Layout 3. Module 4. State (Zustand) 5. Theme Die einzelnen Bestandteile
46. http://bem.info/method/ BEM
47. Block, Element, Modifier
48. Namenskonventionen
49. http://snap.kapowaz.net/loloocss.png https://twitter.com/kapowaz/status/474195847694274561
50. https://twitter.com/oknoblich/status/472320546202742784
51. https://css-tricks.com/bem-101/
52. http://codepen.io/team/css-tricks/pen/226a65c8f7d64615aabd45048d1d3b6d
53. 1 2 3 1
55. http://sassmeister.com/gist/c608e47ffd21f2166c56 Ab Sass 3.3
56. NCSS https://github.com/redaxmedia/ncss
57. Strukturelle Klassen
58. Typ-Klassen
59. Modifikator-Klassen
60. Funktionale Klassen
61. Namespace-Klassen
62. Zusammenfassen und Ausnahmen gestalten
65. Unpraktische Klassennamen
68. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke https://github.com/jensgro http://webkrauts.de http://slideshare.net/Flocke669 https://speakerdeck.com/flocke