The document discusses four SASS tools called the Thoughbot Family: Bourbon, Neat, Bitters, and Refills. Bourbon provides SASS mixins for common functions like vendor prefixes and animation timing. Neat is a grid system defined in CSS rather than HTML. Bitters establishes a base file structure for SASS projects. Refills contains code snippets for common design patterns.

1. The Thoughbot Family
(Bourbon, Neat, Bitters, Refills)
May 5, 2015
Paul Stonier | www.paulstonier.com | 607-358-5199

2. What is it?

3. 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)

4. 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

5. 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

6. 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.

7. Bourbon
Outputted CSS

8. Outputted CSS

9. Bourbon

10. Bourbon

11. Semantic Markup
Neat Bootstrap

12. Semantic Markup
Neat

13. Neat: _grid-settings.scss

14. Using Media Queries

15. Questions?
Paul Stonier | www.paulstonier.com | 607-358-5199

16. Thank you
Paul Stonier | www.paulstonier.com | 607-358-5199