Webseiten modular entwickeln

Transcript

1. 1.

   Webseiten modular entwickeln Jens Grochtdreis

2. 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. 3.

   Seite ist eine Ansammlung von Modulen

4. 4.

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

5. 5.

   None
6. 6.

   None
7. 7.

   Platzierung sollte egal sein

8. 8.

   http://styletil.es/

9. 9.

   http://styletil.es/

10. 10.

    http://styletil.es/

11. 11.

    http://styletil.es/

12. 12.

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

13. 13.

    Wichtigste Grundbedingung

14. 14.

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

15. 15.

    None
16. 16.

    Möglichst wenige Ebenen!

17. 17.

    None
18. 18.

    None
19. 19.

    Styleguides

20. 20.

    http://codeforamerica.clearleft.com/

21. 21.

    http://codeforamerica.clearleft.com/

22. 22.

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

23. 23.

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

24. 24.

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

25. 25.

    http://styleguides.io/

26. 26.

    Mein aktueller Ansatz

27. 27.

    None
28. 28.

    None
29. 29.

    Nächste Modifikation

30. 30.

    None
31. 31.

    inc/ sass/

32. 32.

    None
33. 33.

    Richtiger Umgang mit Klassen

34. 34.

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

35. 35.

    None
36. 36.

    None
37. 37.

    None
38. 38.

    Modifikator

39. 39.

    None
40. 40.

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

41. 41.

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

42. 42.

    https://smacss.com/

43. 43.

    1. Base 2. Layout 3. Module 4. State (Zustand) 5.

    Theme Die einzelnen Bestandteile
44. 44.

    None
45. 45.

    None
46. 46.

    http://bem.info/method/ BEM

47. 47.

    Block, Element, Modifier

48. 48.

    Namenskonventionen

49. 49.

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

50. 50.

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

51. 51.

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

52. 52.

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

53. 53.

    1 2 3 1

54. 54.

    None
55. 55.

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

56. 56.

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

57. 57.

    Strukturelle Klassen

58. 58.

    Typ-Klassen

59. 59.

    Modifikator-Klassen

60. 60.

    Funktionale Klassen

61. 61.

    Namespace-Klassen

62. 62.

    Zusammenfassen und Ausnahmen gestalten

63. 63.

    None
64. 64.

    None
65. 65.

    Unpraktische Klassennamen

66. 66.

    None
67. 67.

    None
68. 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