Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webseiten modular entwickeln

Webseiten modular entwickeln

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

Jens Grochtdreis

October 09, 2015
Tweet

More Decks by Jens Grochtdreis

Other Decks in Technology

Transcript

  1. Webseiten modular
    entwickeln
    Jens Grochtdreis

    View full-size slide

  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

    View full-size slide

  3. Seite ist eine Ansammlung
    von Modulen

    View full-size slide

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

    View full-size slide

  5. Platzierung sollte egal sein

    View full-size slide

  6. Wichtigste Grundbedingung

    View full-size slide

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

    View full-size slide

  8. Möglichst wenige Ebenen!

    View full-size slide

  9. http://codeforamerica.clearleft.com/

    View full-size slide

  10. http://codeforamerica.clearleft.com/

    View full-size slide

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

    View full-size slide

  12. http://styleguides.io/

    View full-size slide

  13. Mein aktueller Ansatz

    View full-size slide

  14. http://styletil.es/
    Auch Designer können modular arbeiten!

    View full-size slide

  15. http://styletil.es/

    View full-size slide

  16. http://styletil.es/

    View full-size slide

  17. http://styletil.es/

    View full-size slide

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

    View full-size slide

  19. Richtiger Umgang
    mit Klassen

    View full-size slide

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

    View full-size slide

  21. Modifikator

    View full-size slide

  22. Das media-Element
    http://jsbin.com/ipupew/2/

    View full-size slide

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

    View full-size slide

  24. https://smacss.com/

    View full-size slide

  25. 1. Base
    2. Layout
    3. Module
    4. State (Zustand)
    5. Theme
    Die einzelnen Bestandteile

    View full-size slide

  26. http://bem.info/method/
    BEM

    View full-size slide

  27. Block, Element, Modifier

    View full-size slide

  28. Namenskonventionen

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. http://sassmeister.com/gist/c608e47ffd21f2166c56
    Ab Sass 3.3 und in LESS

    View full-size slide

  34. Ziemlich unnützes BEM

    View full-size slide

  35. Hier ist BEM nützlich

    View full-size slide

  36. Unpraktische Klassennamen

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. Eine konsistente
    Namensgebung nutzen

    View full-size slide

  40. Jens Grochtdreis
    http://grochtdreis.de
    http://twitter.com/Flocke
    https://github.com/jensgro
    http://webkrauts.de
    http://slideshare.net/Flocke669
    https://speakerdeck.com/flocke

    View full-size slide