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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Twitter Bootstrap Workshop: Fluent 2013

  • 4,114 views
Published

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:
http://jenkramer.org/fluent-2013-workshop

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,114
On SlideShare
0
From Embeds
0
Number of Embeds
15

Actions

Shares
Downloads
76
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1.  Jen Kramer • Fluent 2013 • May 28, 2013
  • 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. Need to convince the boss?www.jenkramer.org • jen@jenkramer.org
  • 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. mashable.com/2013/01/08/tablets-outsell-notebooks/www.jenkramer.org • jen@jenkramer.org
  • 6. www.jenkramer.org • jen@jenkramer.org
  • 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.  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.  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.  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.  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.  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. getbootstrap.com foundation.zurb.com15 More Responsive CSS Frameworks Worth ConsideringFramework Fight: Zurb Foundation vs Twitter Bootstrapwww.jenkramer.org • jen@jenkramer.org
  • 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. http://jenkramer.org/fluent-2013-workshop : Files, software links, and examples herewww.jenkramer.org • jen@jenkramer.org
  • 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