Twitter Bootstrap Workshop: Fluent 2013
Upcoming SlideShare
Loading in...5

Twitter Bootstrap Workshop: Fluent 2013



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:



Total Views
Views on SlideShare
Embed Views



13 Embeds 2,706 2089 585 10 6 3 3 2 2 2 1 1 1 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Twitter Bootstrap Workshop: Fluent 2013 Twitter Bootstrap Workshop: Fluent 2013 Presentation Transcript

  •  Jen Kramer • Fluent 2013 • May 28, 2013
  •  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
  • Need to convince the boss? •
  •  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.” •
  • •
  • •
  •  Build a separate mobile-compatible website ormobile app (or both) Responsive Design A comparison of methodsfor building mobile-optimized •
  •  Defined by three characteristicso Flexible grid-based layouto Images that resizeo Media queries (CSS3) •
  •  Twitter Bootstrap is aresponsive designframework for building websites and web applications. It is the most popularproject in GitHub and isused by NASA and MSNBCamong •
  •  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, •
  •  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: •
  •  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) •
  • foundation.zurb.com15 More Responsive CSS Frameworks Worth ConsideringFramework Fight: Zurb Foundation vs Twitter •
  •  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 •
  •  : Files, software links, and examples •
  • Jen KramerWaltham, MAPhone: 802-257-2657jen@jenkramer.orgwww.jenkramer.orgTwitter: @jen4webFacebook: • jen@jenkramer.orgSlides available files available