High level overview of Twitter Bootstrap vs. Zurb Foundation vs. Bourbon delivered to NZ Rails Camp, Feb 2015

1. Vs.
with Random Things!

2. Who?

3. ezrakeddell
Husband / Dad
1337 H4X0R
Digital media designer
Front end developer
ROR advocate
Sportsball lover
ezy
ezy_

4. What?

5. Twitter Boostrap
“Bootstrap is the most popular HTML, CSS, and JS
framework for developing responsive, mobile first projects
on the web.”
77,194
Opinionated framework
June 2014 it was the No.1 project on GitHub
Developed by Mark Otto and Jacob Thornton at Twitter
Released to Open Source in August 2011
https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

6. Zurb Foundation
“The most advanced responsive front-end framework in
the world.”
19,245
Opinionated framework
ZURB is a privately held interaction US design company
V 2.0 first released under MIT License In October 2011
https://en.wikipedia.org/wiki/Foundation_(framework)

7. Bourbon.io
“A simple and lightweight mixin library for Sass.”
5,281
Like Compass
Created by thoughtbot.com
Released under MIT License In 2011
Full framework split into Neat, Bitters and Refills

8. Why?

9. ...because fast is awesome
...because grids and mobile are awesome
...because Bourbon is awesome*
*disclaimer

10. Waht’s in the box?

11. Twitter Boostrap
Glyphicons
Dropdowns
Button groups
Button dropdowns
Input groups
Navs
Navbar
Breadcrumbs
Responsive embed
Wells
Panels
Pagination
Labels
Badges
Jumbotron
Page header
Thumbnails
Alerts
Progress bars
Media object
List group
Javascript
Grid system
Typography
Tables
Forms
Buttons
Images
Helper classes
Responsive utilities
Less
Sass
Mixins

12. Random things!
Your skin is full of salts, loose cells, moisture and other delicious
things flies like to eat, even more so during warm weather.
Look closely and you'll see the fly walking around on your skin with
it's mouth-tube (forgot the name) prodding around on you. That's
the fly eating off you.
Why do flies like landing on our skin?
from Reddit - Xerologic 1845 points 6 months ago

13. Zurb Foundation
Sass
JavaScript
Kitchen Sink
Media Queries
Grid
Block Grid
Interchange
Utility Classes
Right-to-Left Support
Off-canvas JS
Top Bar JS
Icon Bar
Side Nav
Sub Nav
Breadcrumbs
Pagination
Orbit Slider JS
Thumbnails
Clearing Lightbox JS
Flex Video
Forms
Switches
Range Sliders JS
Abide Validation JS
Buttons
Button Groups
Split Buttons JS
Typography
Inline Lists
Labels
Keystrokes
Reveal Modal JS
Alerts JS
Panels
Tooltips JS
Joyride JS
Dropdowns JS
Pricing Tables
Progress Bars
Tables
Accordion JS
Tabs JS

14. Animation
Animation Delay
Animation Direction
Animation Duration
Animation Fill Mode
Animation Iteration Count
Animation Name
Animation Play State
Animation Timing Function
Appearance
Backface Visibility
Background
Background Image
Border Image
Box Sizing
Calc
Columns
Filter
Flexbox
Font Face
Font Feature Settings
HiDPI Media Query
Hyphens
Image Rendering
Keyframes
Linear Gradient
Perspective
Placeholder
Radial Gradient
Selection
Text Decoration
Transform
Transitions
User Select
Bourbon.io
FUNCTIONS
Flex Grid
Golden Ratio
Grid Width
Linear Gradient
Modular Scale
Pixel to Ems
Pixel to Rems
Radial Gradient
Strip Units
Tint & Shade
Unpack
ADD-ONS
Border Color
Border Radius
Border Style
Border Width
Buttons
Clearfix
Directional Property
Ellipsis
Font Stacks
Hide Text
HTML5 Input Types
Inline Block
Margin
Padding
Position
Prefixer
Retina Image
Size
Timing Functions
Triangle
Word Wrap

15. MIXINS
direction-context
display-context
fill-parent
media
omega
outer-container
pad
row
shift
shift-in-context
span-columns
reset-display
reset-layout-direction
reset-all
VARIABLES
disable-warnings
column
gutter
grid-columns
max-width
border-box-sizing
default-feature
default-layout-direction
visual-grid
visual-grid-color
visual-grid-index
visual-grid-opacity
FUNCTIONS
new-breakpoint
Sass Structure
Variables
Grid Settings
Typography
Lists
Forms
PATTERNS
Accordion / Tabs
Cards
Centered Navigation
Comments
etc.
COMPONANATS
Modal
Pagination
Parallax
Progress Bars
Ribbon
Responsive Video Embed
etc.
TYPE SYSTEMS
Neat / Bitters / Refills

16. Size is key

17. 161kb
34kb
130kb 30kb
47kb
Worth mentioning…
css + js .min css + js .min
https://cdnjs.com/

18. Grid structure

19. Twitter Boostrap

20. Zurb Foundation

21. Bourbon Neat grid
Media queries

22. Random things!
Now you can tell how big this presentation is
Here is a banana

23. Pros and cons

24. Twitter Boostrap
Rapid front end development
Trusty grid structure
Works in all modern browsers
"Mobile first" approach as of v3
Saves time debugging and cross browser testing
Big user community
LESS
Gives structure and consistancy for large dev groups
Helps developers - eg. geonet.org.nz and bidbud.co.nz
Lots of starter themes available
Has a range of Jquery plugins
Large overhead at 161kb especially for mobile users
jQuery plugins are limited
They changed their classes and grid structure
No colons in Javascript
Opinionated framework
Customisable but a lot of sites end up looking the same
Late to the SASS party
Jasny bootstrap - default huge and still missing some key
features

25. Angular JS UI (Foundation for apps)
Rapid front end development
Trusty grid structure
Works in all modern browsers
"Mobile first" approach
Saves time debugging and cross browser testing
Native validation styles for forms
LESS and SASS
Gives structure and consistancy for large dev groups
Vanilla look and feel
Comprehensive JS library
Use ems for typography
Largish overhead at 130kb especially for mobile users
Opinionated framework
Zurb Foundation

26. More difficult to compile and setup
I suspect more time spent cross browser testing (unproven)
Smaller user community
Less Stack Overflow
Bourbon Neat grid
Customisable by default
Modular - pick and choose
Invisible so looks professional
Tiny
Great range of JS componants
Semantic - have it your way
Compass philosophy so great for Rails folks
Extensive - Bitters has parallax, ribbon, textures etc.

27. Maintainability

28. Lock in for the ride…
photo credit - OctopusHat - Flickr - CC

29. Pick and choose
photo credit - iirraa - Flickr - CC

30. In summary
questions…

31. FIN