Webseiten modular entwickeln

Vortrag auf der Contao Konferenz in Lüneburg

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