Twitter Bootstrap Workshop: Fluent 2013

  • 4,004 views
Uploaded 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

More 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,004
On Slideshare
0
From Embeds
0
Number of Embeds
15

Actions

Shares
Downloads
75
Comments
0
Likes
2

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