Webseiten modular entwickeln

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.

521db10df5241d9b2b70a555cc54e9e8?s=128

Jens Grochtdreis

April 23, 2013
Tweet

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

  4. None
  5. None
  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

  8. None
  9. Module entwickeln, nicht ganze Seiten!

  10. Layout: Seitengrundgerüst

  11. Module tragen Designinformationen

  12. Umfangreiche Modulliste

  13. http://structurae.de

  14. None
  15. None
  16. None
  17. None
  18. None
  19. Jedes dieser Module ist eine eigene Datei

  20. None
  21. None
  22. None
  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“!

  31. None
  32. zentrales Stylesheet importiert Module und generiert ein CSS-File

  33. None
  34. None
  35. Variablen

  36. None
  37. None
  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

  40. None
  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

  51. None
  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