Upload
steve-noone
View
123
Download
3
Tags:
Embed Size (px)
Citation preview
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