Webseiten modular entwickeln

521db10df5241d9b2b70a555cc54e9e8?s=47 Jens Grochtdreis
May 28, 2015
Technology
0
1.8k

Webseiten modular entwickeln

Vortrag auf der Contao Konferenz in Lüneburg

521db10df5241d9b2b70a555cc54e9e8?s=128

Jens Grochtdreis

May 28, 2015
Tweet

More Decks by Jens Grochtdreis

See All by Jens Grochtdreis
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
0
500
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
1
150
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
1
1.5k
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
1
160
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
0
830
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
1
6.8k
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
0
1.5k
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
1
800
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
1
1.5k

Other Decks in Technology

See All in Technology
6eafc285d1d95416f55822cb17032af7?s=48 toshi_piro
0
130
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
0
530
098ad475722e3697ec2fba28c8654f9f?s=48 yuhta28
0
370
97a7f7899e0df28c3636b8d44bbe6578?s=48 korodroid
3
730
5e25aec60358948cd53cfcdfd3714c6b?s=48 weblyzard
1
2k
84907687e50c8ac2a09b02e0d1b36ab1?s=48 toricls
13
2.6k
C636093440dd4a8be6416e83cb980979?s=48 iselegant
13
2.5k
1b177b37d966f573b1df5d7218a5f560?s=48 k2wanko
1
210
953fe5f1a04d8944ead78db3991cfa6a?s=48 anoriqq
0
180
7689d16bbad8f2fa05a5e9afb8527675?s=48 fatsushi
2
1k
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
160
5c772b62f1974e9da3a88fbb4ef02696?s=48 hariby
1
110

Featured

See All Featured
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
339
26k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
345
20k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
112
24k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
356
62k
245cee81a9c424266e5e401d844ea881?s=48 lara
590
60k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
622
40k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
220
14k
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
583
200k
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
61
7.5k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
446
36k
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
273
31k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
408
57k

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