Upload
hoangnhan
View
217
Download
0
Embed Size (px)
Citation preview
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 BITTERS?
Scaffolding for Bourbon projects: ü Styles ü Variables ü Structure ü Compiles into a CSS base
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!
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
ü 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)