Webseiten modular entwickeln

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/

5. None
6. None

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!

15. None

16. Möglichst wenige Ebenen!

17. None
18. None

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

27. None
28. None

29. Nächste Modifikation

30. None

31. inc/ sass/

32. None

33. Richtiger Umgang mit Klassen

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

35. None
36. None
37. None

38. Modifikator

39. None

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
44. None
45. None

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

54. None

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

63. None
64. None

65. Unpraktische Klassennamen

66. None
67. None

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