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

Questions?

Paul Stonier | www.paulstonier.com | 607-358-5199

Thank you

Paul Stonier | www.paulstonier.com | 607-358-5199