Your SlideShare is downloading. ×
  • Like
Introduction to Twitter Bootstrap
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

Introduction to Twitter Bootstrap

  • 592 views
Published

 

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
    Be the first to like this
No Downloads

Views

Total Views
592
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
21
Comments
0
Likes
0

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. Introduction toTwitter BootstrapPragnesh Vaghela | @technologythree | technologythree.com
  • 2. Why Responsive Design?1. A single URL for a piece of content makes it easier for your users to interact with, share, and link to your content2. No redirection is needed for users to get to the device-optimized view, which reduces loading time. Also, user agent-based redirection is error- prone and can degrade your sites user experience @ 2013 Technology Three 2
  • 3. Google’s recommended configurationSites that use responsive web design, i.e. sites thatserve all devices on the same set of URLs, with eachURL serving the same HTML to all devices and usingjust CSS to change how the page is rendered on thedevice @ 2013 Technology Three 3
  • 4. Is it that easy?1. don’t underestimate the amount of time it takes to build a responsive site2. it’s painstaking design and user experience work upfront3. need to consider all iterations device type, screen size, orientation – portrait, landscape4. took Time.com 9 months to redesign start to finish5. cost Fathead $250,000 - 1,500 staff hours over 3 months @ 2013 Technology Three 4
  • 5. Twitter Bootstrap1. made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS2. built at Twitter by @mdo and @fat3. code licensed under Apache License v2.0 @ 2013 Technology Three 5
  • 6. Bootstrap features1. 12-column responsive grid2. dozens of components3. javaScript plugins4. typography5. form controls6. web-based customizer @ 2013 Technology Three 6
  • 7. 12-column Responsive Grid1. 940px wide container without responsive features enabled2. with responsive CSS grid adapts to be 724px and 1170px wide depending on your viewport3. below 767px viewports, the columns become fluid and stack vertically4. media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width @ 2013 Technology Three 7
  • 8. Supported DevicesSupports a handful of media queries in a singlefile to help make your projects more appropriateon different devices and screen resolutions @ 2013 Technology Three 8
  • 9. Responsive Utility ClassesHas utility classes for showing and hiding content by device.Below is a table of the available classes and their effect on agiven media query layout (labeled by device) @ 2013 Technology Three 9
  • 10. Dozens of Reusable Components1. dropdowns2. button groups and dropdowns3. navbars4. breadcrumbs5. pagination6. typography7. thumbnails, alerts, progress bars and more @ 2013 Technology Three 10
  • 11. 13 custom jQuery pluginsplugins can be included individually or all at once1. transitions2. modals3. dropdown4. scrollspy5. tab6. tooltip7. popover8. alert, button, collapse, carousel, typeahead and affix @ 2013 Technology Three 11
  • 12. Thank YouPragnesh Vaghela | @technologythree | technologythree.com