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

Thoughtbot Family: Bourbon, Neat, Bitters, Refills

  • 1.
    The Thoughbot Family
 (Bourbon,Neat, Bitters, Refills) May 5, 2015 Paul Stonier | www.paulstonier.com | 607-358-5199
  • 2.
  • 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.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
    Questions? Paul Stonier |www.paulstonier.com | 607-358-5199
  • 16.
    Thank you Paul Stonier| www.paulstonier.com | 607-358-5199