Pro Yearly is on sale from $80 to $50! »

Webseiten modular entwickeln

Webseiten modular entwickeln

Kurzvortrag auf den Digital Visions in Wien. Leichte Modifikation zu vorherigen Auftritten zu diesem Thema.

521db10df5241d9b2b70a555cc54e9e8?s=128

Jens Grochtdreis

October 09, 2015
Tweet

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 ‣ Arbeit in einem Living Styleguide ‣ Dokumentation 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. Wichtigste Grundbedingung

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

  10. None
  11. Möglichst wenige Ebenen!

  12. None
  13. Styleguides

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

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

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

  17. http://styleguides.io/

  18. Mein aktueller Ansatz

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

  22. http://styletil.es/

  23. http://styletil.es/

  24. http://styletil.es/

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

  26. Richtiger Umgang mit Klassen

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

  28. None
  29. None
  30. None
  31. Modifikator

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

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

  35. https://smacss.com/

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

    Theme Die einzelnen Bestandteile
  37. None
  38. None
  39. http://bem.info/method/ BEM

  40. Block, Element, Modifier

  41. Namenskonventionen

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

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

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

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

  46. 1 2 3 1

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

  49. Ziemlich unnützes BEM

  50. Hier ist BEM nützlich

  51. Unpraktische Klassennamen

  52. None
  53. None
  54. Quintessenz

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

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

  57. Eine konsistente Namensgebung nutzen

  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