• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Twitter Bootstrap Workshop: Fluent 2013

Twitter Bootstrap Workshop: Fluent 2013



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

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:



Total Views
Views on SlideShare
Embed Views



13 Embeds 2,610

http://www.jenkramer.org 1996
http://jenkramer.org 584
http://focusedconsulting.com 8
http://www.jenkramer.com 6
http://thejoomlateacher.net 3
http://thejoomlateacher.org 3
http://webcache.googleusercontent.com 2
http://jenkramer.com 2
http://www.thejoomlateacher.com 2
http://thejoomlateacher.com 1
http://www.thejoomlateacher.net 1
http://translate.googleusercontent.com 1
http://www.focusedconsulting.com 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 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
    • 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 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
    • 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 building mobile-optimized websiteswww.jenkramer.org • jen@jenkramer.org
    •  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
    •  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
    •  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
    •  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
    •  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
    • getbootstrap.com foundation.zurb.com15 More Responsive CSS Frameworks Worth ConsideringFramework Fight: Zurb Foundation vs Twitter Bootstrapwww.jenkramer.org • jen@jenkramer.org
    •  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
    • 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/webdesignjenwww.jenkramer.org • jen@jenkramer.orgSlides available atwww.slideshare.net/jen4webCode files available at:www.jenkramer.org/fluent-2013-workshop