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.

Transcript

1. Webseiten modular entwickeln Jens Grochtdreis
2. Seite ist eine Ansammlung von Modulen
3. http://daverupert.com/2013/04/responsive-deliverables/
5. ‣ Die Inhalte differieren, sind aber prinzipiell Listen. ‣ Eine Box kann eine Überschrift enthalten. ‣ Jede Box hat eine obere Linie.
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
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/
41. Variablen
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
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
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