css sanity with sass and the inverted triangle approach

22
THE INVERTED TRIANGLE APPROACH CSS SANITY WITH SASS

Upload: julie-kuehl

Post on 13-Apr-2017

198 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: CSS Sanity with Sass and the Inverted Triangle Approach

THE INVERTED TRIANGLE APPROACHC S S S A N I T Y W I T H S A S S

Page 2: CSS Sanity with Sass and the Inverted Triangle Approach

CSS - CASCADING STYLE SHEETS

Page 3: CSS Sanity with Sass and the Inverted Triangle Approach

SASS

• Nested styles

• Variables

• Calculations

• Mixins

Page 4: CSS Sanity with Sass and the Inverted Triangle Approach

SASS CODE

Page 5: CSS Sanity with Sass and the Inverted Triangle Approach
Page 6: CSS Sanity with Sass and the Inverted Triangle Approach

“They get messy.”

Page 7: CSS Sanity with Sass and the Inverted Triangle Approach

THIS IS NOT MY IDEAT O B E C L E A R…

Page 8: CSS Sanity with Sass and the Inverted Triangle Approach

INVERTED TRIANGLEO R G A N I Z E Y O U R C O D E

Page 9: CSS Sanity with Sass and the Inverted Triangle Approach

KEY METRICSI N V E R T E D T R I A N G L E

Page 10: CSS Sanity with Sass and the Inverted Triangle Approach

INVERTED TRIANGLEO R G A N I Z E Y O U R C O D E

Page 11: CSS Sanity with Sass and the Inverted Triangle Approach

SETTINGS

• Global settings

• Base font size

• Color palettes

• Config

Page 12: CSS Sanity with Sass and the Inverted Triangle Approach

TOOLS

• Still global

• Mixins

• Font-sizing

• Gradients

• Functions

Page 13: CSS Sanity with Sass and the Inverted Triangle Approach

GENERIC

• First layer to actually produce CSS

• Normalize

• Reset

• Box-sizing rules

Page 14: CSS Sanity with Sass and the Inverted Triangle Approach

ELEMENTS

• Unclassed HTML elements

• Very rarely changed once set up

Page 15: CSS Sanity with Sass and the Inverted Triangle Approach

OBJECTS

• First layer of class-based selectors

• Non-cosmetic objects

• Wrappers

• Media objects

Page 16: CSS Sanity with Sass and the Inverted Triangle Approach

SET IT AND FORGET ITE V E R Y T H I N G B E F O R E T H I S

Page 17: CSS Sanity with Sass and the Inverted Triangle Approach

COMPONENTS

• Bulk of work is done here

• Class-based styles

• Split into partials to keep organized

Page 18: CSS Sanity with Sass and the Inverted Triangle Approach

TRUMPS

• Overrides everything that came before

• Where !important goes when necessary

Page 19: CSS Sanity with Sass and the Inverted Triangle Approach

T A K E T W O

“They get messy.”

Page 20: CSS Sanity with Sass and the Inverted Triangle Approach

MY INVERTED TRIANGLE STRUCTURE

• a — settings

• b-tools

• c-generic

• d-elements

• e-objects

• f-components

• g-vendors

• h-trumps

code

Page 21: CSS Sanity with Sass and the Inverted Triangle Approach

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

Page 22: CSS Sanity with Sass and the Inverted Triangle Approach

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/