Bootstrap Fluent 2014

Jen Kramer • O’Reilly Fluent Conference 2014 • March 11, 2014

Quick PowerPoint to provide background on Bootstrap Code a website!

Twitter Bootstrap is a responsive design framework for building web sites and web applications.

It is the most popular project in GitHub and is used by NASA and MSNBC among others.

wikipedia.org/wiki/Twitter_Bootstrap

www.jenkramer.org • jen@jenkramer.org

A fully functional grid system with 4 different sizes. Base CSS includes standardized styling for forms, buttons,

images, headings, navigation systems, etc. CSS customization through LESS or Sass jQuery-driven components include dropdown menus, tooltips,

popovers, alerts, image carousel, accordion panels, etc. Optional icon font for incorporating vector images, distributed

with Bootstrap, 180 icons Distributed under MIT license (prior to 3.1, was Apache 2,

copyright 2013 Twitter)

www.jenkramer.org • jen@jenkramer.org

getbootstrap.com foundation.zurb.com

www.jenkramer.org • jen@jenkramer.org

20 Exceptional CSS Boilerplates and Frameworks

Joomla (open source CMS) integrated Bootstrap into version 3.

Bootstrap unofficial showcase

Love Bootstrap Bootstrap Expo

A few big names: o State of Kentucky o code.NASA (with WordPress) o Michael’s craft store o Fender guitars o StumbleUpon o Salvation Army (Midwest) o Medicare.gov o Disqus o Delicious

www.jenkramer.org • jen@jenkramer.org

Started by Mark Otto and Jacob Thornton, while working at Twitter, as internal tool

Released Bootstrap in 2011 Otto & Thornton left Twitter

in 2012 Otto is now in charge of the

open source project and is adding core team members.

Latest versions of:

Chrome (Mac, Windows, iOS, and Android)

Safari (Mac and iOS only, as Windows has more or less been discontinued)

Firefox (Mac, Windows)

Opera (Mac, Windows)

IE 9 and 10. IE 8 supported with respond.js

Some effort put into accessibility improvements

Includes the Aria codes, screen reader only styles

Joomla has pushed for accessibility since Bootstrap is incorporated in the version 3 CMS

4 grid system: o Extra small always stays

horizontal o Small, medium, large grids

stack after breakpoint

LESS CSS, and now a Sass option as well!

Not much LESS/Sass documentation on Bootstrap site

Less of an expectation that you will work with LESS/Sass

You want to build a responsive front-end quickly.

You need lots of styling out of the box.

You love LESS CSS. You love open source. You hate semicolons in your

JavaScript.

www.jenkramer.org • jen@jenkramer.org

Fruit is Good, in 10 Easy Steps

Jen Kramer Waltham, MA Phone: 802-257-2657 jen@jenkramer.org www.jenkramer.org Twitter: @jen4web Facebook: facebook.com/webdesignjen

www.jenkramer.org • jen@jenkramer.org

Slides available at www.slideshare.net/jen4web lynda.com 7 day free pass: www.lynda.com/freepass/jkramer