Your SlideShare is downloading. ×
Twitter Bootstrap Workshop: Fluent 2013
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Twitter Bootstrap Workshop: Fluent 2013


Published on

Slides for the start of the Fluent 2013 workshop on Bootstrap, …

Slides for the start of the Fluent 2013 workshop on Bootstrap,

Get the code and examples that go with this workshop here:

Published in: Technology

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1.  Jen Kramer • Fluent 2013 • May 28, 2013
  • 2.  Download 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. Need to convince the boss? •
  • 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.” •
  • 5. •
  • 6. •
  • 7.  Build a separate mobile-compatible website ormobile app (or both) Responsive Design A comparison of methodsfor building mobile-optimized •
  • 8.  Defined by three characteristicso Flexible grid-based layouto Images that resizeo Media queries (CSS3) •
  • 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 •
  • 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, •
  • 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: •
  • 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) •
  • 13. foundation.zurb.com15 More Responsive CSS Frameworks Worth ConsideringFramework Fight: Zurb Foundation vs Twitter •
  • 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 •
  • 15.  : Files, software links, and examples •
  • 16. Jen KramerWaltham, MAPhone: 802-257-2657jen@jenkramer.orgwww.jenkramer.orgTwitter: @jen4webFacebook: • jen@jenkramer.orgSlides available files available