A

PRESENTATION

OVERVIEW

Goals:

1.  What are Bootstrap, Bourbon, Neat, Bitters, and Refills?

2.   How do their grid systems compare?

3.   What are the features and limitations of each?

THE BOOTSTRAP BREAKDOWN

What is bootstrap: ü  Essentially a CSS file Optionally includes: ü  A Javascript file, Glyphicon fonts and a default theme file ü  Scaffolding including normalize ü  The grid ü  Prebuilt patterns and components

BOURBON BREAKDOWN What is bourbon: ü  A collection of SASS mixins

ü  SASS: Syntactically Awesome Style Sheets

// example h1 { font-family: $helvetica } // outputs h1 { font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif } ü  Mixins: functions that generate css // example @include position(absolute, 10px -13px 0 0);

WHAT IS NEAT?

Grid system built with Bourbon mixins

WHAT IS BITTERS?

Scaffolding for Bourbon projects: ü  Styles ü  Variables ü  Structure ü  Compiles into a CSS base

WHAT ARE REFILLS?

Prepackaged patterns and components

GRIDS

Uses classes in HTML <div class=“col-md-5”> Add more classes to

specify size at different screen widths.

Uses rules in CSS @include col-span(5) Add media queries to

specify sizes at different screen widths.

GRIDS (FIXED)

Bootstrap: ü  Responsive out of the box.

Neat: ü  Needs additional media queries. ü  Requires use of the “omega” fix.

GRIDS (RESPONSIVE)

// Change the grid settings $column: 90px; $gutter: 30px; $grid-columns: 10; $max-width: em(1088); // Define your breakpoints $tablet: new-breakpoint(max-width 768px 8); $mobile: new-breakpoint(max-width 480px 4);

CUSTOM GRIDS IN NEAT

Bootstrap pollutes your HTML

Limited responsive

design is built in. Huge community Docs appear up to date

Neat pollutes your CSS (and HTML)

Requires extra fixes for

responsive design. Small community

Docs seem outdated

GRIDS (CONCLUSION)

Bootstrap: 1.  Choose components 2.   Download files 3.   Link the files in your

HTML

SETUP

Bourbon: 1.  Install gems for SASS and Bourbon 2.   Use gem to install Bourbon library 3.   Import Bourbon in your CSS 4.   Link output CSS in your HTML 5.   Set up a “watch” to automatically

convert SCSS to CSS files Done!

Refills:

PATTERNS AND COMPONENTS

Bootstrap:

Bootstrap: ü  Installs all by default ü  Can remove unused

patterns with custom download

ü  More options for customization

ü  Prebuilt base template

Refills: ü  No additional install

required ü  Requires bourbon, neat,

bitters ü  Copy paste patterns as

needed ü  Simpler modular code

OVERVIEW:

SIMILARITIES

Generally adopted patterns: Tabs, Buttons, Breadcrumbs, Nav, Form fields

Similar components:

Modals, Accordion, Pagination

BOOTSTRAP: MODAL

ü Dynamic content by button ü Custom Events ü Different sizes

REFILLS: BROWSER VIEW

REFILLS: DEVICE VIEW

REFILLS: MAP

REFILLS: PARALLAX WINDOW

BOOTSTRAP: GLYPHICONS

BOOTSTRAP: SCROLLSPY

BOOTSTRAP: CAROUSEL

Bootstrap Bitters

SCAFFOLDING

ü  Default typography, form fields, colors, etc. ü  Browser reset, for more consistent experience

ü  Bootstrap uses normalize.css ü  Thoughtbot has Bitters

WHAT DOES SCAFFOLDING DO FOR YOU?

Use Bootstrap When: ü  Clients are not techies ü  Support is important ü  Longevity ü  Starting from scratch

CONCLUSION

Use Thoughtbot Products When: ü  Clean HTML ü  SASS is OK! ü  Command line familiarity ü  You can DIY! ü  Sweet parallax! ü  Grid not set in stone… ü  Existing site

CONCLUSION (CONTINUED)

THANK YOU!

(Questions?)

Bourbon Docs - bourbon.io Neat Docs – neat.bourbon.io Bitters Docs – bitters.bourbon.io Refills Docs – refills.bourbon.io Bootstrap docs – getbootstrap.com

Intro video to Thoughtbot CSS products: https://www.youtube.com/watch?v=8ItNE_DX6Cc

RESOURCES