Webseiten modular entwickeln

Kurzvortrag auf den Digital Visions in Wien. Leichte Modifikation zu vorherigen Auftritten zu diesem Thema.

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 ‣ Arbeit in einem Living Styleguide ‣ Dokumentation 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. Wichtigste Grundbedingung
9. Die Module müssen für sich selber stehen!
11. Möglichst wenige Ebenen!
13. Styleguides
14. http://codeforamerica.clearleft.com/
15. http://codeforamerica.clearleft.com/
16. https://medium.com/@operatino/living-style-guide-tools-in-depth-overview-28cfffb92d05
17. http://styleguides.io/
18. Mein aktueller Ansatz
21. http://styletil.es/ Auch Designer können modular arbeiten!
22. http://styletil.es/
23. http://styletil.es/
24. http://styletil.es/
25. http://www.studiobonito.co.uk/work/youth-for-christ-website-design-development-birmingham/
26. Richtiger Umgang mit Klassen
27. https://github.com/stubbornella/oocss/wiki
31. Modifikator
33. Das media-Element http://jsbin.com/ipupew/2/
34. http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
35. https://smacss.com/
36. 1. Base 2. Layout 3. Module 4. State (Zustand) 5. Theme Die einzelnen Bestandteile
39. http://bem.info/method/ BEM
40. Block, Element, Modifier
41. Namenskonventionen
42. http://snap.kapowaz.net/loloocss.png https://twitter.com/kapowaz/status/474195847694274561
43. https://twitter.com/oknoblich/status/472320546202742784 Aber praktisch!
44. https://css-tricks.com/bem-101/
45. http://codepen.io/team/css-tricks/pen/226a65c8f7d64615aabd45048d1d3b6d
46. 1 2 3 1
48. http://sassmeister.com/gist/c608e47ffd21f2166c56 Ab Sass 3.3 und in LESS
49. Ziemlich unnützes BEM
50. Hier ist BEM nützlich
51. Unpraktische Klassennamen
54. Quintessenz
55. CSS fängt erst mit dem Modul selber an
56. Struktur (Layout) und Module (Inhalte) sind im CSS voneinander getrennt
57. Eine konsistente Namensgebung nutzen
58. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke https://github.com/jensgro http://webkrauts.de http://slideshare.net/Flocke669 https://speakerdeck.com/flocke