Pro Yearly is on sale from $80 to $50! »

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.

521db10df5241d9b2b70a555cc54e9e8?s=128

Jens Grochtdreis

March 09, 2016
Tweet

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

  5. None
  6. None
  7. None
  8. None
  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!

  16. None
  17. Möglichst wenige Ebenen!

  18. None
  19. None
  20. Unpraktische Klassennamen

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

  38. None
  39. None
  40. Codeschnipsel in Mixins (wie Funktionen) auslagern

  41. None
  42. None
  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!

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