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

Modulare Webentwicklung mit Sass

Modulare Webentwicklung mit Sass

Vortrag auf dem Webkongress Erlangen, diesmal mit Diskussion von Element Queries wegen Resposnive Webdesign, Sass nur mit den wichtigsten Basisfeatures.

Jens Grochtdreis

March 09, 2016
Tweet

More Decks by Jens Grochtdreis

Other Decks in Technology

Transcript

  1. Modulare
    Webentwicklung mit Sass
    Jens Grochtdreis

    View 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 Slide

  3. Ein eigenes Bootstrap!

    View Slide

  4. Seite ist eine Ansammlung
    von Modulen

    View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. Platzierung sollte egal sein

    View Slide

  10. Trennung von
    Layout und Modulen

    View Slide

  11. Layout - meist ein Grid

    View Slide

  12. Module - die Inhalte

    View Slide

  13. Trennung von Layout und
    Inhalt auch in PHP & Co

    View Slide

  14. Wichtigste Grundbedingung

    View Slide

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

    View Slide

  16. View Slide

  17. Möglichst wenige Ebenen!

    View Slide

  18. View Slide

  19. View Slide

  20. Unpraktische Klassennamen

    View Slide

  21. View Slide

  22. Module und RWD

    View Slide

  23. Nicht alles ist eitel Sonnenschein

    View Slide

  24. Platzierung sollte egal sein

    View Slide

  25. Das Layout hat
    Mediaqueries
    Bezugspunkt: Browser

    View Slide

  26. Module brauchen
    Containerqueries
    Bezugspunkt: das Layout

    View Slide

  27. Wir müssten die Breite
    eines Moduls messen
    können.

    View Slide

  28. Mit CSS geht das (noch)
    nicht, aber mit JavaScript.

    View Slide

  29. http://ricg.io/

    View Slide

  30. Anwendungsbeispiel
    https://responsiveimagescg.github.io/cq-usecases/

    View Slide

  31. https://responsiveimagescg.github.io/cq-usecases/

    View Slide

  32. https://24ways.org/2015/being-responsive-to-the-small-things/

    View Slide

  33. Sass

    View Slide

  34. Wofür nutzen?
    ‣ Modularisierung des CSS
    ‣ Auslagerung von Code in wiederverwendbare
    Schnipsel (Mixins und Placeholder)
    ‣ Arbeit im Team

    View Slide

  35. ‣ Ist ein Ruby-Tool
    ‣ ein Grunt-Wrapper (grunt-contrib-sass)
    ‣ ein Gulp-Wrapper (gulp-ruby-sass)
    ‣ Gibt es auch als Node.js-Tool ohne
    Abhängigkeit zu Ruby (node-sass)
    ‣ ein Grunt-Wrapper dafür (grunt-sass)
    ‣ ein Gulp-Wrapper dafür (gulp-sass)
    ‣ PHPStorm/WebStorm hat Sass integriert

    View Slide

  36. Im Terminal kompilieren
    Ruby-Version

    View Slide

  37. Eine CSS-Datei ausgeben,
    aber viele editieren!

    View Slide

  38. View Slide

  39. View Slide

  40. Codeschnipsel in Mixins
    (wie Funktionen) auslagern

    View Slide

  41. View Slide

  42. View Slide

  43. http://www.sassmeister.com/gist/9c6015117f0e1c8c2522

    View Slide

  44. Viele Entwickler 

    können einfach 

    an einem CSS arbeiten!

    View Slide

  45. Editiert werden nur SCSS-
    Dateien, niemals das
    resultierende CSS!

    View Slide

  46. Styleguides

    View Slide

  47. HTML im CSS
    ‣ Alle Styleguide-Generatoren verwalten das
    CSS innerhalb der (S)CSS-Dateien.
    ‣ Alle HTML-Änderungen müssen immer sofort
    im CSS nachgezogen werden, sonst entwickelt
    sich die Codebasis auseinander.
    ‣ Das ist eine große Fehlerquelle!

    View Slide

  48. http://styleguides.io/

    View Slide

  49. Selber machen ist besser!

    View Slide

  50. View Slide

  51. View Slide

  52. 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 Slide