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
   

   View Slide

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
   

   View Slide

3. Seite ist eine Ansammlung
   von Modulen
   

   View Slide

4. http://daverupert.com/2013/04/responsive-deliverables/
   

   View Slide

5. View Slide

6. View Slide

7. Platzierung sollte egal sein
   

   View Slide

8. Wichtigste Grundbedingung
   

   View Slide

9. Die Module müssen für sich
   selber stehen!
   

   View Slide

10. View Slide

11. Möglichst wenige Ebenen!
    

    View Slide

12. View Slide

13. Styleguides
    

    View Slide

14. http://codeforamerica.clearleft.com/
    

    View Slide

15. http://codeforamerica.clearleft.com/
    

    View Slide

16. https://medium.com/@operatino/living-style-guide-tools-in-depth-overview-28cfffb92d05
    

    View Slide

17. http://styleguides.io/
    

    View Slide

18. Mein aktueller Ansatz
    

    View Slide

19. View Slide

20. View Slide

21. http://styletil.es/
    Auch Designer können modular arbeiten!
    

    View Slide

22. http://styletil.es/
    

    View Slide

23. http://styletil.es/
    

    View Slide

24. http://styletil.es/
    

    View Slide

25. http://www.studiobonito.co.uk/work/youth-for-christ-website-design-development-birmingham/
    

    View Slide

26. Richtiger Umgang
    mit Klassen
    

    View Slide

27. https://github.com/stubbornella/oocss/wiki
    

    View Slide

28. View Slide

29. View Slide

30. View Slide

31. Modifikator
    

    View Slide

32. View Slide

33. Das media-Element
    http://jsbin.com/ipupew/2/
    

    View Slide

34. http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
    

    View Slide

35. https://smacss.com/
    

    View Slide

36. 1. Base
    2. Layout
    3. Module
    4. State (Zustand)
    5. Theme
    Die einzelnen Bestandteile
    

    View Slide

37. View Slide

38. View Slide

39. http://bem.info/method/
    BEM
    

    View Slide

40. Block, Element, Modifier
    

    View Slide

41. Namenskonventionen
    

    View Slide

42. http://snap.kapowaz.net/loloocss.png https://twitter.com/kapowaz/status/474195847694274561
    

    View Slide

43. https://twitter.com/oknoblich/status/472320546202742784
    Aber praktisch!
    

    View Slide

44. https://css-tricks.com/bem-101/
    

    View Slide

45. http://codepen.io/team/css-tricks/pen/226a65c8f7d64615aabd45048d1d3b6d
    

    View Slide

46. 1 2 3
    1
    

    View Slide

47. View Slide

48. http://sassmeister.com/gist/c608e47ffd21f2166c56
    Ab Sass 3.3 und in LESS
    

    View Slide

49. Ziemlich unnützes BEM
    

    View Slide

50. Hier ist BEM nützlich
    

    View Slide

51. Unpraktische Klassennamen
    

    View Slide

52. View Slide

53. View Slide

54. Quintessenz
    

    View Slide

55. CSS fängt erst mit dem
    Modul selber an
    

    View Slide

56. Struktur (Layout) und
    Module (Inhalte) sind im
    CSS voneinander getrennt
    

    View Slide

57. Eine konsistente
    Namensgebung nutzen
    

    View Slide

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
    

    View Slide