Modulare Webentwicklung mit Sass

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

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