The document discusses the responsive web design framework Bootstrap. It provides an overview of Bootstrap including its global styles, grid system, responsive layouts, and supported media queries. Bootstrap offers advantages like being easy to get started with, having a great grid system and base styles, extensive components, bundled JavaScript plugins, and good documentation. It also discusses how Bootstrap supports older browsers with tools like Normalize CSS, Html5shiv, Respond JS, and Selectivizr.

1. Responsive Web Design
Allan Huang @ esobi Inc.

2. Agenda


10 Web Design Trends
Bootstrap









Global Style
CSS Grid System
Layouts
Responsive Design
Base CSS
Base Components
JavaScript in Bootstrap
Bootstrap Advantage
Browser Compatible

3. 10 Web Design Trends

Content First


Simplicity of Design Interaction and Content


Efficient, Searchable, Accessible, Multi-Platform
Content
Simplification! Content Accessible and Readable
on Devices
UX Centered Design

UI Design, Visual Styling, Code Performance,
Uptime, Feature Set, Research Methods,
Development Methodologies...

4. 10 Web Design Trends

App Style Interfaces



Unification of Desktop & Mobile into Single Version
SVG & Responsive Techniques


Imitate Mobile App Style and Interfaces
SVG, Web Fonts, Design with Typography, Icon Fonts...
Flat Colors and No more Skeuomorphism

Simplicity, Minimalism, Clear Layouts, App-Style Interfaces,
Design with Typography, Less Decoration, Less
Skeuomorphic Interfaces, Flat Style, Flat Colors

5. 10 Web Design Trends for 2013

Technology Agnostic


Experimentation and innovation in device
sensors and interaction


HTML/ CSS/ JavaScript -> CSS3, SVG, WebGL…
Touch-enabled Interfaces, Device Sensor, SpeechBased...
The Internet of things

Ecosystem of Connected Services, e.g. Smart
Fridge, Smart TV, Smart Watch…

6. Bootstrap

7. Global Style




An CSS framework
based on jQuery
JavaScript framework
Bootstrap version 2.3.2
HTML5 doctype
Declaration
Basic global display,
typography, and link
styles

8. Fixed Grid System


The default grid system
utilizes 12-columns,
making for a 940px
wide container without
responsive features
enabled.
Below 767px viewports,
the columns become
fluid and stack
vertically.

9. Fluid Grid System

The fluid grid system
uses percents instead
of pixels for column
widths with responsive
features enabled.

10. Fixed Layout

Provides a common
fixed-width (and
optionally responsive)
layout with only
class="container"
required.

11. Fluid Layout

Create a fluid, twocolumn page with
class="container-fluid"
— great for applications
and docs.

12. Responsive Design


Include the meta tag — viewport and css file —
bootstrap-responsive.css within head tag
Supported devices

13. Supported Media Query

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

14. Media Query Types and Features

Media Types


all | aural | braille | embossed | handheld | print | projection | screen | tty | tv
Media Features













(max- / min-) width
(max- / min-) height
(max- / min-) device-width
(max- / min-) device-height
orientation: portrait / landscape
aspect-ratio
(max- / min-) device-aspect-ratio
color
color-index
monochrome
(max- / min-) resolution
scan
grid

15. Media Query Examples

16. Responsive Utility CSS Classes


For faster mobile-friendly development, use these
utility classes for showing and hiding content by
device.
Responsive utilities should not be used with tables,
and as such are not supported.

17. Base CSS







Typography
Code
Tables
Forms
Buttons
Images
Icons by Glyphicons

18. Base Components













Button groups
Button dropdown menus
Nav lists
Navbar components
Breadcrumbs
Pagination
Labels and badges
Typographic components
Thumbnails
Alerts
Progress bars
Media Object
Miscellaneous

19. JavaScript in Bootstrap















Transitions
Modal
Dropdowns
ScrollSpy
Togglable tabs
Tooltips
Popovers
Alert messages
Buttons
Alerts
Buttons
Collapse
Carousel
Typeahead
Affix

20. Advantages

Easy to get started


Great grid system


LESS — Dynamic Stylesheet Language
Bootstrap is built on responsive 12-column grids,
layouts and components
Base styling for most HTML elements

All these fundamental HTML elements have been
styled and enhanced with extensible classes

21. Advantages

Extensive list of components


Bundled JavaScript plugins


Styling of every single element follows a
consistent theme
The components are made interactive with the
numerous JavaScript plugins bundled in the
bootstrap package
Good documentation

Provides a great documentation with examples
and demo

22. Browser Compatible

Normalize CSS


Html5shiv JS


Enable use of HTML5 sectioning elements in legacy IE 6-8
Respond JS


Makes browsers render all elements more consistently and
in line with modern standards
A fast & lightweight polyfill for min/max-width CSS3 Media
Queries for IE 6-8
Selectivizr JS

Emulates CSS3 pseudo-classes and attribute selectors in
IE 6-8

23. Reference



10 Web Design Trends for 2013
Bootstrap CSS Framework
6 Reasons to Choose the Bootstrap CSS
Framework

Device pixel density tests


Media Query Snippets
The Absolute Beginners Guide to LESS

Free themes for Twitter Bootstrap

24. Q&A