The Thoughbot Family(Bourbon, Neat, Bitters, Refills)
May 5, 2015
Paul Stonier | www.paulstonier.com | 607-358-5199
What is it?
What is it?
• Bourbon: SASS mixins of commonly used functions to make the authoring
process better. (Vendor prefixes, pre-defined button styles, animation timing
functions, etc)
What is it?
• Bourbon: SASS mixins of commonly used functions to make the authoring
process better. (Vendor prefixes, pre-defined button styles, animation timing
functions, etc)
• Neat: A grid system that sits in the CSS rather than your HTML
What is it?
• Bourbon: SASS mixins of commonly used functions to make the authoring
process better. (Vendor prefixes, pre-defined button styles, animation timing
functions, etc)
• Neat: A grid system that sits in the CSS rather than your HTML
• Bitters: A base file structure of your SASS files made to be a starting point
for your project
What is it?
• Bourbon: SASS mixins of commonly used functions to make the authoring
process better. (Vendor prefixes, pre-defined button styles, animation timing
functions, etc)
• Neat: A grid system that sits in the CSS rather than your HTML
• Bitters: A base file structure of your SASS files made to be a starting point
for your project
• Refills: A collection of code snippets of common design patterns.
Bourbon
Outputted CSS
Outputted CSS
Bourbon
Bourbon
Semantic Markup
Neat Bootstrap
Semantic Markup
Neat
Neat: _grid-settings.scss
Using Media Queries