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
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
3. Ein eigenes Bootstrap!
4. Seite ist eine Ansammlung von Modulen
9. Platzierung sollte egal sein
10. Trennung von Layout und Modulen
11. Layout - meist ein Grid
12. Module - die Inhalte
13. Trennung von Layout und Inhalt auch in PHP & Co
14. Wichtigste Grundbedingung
15. Die Module müssen für sich selber stehen!
17. Möglichst wenige Ebenen!
20. Unpraktische Klassennamen
22. Module und RWD
23. Nicht alles ist eitel Sonnenschein
24. Platzierung sollte egal sein
25. Das Layout hat Mediaqueries Bezugspunkt: Browser
26. Module brauchen Containerqueries Bezugspunkt: das Layout
27. Wir müssten die Breite eines Moduls messen können.
28. Mit CSS geht das (noch) nicht, aber mit JavaScript.
29. http://ricg.io/
30. Anwendungsbeispiel https://responsiveimagescg.github.io/cq-usecases/
31. https://responsiveimagescg.github.io/cq-usecases/
32. https://24ways.org/2015/being-responsive-to-the-small-things/
33. Sass
34. Wofür nutzen? ‣ Modularisierung des CSS ‣ Auslagerung von Code in wiederverwendbare Schnipsel (Mixins und Placeholder) ‣ Arbeit im Team
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
36. Im Terminal kompilieren Ruby-Version
37. Eine CSS-Datei ausgeben, aber viele editieren!
40. Codeschnipsel in Mixins (wie Funktionen) auslagern
43. http://www.sassmeister.com/gist/9c6015117f0e1c8c2522
44. Viele Entwickler 
 können einfach 
 an einem CSS arbeiten!
45. Editiert werden nur SCSS- Dateien, niemals das resultierende CSS!
46. Styleguides
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!
48. http://styleguides.io/
49. Selber machen ist besser!
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