css sanity with sass and the inverted triangle approach
TRANSCRIPT
THE INVERTED TRIANGLE APPROACHC S S S A N I T Y W I T H S A S S
CSS - CASCADING STYLE SHEETS
SASS
• Nested styles
• Variables
• Calculations
• Mixins
SASS CODE
“They get messy.”
THIS IS NOT MY IDEAT O B E C L E A R…
INVERTED TRIANGLEO R G A N I Z E Y O U R C O D E
KEY METRICSI N V E R T E D T R I A N G L E
INVERTED TRIANGLEO R G A N I Z E Y O U R C O D E
SETTINGS
• Global settings
• Base font size
• Color palettes
• Config
TOOLS
• Still global
• Mixins
• Font-sizing
• Gradients
• Functions
GENERIC
• First layer to actually produce CSS
• Normalize
• Reset
• Box-sizing rules
ELEMENTS
• Unclassed HTML elements
• Very rarely changed once set up
OBJECTS
• First layer of class-based selectors
• Non-cosmetic objects
• Wrappers
• Media objects
SET IT AND FORGET ITE V E R Y T H I N G B E F O R E T H I S
COMPONENTS
• Bulk of work is done here
• Class-based styles
• Split into partials to keep organized
TRUMPS
• Overrides everything that came before
• Where !important goes when necessary
T A K E T W O
“They get messy.”
MY INVERTED TRIANGLE STRUCTURE
• a — settings
• b-tools
• c-generic
• d-elements
• e-objects
• f-components
• g-vendors
• h-trumps
code
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
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/