Modulare Arbeitsweise

521db10df5241d9b2b70a555cc54e9e8?s=47 Jens Grochtdreis
November 23, 2014

Modulare Arbeitsweise

Kurzer Überblick über die vielen Facetten modularer Webentwicklung. Ich gehe auf die Separierung von Modulen, die Sammlung in Modulübersichten und Styleguides ein, ebenso auf Modularisierung mit Sass. Session auf dem Barcamp Frankfurt im November 2014.

521db10df5241d9b2b70a555cc54e9e8?s=128

Jens Grochtdreis

November 23, 2014
Tweet

Transcript

  1. Webseiten modular entwickeln Jens Grochtdreis

  2. Seite ist eine Ansammlung von Modulen

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

  4. None
  5. ‣ Die Inhalte differieren, sind aber prinzipiell Listen. ‣ Eine

    Box kann eine Überschrift enthalten. ‣ Jede Box hat eine obere Linie.
  6. None
  7. Platzierung sollte egal sein

  8. Patterns

  9. http://codepen.io/patterns/

  10. http://codepen.io/collection/Ctihv/

  11. UI-Frameworks

  12. http://getbootstrap.com/components/#pagination

  13. http://foundation.zurb.com/docs/components/labels.html

  14. Umfangreiche Modulliste

  15. http://structurae.de

  16. None
  17. None
  18. None
  19. None
  20. None
  21. Modulliste ALA-Style

  22. http://patterns.alistapart.com/

  23. https://github.com/alistapart/pattern-library

  24. Meine eigene Version

  25. Styleguides

  26. http://patternlab.io/

  27. http://patternlab.io/

  28. http://barebones.paulrobertlloyd.com/

  29. http://styleguides.io/

  30. Style Tiles

  31. http://styletil.es/

  32. http://styletil.es/

  33. http://styletil.es/

  34. http://styletil.es/

  35. http://styletil.es/

  36. Schnipsel im CSS dank Präprozessoren

  37. http://sass-lang.com/ http://compass-style.org/

  38. None
  39. None
  40. None
  41. Variablen

  42. None
  43. None
  44. Module in Sass ‣ Ein Unterstrich vor der Dateiendung verhindert

    das rendern als einzelne Datei. Es entsteht ein „partial“. So kann man diese in eine zentrale Datei importieren und nachher gesammelt rendern lassen.
  45. Richtiger Umgang mit Klassen

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

  47. None
  48. None
  49. None
  50. None
  51. Das media-Element http://jsbin.com/ipupew/2/

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

  53. https://smacss.com/

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

    Theme Die einzelnen Bestandteile
  55. http://bem.info/method/ BEM

  56. Block, Element, Modifier

  57. Namenskonventionen

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

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

  60. NCSS

  61. Strukturelle Klassen

  62. Typ-Klassen

  63. Modifikator-Klassen

  64. Funktionale Klassen

  65. Namespace-Klassen

  66. Klassen sind manchmal sinnvoller, als Kontextselektoren

  67. None
  68. Regeln festlegen

  69. ‣ Benamung ‣ evtl. Namespaces ‣ Einrückung ‣ Eine Zeile

    oder mehrere? ‣ Wie oft committen? ‣ Kommentare auf alle Fälle, aber wie und was?
  70. ‣ Klassen und IDs möglichst auf Englisch benennen. Wer weiss,

    wen man fragen muss oder wohin das Template noch geht? ‣ Möglichst keine optischen Namen vergeben, eher nach dem Sinn. Also nicht „.red“ oder „.leftColumn“, eher „.warning“ und „.navCol“. ‣ CamelCase? Geschmackssache! ‣ IDs maximal für grundlegende Elemente des Layouts. Und für Formularelemente. Klassen und IDs
  71. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke https://github.com/jensgro http://webkrauts.de http://slideshare.net/Flocke669 https://speakerdeck.com/flocke