A brief presentation about Bootstrap by Twitter. Talking about grid system, responsive design and how to generate a project featured angularjs and bootstrap with SASS.

1. INTRODUCING
BOOTSTRAP
THE MOST FAMOUS FRONT-END FRAMEWORK
Created by Jesse Chen

2. ABOUT ME
Career Life
Visual designer in the beginning
Then learned ActionScript 3 (animation, interactive movie)
Simple HTML and Javascript
Front-end developer @ KKBOX
Personal Life
Everything except coding (which is not good :p)

3. BOOTSTRAP IS...
It might be the best 'booting' framework (in terms of UI) for
your application.
Created by Twitter for consistency between their every
project.

4. WHY BOOTSTRAP?
In June 2014 it was the No.1 project on GitHub
Compare with 2.3.2, now it's MOBILE FIRST
In 2.3.2, some mobile feature is optional
Better multi screen size scenario

5. RESPONSIVE GRID SYSTEM
container, container-fluid
row
col-xs-*, col-sm-*, col-md-*, col-lg-*
By default, a row includes 12 columns, with 15px padding on
both side.

6. CONCEPT

7. COLUMN IN RESPONSIVE WAY
demo-rc.html

8. RESPONSIVE DESIGN
Apply some styles when screen is between a specific size
screen-xs(480px), screen-sm(768px), screen-md(992px),
screen-lg(1200px)
media
media (min-width: $screen-sm-min, max-width: $screen-md-max) {
// custom style when screen size is between sm and md
}
.visible-{screen-size}, .hide-{screen-size}

9. PLAYGROUND IS READY
After establish fundamental layout, feel free to setup things
inside.
Enchanted native HTML tags
Components
Javascript enhanced components

10. ANOTHER OPTION
Foundation

11. SPECIAL FEATURES
Block grid
Offcanvas (better solution for responsive navigation)
Clearing Lightbox
Range Slider
Abide Validation
Equalizer

12. STILL BOOTSTRAP
If you think your hand is not dirty enough

13. DEMO - SETUP BOOTSTRAP
Make it with
angularjs
Generated by Yeoman
SASS extension
Overwrite default variable
Define custom classes, mixin, etc...

14. THANK YOU
Any question?