Accelerated Web Developmentwith Twitter Bootstrap

Steve Noone – 1/18/2013

Twitter Bootstrap is:A flexible, modern toolset for web layout & design

=

Twitter Bootstrap is:A collection of tools for building web sites

created using HTML, CSS & JavaScript

Bootstrap Includes:

A responsive grid system for layout

Basic templates for UI elements (forms, buttons, navigation, sliders, modals, etc)

A component library (based on jQuery)

Twitter Bootstrap is:Free (as in speech) – Apache 2.0

Twitter Bootstrap is:Used in major, high-traffic websites

And many others…

Twitter Bootstrap is:Compatible with all major browsers

But will likely drop support for IE7 in 2013…

Twitter Bootstrap is:One of many, similar UI frameworks

Twitter Bootstrap is:One of many, similar UI frameworks

Twitter Bootstrap is:The top followed project on GitHub,

the most commonly used, and has the most active developer community.

https://github.com/popular/starred link

http://responsive.vermilion.com/compare.php link

The Bootstrap Grid:

Bootstrap calls this “Scaffolding:”

<div class="row">

<div class="span4">...</div>

<div class="span8">...</div>

</div>

Div elements are used to build rows and columns.Widths and Margins controlled by the framework.Optionally responsive using CSS media queries.

The Bootstrap Grid:Commonly 12 columns by 60px (static)Modified for BBS to 16 columns by 40px (static)Can “nest” grids (like tables or divs)

Optionally:Flexible-width between 724px and 1170pxCan adapt layout (hide/show/resize) based on deviceCan reflow content on resize (or orientation change)

Twitter Bootstrap is:An evolution of existing techniques

Tables Divs Grids Responsive

Responsive Grid Examples:

The Boston Globe link

Responsive Layout Examples

The Boston Globe link

Smashing Magazine link

Microsoft.com link

SONY link

Starbucks link

Responsive Grid Examples:

The Boston Globe link

Responsive = Increased Complexity

Bootstrap Base CSS:Nice-looking default styles for common elements, normalizing most browser and OS rendering errata.

Typography (headlines, body copy, callouts, etc.)Tabular Data (striping, hover, row colors, context)Images (borders, frames, shape masking) Forms (input add-ons, help text, validation, selects)Buttons (basic types, states, size options & icons)

Bootstrap Base CSS:Table Example:

<table class="table table-striped">

…

</table>

Result:

Bootstrap Base CSS:Input example:

<div class="input-prepend input-append">

<span class="add-on">$</span>

<input class="span2" id="appendedPrependedInput" type="text">

<span class="add-on">.00</span>

</div>

Result:

Bootstrap Base CSS:What’s Missing:

File Upload

Multi-Select Replacement

Checkbox/Radio Button Replacement

Resolution-independent icons

Next Steps: Testing & Review

Static Components to Test:twitter.github.com/bootstrap/components.html link :

Button Dropdowns (Parent/Child listings)

Thumbnails (search results)

Alerts & Progress bars

Dynamic Components to Test:twitter.github.com/bootstrap/javascript.html link

Modal popups

Tab panels

Tooltips & Popover Tips

Collapsible content blocks

“Sandboxed” Test Opportunities:

Email and Ad Landing Pages

BBS Style Guide

FSBO Landing Page & sales flow prototyping

L&F State and Property-type pages

Potential Problems

Potential Problems

Introduces another 3rd party dependency

Potential conflicts with existing styles

Limited benefit on very complex pages

Version lock-in for JavaScript Components

Additional QA load for responsive sites