 Jen Kramer • Fluent 2013 • May 28, 2013
 Download files:www.jenkramer.org/fluent-2013-workshop Can’t get online? Find Hulk orThor and copy files tocomputer (the...
Need to convince the boss?www.jenkramer.org • jen@jenkramer.org
 Smartphone sales to hit 1bn ayear for first time in 2013 “The smartphone is predicted tobecome a mass marketphenomenon ...
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 ormobile app (or both) Responsive Design A comparison of methodsfor buildin...
 Defined by three characteristicso Flexible grid-based layouto Images that resizeo Media queries (CSS3) www.alistapart.c...
 Twitter Bootstrap is aresponsive designframework for building websites and web applications. It is the most popularproj...
 Two grid-based systems, one adaptive, one fully responsive Base CSS includes standardized styling for forms, buttons,im...
 HTML: HTML5 CSS: Minified CSS, one or two files. Uses LESS. Javascript: One minified file, plus link to the latest ver...
 Mobile-first approach Single (responsive) grid system, adding a small grid Dropping support for IE7 and FF 3.6 (and re...
getbootstrap.com foundation.zurb.com15 More Responsive CSS Frameworks Worth ConsideringFramework Fight: Zurb Foundation vs...
 Joomla (open source CMS)integrated Bootstrap intoversion 3. Bootstrap unofficialshowcase Love Bootstrap Bootstrap Exp...
http://jenkramer.org/fluent-2013-workshop : Files, software links, and examples herewww.jenkramer.org • jen@jenkramer.org
Jen KramerWaltham, MAPhone: 802-257-2657jen@jenkramer.orgwww.jenkramer.orgTwitter: @jen4webFacebook: facebook.com/webdesig...
Twitter Bootstrap Workshop: Fluent 2013
Upcoming SlideShare
Loading in...5
×

Twitter Bootstrap Workshop: Fluent 2013

4,368

Published on

Slides for the start of the Fluent 2013 workshop on Bootstrap, http://fluentconf.com/fluent2013/public/schedule/detail/27889

Get the code and examples that go with this workshop here:
http://jenkramer.org/fluent-2013-workshop

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

No Downloads
Views
Total Views
4,368
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
81
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Twitter Bootstrap Workshop: Fluent 2013

  1. 1.  Jen Kramer • Fluent 2013 • May 28, 2013
  2. 2.  Download files:www.jenkramer.org/fluent-2013-workshop Can’t get online? Find Hulk orThor and copy files tocomputer (they are the same) Unzip files on desktop – willbe in a folder calledbootstrap-workshop Software: need editor andLESS compiler. I’m usingSimpLESS
  3. 3. Need to convince the boss?www.jenkramer.org • jen@jenkramer.org
  4. 4.  Smartphone sales to hit 1bn ayear for first time in 2013 “The smartphone is predicted tobecome a mass marketphenomenon this year, withannual shipments soaring to1bn globally for the first time,although a fifth of the deviceswill rarely be used to go online.” “In 2013…the number of activephones with either a touchscreen or an alphabet keyboardto 2bn by the end of the year.”www.jenkramer.org • jen@jenkramer.org
  5. 5. mashable.com/2013/01/08/tablets-outsell-notebooks/www.jenkramer.org • jen@jenkramer.org
  6. 6. www.jenkramer.org • jen@jenkramer.org
  7. 7.  Build a separate mobile-compatible website ormobile app (or both) Responsive Design A comparison of methodsfor building mobile-optimized websiteswww.jenkramer.org • jen@jenkramer.org
  8. 8.  Defined by three characteristicso Flexible grid-based layouto Images that resizeo Media queries (CSS3) www.alistapart.com/articles/responsive-web-design/www.jenkramer.org • jen@jenkramer.org
  9. 9.  Twitter Bootstrap is aresponsive designframework for building websites and web applications. It is the most popularproject in GitHub and isused by NASA and MSNBCamong others.wikipedia.org/wiki/Twitter_Bootstrapwww.jenkramer.org • jen@jenkramer.org
  10. 10.  Two grid-based systems, one adaptive, one fully responsive Base CSS includes standardized styling for forms, buttons,images, headings, navigation systems, etc. jQuery-driven components include dropdown menus, tooltips,popovers, alerts, image carousel, accordion panels, etc.www.jenkramer.org • jen@jenkramer.org
  11. 11.  HTML: HTML5 CSS: Minified CSS, one or two files. Uses LESS. Javascript: One minified file, plus link to the latest version ofjQuery Images: Glyphicons (140 available) as image sprite, light anddark versions Documentation available: getbootstrap.comwww.jenkramer.org • jen@jenkramer.org
  12. 12.  Mobile-first approach Single (responsive) grid system, adding a small grid Dropping support for IE7 and FF 3.6 (and removing hacks tosupport them) Font icons, dropping old PNG icons Redesigned the Carousel, add Panels and List Groups GitHub pull request (they are almost done)www.jenkramer.org • jen@jenkramer.org
  13. 13. getbootstrap.com foundation.zurb.com15 More Responsive CSS Frameworks Worth ConsideringFramework Fight: Zurb Foundation vs Twitter Bootstrapwww.jenkramer.org • jen@jenkramer.org
  14. 14.  Joomla (open source CMS)integrated Bootstrap intoversion 3. Bootstrap unofficialshowcase Love Bootstrap Bootstrap Expo A few big names:o State of Kentuckyo code.NASA (with WordPress)o Michael’s craft storeo Fender guitarso StumbleUpono Salvation Army (Midwest)o Medicare.govo Disquso Deliciouswww.jenkramer.org • jen@jenkramer.org
  15. 15. http://jenkramer.org/fluent-2013-workshop : Files, software links, and examples herewww.jenkramer.org • jen@jenkramer.org
  16. 16. Jen KramerWaltham, MAPhone: 802-257-2657jen@jenkramer.orgwww.jenkramer.orgTwitter: @jen4webFacebook: facebook.com/webdesignjenwww.jenkramer.org • jen@jenkramer.orgSlides available atwww.slideshare.net/jen4webCode files available at:www.jenkramer.org/fluent-2013-workshop
  1. A particular slide catching your eye?

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

×