0




Jen Kramer • Ultimate Developer’s Conference • November 21, 2013
Photo back story

www.jenkramer.org • jen@jenkramer.org
 Build a separate mobile-

compatible website or
mobile app (or both)
 Responsive Design
 A comparison of methods
for b...
 Defined by three characteristics
o Flexible grid-based layout
o Images that resize
o Media queries (CSS3)

 www.alistap...
 Images should change size,

based on screen resolution
o Load a big image and let it

scale (not good)
o Server-side (go...
 Browser reports screen

resolution
 Based on current width,
serve a stylesheet with
layout for that width
 No JavaScri...
 Twitter Bootstrap is a

responsive design
framework for building web
sites and web applications.
 It is the most popula...
 A fully functional grid system with 4 different sizes.
 Base CSS includes standardized styling for forms, buttons,

ima...
getbootstrap.com

foundation.zurb.com

15 More Responsive CSS Frameworks Worth Considering

www.jenkramer.org • jen@jenkra...
 Joomla (open source CMS)

integrated Bootstrap into
version 3.
 Bootstrap unofficial
showcase
 Love Bootstrap
 Bootst...
 Started by Mark Otto and

Jacob Thornton, while
working at Twitter, as
internal tool
 Released Bootstrap in 2011
 Otto...
•
•
•
•

bootstrap.css
bootstrap.min.css
bootstrap-theme.css
bootstrap-theme.min.css

•
•
•
•

glyphicons-halflings-regula...
Latest versions of:
Chrome (Mac, Windows, iOS, and Android)

Safari (Mac and iOS only, as Windows has more or
less been di...
 Some effort put into

accessibility improvements
 Includes the Aria codes,
screen reader only styles
 Joomla has pushe...
 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...
Jen Kramer
Waltham, MA
Phone: 802-257-2657
jen@jenkramer.org
www.jenkramer.org

Slides available at
www.slideshare.net/jen...
Introducing Twitter Bootstrap
Introducing Twitter Bootstrap
Introducing Twitter Bootstrap
Introducing Twitter Bootstrap
Introducing Twitter Bootstrap
Upcoming SlideShare
Loading in...5
×

Introducing Twitter Bootstrap

1,641

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,641
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
78
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Introducing Twitter Bootstrap"

  1. 1.   Jen Kramer • Ultimate Developer’s Conference • November 21, 2013
  2. 2. Photo back story www.jenkramer.org • jen@jenkramer.org
  3. 3.  Build a separate mobile- compatible website or mobile app (or both)  Responsive Design  A comparison of methods for building mobileoptimized websites www.jenkramer.org • jen@jenkramer.org
  4. 4.  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 • jen@jenkramer.org
  5. 5.  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)
  6. 6.  Browser reports screen resolution  Based on current width, serve a stylesheet with layout for that width  No JavaScript involved
  7. 7.  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
  8. 8.  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 • jen@jenkramer.org
  9. 9. getbootstrap.com foundation.zurb.com 15 More Responsive CSS Frameworks Worth Considering www.jenkramer.org • jen@jenkramer.org
  10. 10.  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
  11. 11.  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.
  12. 12. • • • • 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
  13. 13. 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
  14. 14.  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
  15. 15.  4 grid system: o Extra small always stays horizontal o Small, medium, large grids stack after breakpoint
  16. 16.  LESS CSS  Not much LESS documentation on Bootstrap site  Less of an expectation that you will work with LESS
  17. 17.  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
  18. 18. Jen Kramer Waltham, MA Phone: 802-257-2657 jen@jenkramer.org www.jenkramer.org Slides available at www.slideshare.net/jen4web lynda.com 7 day free pass: www.lynda.com/freepass/jkramer Twitter: @jen4web Facebook: facebook.com/webdesignjen www.jenkramer.org • jen@jenkramer.org
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×