Introduction to Twitter Bootstrap


Published on

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Introduction to Twitter Bootstrap

  1. 1. Introduction toTwitter BootstrapPragnesh Vaghela | @technologythree |
  2. 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. 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. 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 9 months to redesign start to finish5. cost Fathead $250,000 - 1,500 staff hours over 3 months @ 2013 Technology Three 4
  5. 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. 6. Bootstrap features1. 12-column responsive grid2. dozens of components3. javaScript plugins4. typography5. form controls6. web-based customizer @ 2013 Technology Three 6
  7. 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. 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. 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. 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. 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. 12. Thank YouPragnesh Vaghela | @technologythree |