Webseiten modular entwickeln

Webseiten sind keine Gesamtkunstwerke, sondern Zusammenstellungen einzelner Module. Dieser Vortrag von der Jax 2013 ergründet, wie man vorgeht, um sinnvolle und pflegbare M;odule zu erschaffen. Dabei wird vor allem Wert auf das CSS gelegt. Das CSS wird dank Sass ebenso modular, wie das HTML.

Transcript

1. Webseiten modular entwickeln Jens Grochtdreis
2. ‣Frontendentwickler ‣seit 1999 Arbeit im und fürs Web ‣seit 2009 selbständig ‣Frontendentwicklung ‣Schulung ‣Beratung ‣twitter.com/Flocke
3. Seite ist eine Ansammlung von Modulen
6. ‣ Jede Box hat eine obere Linie. ‣ Die Inhalte differieren, sind aber prinzipiell Listen. ‣ Eine Box kann eine Überschrift enthalten.
7. Platzierung sollte egal sein
9. Module entwickeln, nicht ganze Seiten!
10. Layout: Seitengrundgerüst
11. Module tragen Designinformationen
12. Umfangreiche Modulliste
13. http://structurae.de
19. Jedes dieser Module ist eine eigene Datei
23. Module richtig entwickeln
24. Das Modul ist sein eigenes Universum!
25. Trennung zwischen Layout und Design
26. Semantisch = HTML Design = CSS
27. http://jsfiddle.net/Flocke/psAwV/
28. Schnipsel im CSS dank Präprozessoren
29. CSS ist manchmal nervtötend unflexibel.
30. Einfacher wird es, wenn man CSS „programmiert“!
32. zentrales Stylesheet importiert Module und generiert ein CSS-File
35. Variablen
38. 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.
39. Richtiger Umgang mit Klassen
41. https://github.com/stubbornella/oocss/wiki
42. Styling über Klassen
43. Das media-Element http://jsbin.com/ipupew/2/
44. http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
45. https://smacss.com/
46. 1. Base 2. Layout 3. Module 4. State (Zustand) 5. Theme Die einzelnen Bestandteile
47. http://bem.info/method/ BEM
48. Block, Element, Modifier
49. Namenskonventionen
50. Klassen sind manchmal sinnvoller, als Kontextselektoren
52. Semantische Klassen?
53. Nein! Pflegbare!
54. CSS = Optik Semantik = HTML
55. Farben über Klassen zuweisen
56. CSS
57. SCSS
58. Variablen in Sass
59. ‣ IDs wenn überhaupt dann nur für grundlegende Elemente des Layouts nutzen. ‣ #header, #main, #sidebar, #footer ‣ Und natürlich für Formularelemente! ‣ Optik von Modulen über separate Klassen modifizieren.
60. ‣ Weitere Trennung sinnvoll: ‣ Klassen nur für Layout ‣ Klassen nur für Design ‣ Grundaufbau ‣ Theme ‣ Zustand ‣ Klassen nur für Zugriff mittels JavaScript
61. Realistische Dummy-Inhalte
62. http://www.mangrove.com/blog/1079/death-to-lorem-ipsum
63. Navigation
64. http://www.blindtextgenerator.de/
65. http://bueltge.de/html-ipsum/
66. Vorsicht bei horizontaler Navigation http://grochtdreis.de/weblog/2009/10/18/schoener-navigationstitel/
67. Dummybilder http://dummyimage.com/ http://lorempixel.com/
68. Dummybilder http://placekitten.com/
69. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke https://github.com/jensgro http://webkrauts.de http://slideshare.net/Flocke669 https://speakerdeck.com/flocke