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

4,264
views

Published on

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

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,264
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
79
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