Webseiten modular entwickeln

Vortrag auf der Contao Konferenz in Lüneburg

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
   ‣ Dokumentation in einem Living Styleguide
   ‣ Arbeit 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. http://styletil.es/
   

   View Slide

9. http://styletil.es/
   

   View Slide

10. http://styletil.es/
    

    View Slide

11. http://styletil.es/
    

    View Slide

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

    View Slide

13. Wichtigste Grundbedingung
    

    View Slide

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

    View Slide

15. View Slide

16. Möglichst wenige Ebenen!
    

    View Slide

17. View Slide

18. View Slide

19. Styleguides
    

    View Slide

20. http://codeforamerica.clearleft.com/
    

    View Slide

21. http://codeforamerica.clearleft.com/
    

    View Slide

22. http://ux.mailchimp.com/patterns/tables
    

    View Slide

23. http://rackerlabs.github.io/canon/ui-components/#tables
    

    View Slide

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

    View Slide

25. http://styleguides.io/
    

    View Slide

26. Mein aktueller Ansatz
    

    View Slide

27. View Slide

28. View Slide

29. Nächste Modifikation
    

    View Slide

30. View Slide

31. inc/ sass/
    

    View Slide

32. View Slide

33. Richtiger Umgang
    mit Klassen
    

    View Slide

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

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. Modifikator
    

    View Slide

39. View Slide

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

    View Slide

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

    View Slide

42. https://smacss.com/
    

    View Slide

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

    View Slide

44. View Slide

45. View Slide

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

    View Slide

47. Block, Element, Modifier
    

    View Slide

48. Namenskonventionen
    

    View Slide

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

    View Slide

50. https://twitter.com/oknoblich/status/472320546202742784
    

    View Slide

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

    View Slide

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

    View Slide

53. 1 2 3
    1
    

    View Slide

54. View Slide

55. http://sassmeister.com/gist/c608e47ffd21f2166c56
    Ab Sass 3.3
    

    View Slide

56. NCSS
    https://github.com/redaxmedia/ncss
    

    View Slide

57. Strukturelle Klassen
    

    View Slide

58. Typ-Klassen
    

    View Slide

59. Modifikator-Klassen
    

    View Slide

60. Funktionale Klassen
    

    View Slide

61. Namespace-Klassen
    

    View Slide

62. Zusammenfassen und
    Ausnahmen gestalten
    

    View Slide

63. View Slide

64. View Slide

65. Unpraktische Klassennamen
    

    View Slide

66. View Slide

67. View Slide

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
    

    View Slide