Successfully reported this slideshow.
Your SlideShare is downloading. ×

CSS Sanity with Sass and the Inverted Triangle Approach

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 22 Ad
Advertisement

More Related Content

Recently uploaded (20)

Advertisement

CSS Sanity with Sass and the Inverted Triangle Approach

  1. 1. THE INVERTED TRIANGLE APPROACH C S S S A N I T Y W I T H S A S S
  2. 2. CSS - CASCADING STYLE SHEETS
  3. 3. SASS • Nested styles • Variables • Calculations • Mixins
  4. 4. SASS CODE
  5. 5. “They get messy.”
  6. 6. THIS IS NOT MY IDEA TO B E C L E A R …
  7. 7. INVERTED TRIANGLE O RG A N I Z E YO U R C O D E
  8. 8. KEY METRICS I N V E RT E D T R I A N G L E
  9. 9. INVERTED TRIANGLE O RG A N I Z E YO U R C O D E
  10. 10. SETTINGS • Global settings • Base font size • Color palettes • Config
  11. 11. TOOLS • Still global • Mixins • Font-sizing • Gradients • Functions
  12. 12. GENERIC • First layer to actually produce CSS • Normalize • Reset • Box-sizing rules
  13. 13. ELEMENTS • Unclassed HTML elements • Very rarely changed once set up
  14. 14. OBJECTS • First layer of class-based selectors • Non-cosmetic objects • Wrappers • Media objects
  15. 15. SET IT AND FORGET IT E V E RY T H I N G B E F O R E T H I S
  16. 16. COMPONENTS • Bulk of work is done here • Class-based styles • Split into partials to keep organized
  17. 17. TRUMPS • Overrides everything that came before • Where !important goes when necessary
  18. 18. TA K E T WO “They get messy.”
  19. 19. MY INVERTED TRIANGLE STRUCTURE • a — settings • b-tools • c-generic • d-elements • e-objects • f-components • g-vendors • h-trumps code
  20. 20. RESOURCES • http://technotif.com/manage-large-css-projects-with-itcss/ • https://www.sitepoint.com/architecture-in-sass/ • https://www.packtpub.com/books/content/how-structure- your-sass-scalability-using-itcss • https://github.com/JulieKuehl/Forward-Framework/tree/ kanopi/src/scss/forward
  21. 21. THANK YOU! QUESTIONS? J U L I E @ J U L I E K U E H L . C O M @ J U L I E K U E H L http://juliekuehl.com/wordcamp-milwaukee-2016/

×