Introducing Twitter Bootstrap
23
Jen Kramer • Ultimate Developer’s Conference • November 21, 2013
-
Upload
jen-kramer -
Category
Technology
-
view
1.581 -
download
0
description
Twitter Bootstrap is one of the most popular responsive design frameworks in use today. What makes it so special? Learn what Bootstrap is, how to configure it to get started, discover the grid system, get an overview of styling and LESS configurations, learn about navigation options and Javascript plugins, and much more.
Transcript of Introducing Twitter Bootstrap
Jen Kramer • Ultimate Developer’s Conference • November 21, 2013
www.jenkramer.org • [email protected] Photo back story
Build a separate mobile-compatible website or mobile app (or both)
Responsive Design A comparison of methods
for building mobile-optimized websites
www.jenkramer.org • [email protected]
Defined by three characteristics o Flexible grid-based layout o Images that resize o Media queries (CSS3)
www.alistapart.com/articles/responsive-web-design/
www.jenkramer.org • [email protected]
Images should change size, based on screen resolution o Load a big image and let it
scale (not good) o Server-side (good) o Client-side: Load several
images and display the one right for this resolution (not good)
o Client-side: let JavaScript decide (better)
Browser reports screen resolution
Based on current width, serve a stylesheet with layout for that width
No JavaScript involved
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 • [email protected]
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 CSS 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 Apache 2, copyright 2013 Twitter (moving
to MIT)
www.jenkramer.org • [email protected]
getbootstrap.com foundation.zurb.com
15 More Responsive CSS Frameworks Worth Considering
www.jenkramer.org • [email protected]
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 • [email protected]
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.
• bootstrap.css • bootstrap.min.css • bootstrap-theme.css • bootstrap-theme.min.css
• glyphicons-halflings-regular.eot • glyphicons-halflings-regular.svg • glyphicons-halflings-regular.ttf • glyphicons-halflings-regular.woff
• bootstrap.js • bootstrap.min.js • Download/link to jquery
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 Not much LESS
documentation on Bootstrap site
Less of an expectation that you will work with LESS
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 • [email protected]
Jen Kramer Waltham, MA Phone: 802-257-2657 [email protected] www.jenkramer.org Twitter: @jen4web Facebook: facebook.com/webdesignjen
www.jenkramer.org • [email protected]
Slides available at www.slideshare.net/jen4web lynda.com 7 day free pass: www.lynda.com/freepass/jkramer
