 
Jen Kramer • Northeast PHP • August 16, 2013

Need to convince the boss?
www.jenkramer.org • jen@jenkramer.org
 Smartphone sales to hit 1bn a
year for first time in 2013
 “The smartphone is predicted to
become a mass market
phenome...
mashable.com/2013/01/08/tablets-outsell-notebooks/
www.jenkramer.org • jen@jenkramer.org
www.jenkramer.org • jen@jenkramer.org
 Build a separate mobile-
compatible website or
mobile app (or both)
 Responsive Design
 A comparison of methods
for bu...
 Defined by three characteristics
o Flexible grid-based layout
o Images that resize
o Media queries (CSS3)
 www.alistapa...
 Twitter Bootstrap is a
responsive design
framework for building web
sites and web applications.
 It is the most popular...
 Mobile-first approach
 Single (responsive) grid system, including grid sizing for
<768 px, >768 px, >992 px, and >1200 ...
getbootstrap.com foundation.zurb.com
15 More Responsive CSS Frameworks Worth Considering
Framework Fight: Zurb Foundation ...
 Joomla (open source CMS)
integrated Bootstrap into
version 3.
 Bootstrap unofficial
showcase
 Love Bootstrap
 Bootstr...

http://www.jenkramer.org/twitter-bootstrap-workshop: Files, software links, and examples here
www.jenkramer.org • jen@j...
Jen Kramer
Waltham, MA
Phone: 802-257-2657
jen@jenkramer.org
www.jenkramer.org
Twitter: @jen4web
Facebook: facebook.com/we...
Up & Running with Bootstrap 3
Upcoming SlideShare
Loading in...5
×

Up & Running with Bootstrap 3

10,118

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. This hands-on workshop will get you up and running with Bootstrap in no time.

Published in: Technology
2 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
10,118
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
63
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide

Up & Running with Bootstrap 3

  1. 1.   Jen Kramer • Northeast PHP • August 16, 2013
  2. 2.  Need to convince the boss? www.jenkramer.org • jen@jenkramer.org
  3. 3.  Smartphone sales to hit 1bn a year for first time in 2013  “The smartphone is predicted to become a mass market phenomenon this year, with annual shipments soaring to 1bn globally for the first time, although a fifth of the devices will rarely be used to go online.”  “In 2013…the number of active phones with either a touch screen or an alphabet keyboard to 2bn by the end of the year.” www.jenkramer.org • jen@jenkramer.org
  4. 4. mashable.com/2013/01/08/tablets-outsell-notebooks/ www.jenkramer.org • jen@jenkramer.org
  5. 5. www.jenkramer.org • jen@jenkramer.org
  6. 6.  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 • jen@jenkramer.org
  7. 7.  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
  8. 8.  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
  9. 9.  Mobile-first approach  Single (responsive) grid system, including grid sizing for <768 px, >768 px, >992 px, and >1200 px  Dropping support for IE7 and FF 3.6 (and removing hacks to support them).  Now supporting IE 8 and higher (with some modifications)  Font icons, dropping old PNG icons  Redesigned the Carousel, add Panels and List Groups www.jenkramer.org • jen@jenkramer.org
  10. 10. getbootstrap.com foundation.zurb.com 15 More Responsive CSS Frameworks Worth Considering Framework Fight: Zurb Foundation vs Twitter Bootstrap www.jenkramer.org • jen@jenkramer.org
  11. 11.  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
  12. 12.  http://www.jenkramer.org/twitter-bootstrap-workshop: Files, software links, and examples here www.jenkramer.org • jen@jenkramer.org
  13. 13. 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 Code files available at: www.jenkramer.org/ twitter-bootstrap-workshop
  1. A particular slide catching your eye?

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

×