Introduction to Twitter Bootstrap

Pragnesh Vaghela | @technologythree | technologythree.com

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 content

2. 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 site's user experience

@ 2013 Technology Three 2

Google’s recommended configuration

Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device

@ 2013 Technology Three 3

Is it that easy?

1. don’t underestimate the amount of time it takes to build a responsive site

2. it’s painstaking design and user experience work upfront

3. need to consider all iterations device type, screen size, orientation – portrait, landscape

4. took Time.com 9 months to redesign start to finish

5. cost Fathead $250,000 - 1,500 staff hours over 3 months

@ 2013 Technology Three 4

Twitter Bootstrap

1. 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 CSS

2. built at Twitter by @mdo and @fat

3. code licensed under Apache License v2.0

@ 2013 Technology Three 5

Bootstrap features

1. 12-column responsive grid

2. dozens of components

3. javaScript plugins

4. typography

5. form controls

6. web-based customizer

@ 2013 Technology Three 6

12-column Responsive Grid

1. 940px wide container without responsive features enabled

2. with responsive CSS grid adapts to be 724px and 1170px wide depending on your viewport

3. below 767px viewports, the columns become fluid and stack vertically

4. media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around

@ 2013 Technology Three 7

min-width and max-width

Supported Devices

Supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions

@ 2013 Technology Three 8

Responsive Utility Classes

Has utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device)

@ 2013 Technology Three 9

Dozens of Reusable Components

1. dropdowns

2. button groups and dropdowns

3. navbars

4. breadcrumbs

5. pagination

6. typography

7. thumbnails, alerts, progress bars and more

@ 2013 Technology Three 10

13 custom jQuery plugins

plugins can be included individually or all at once

1. transitions

2. modals

3. dropdown

4. scrollspy

5. tab

6. tooltip

7. popover

8. alert, button, collapse, carousel, typeahead and affix

@ 2013 Technology Three 11

Thank You

Pragnesh Vaghela | @technologythree | technologythree.com