Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Bootstrap
Patrick Van Stee
August 28, 2013
Programming
8
500
Bootstrap
Design for Developers
Patrick Van Stee
August 28, 2013
Tweet
Share
More Decks by Patrick Van Stee
See All by Patrick Van Stee
vanstee
118
4.9k
vanstee
3
550
vanstee
11
350
vanstee
22
1.8k
vanstee
4
360
vanstee
1
120
vanstee
4
260
vanstee
10
480
Other Decks in Programming
See All in Programming
y__mattu
0
210
dunglas
5
5.8k
daipresents
0
340
77web
2
2.5k
progate
2
520
kaonash
2
1.9k
deepu105
1
190
fei0203018
0
170
ganchan11
0
170
daiki_0816
0
190
daipresents
10
3.6k
etagwerker
1
140
Featured
See All Featured
chriscoyier
683
180k
chrislema
231
16k
jonyablonski
22
1.3k
tanoku
259
24k
dougneiner
56
5.4k
bkeepers
PRO
322
53k
chrislema
173
14k
davidbonilla
70
3.6k
destraynor
221
47k
lemiorhan
628
47k
addyosmani
312
21k
jeffersonlam
330
15k
Transcript
Bootstrap Design for Developers
vanstee Big Nerd Ranch !
None
None
An improved, default style for your webapps
•Framework •Getting Started •Protips
mdo Mark Otto ! fat ! Jacob Thornton
Developed as a framework to encourage consistency
A way to document and share common design patterns
JavaScript Fonts icons HTML examples CSS
Browser Support
None
None
<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Brand</a> </div>
<ul class="nav navbar-nav"> <li><a href="#">Link</a></li> <li class="dropdown open"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> </ul> </li> </ul> </nav>
Responsive Mobile First
None
•Icons •CSS helpers •JavaScript plugins •Community projects
•Framework •Getting Started •Protips
Bootstrap Rails &
Use compiled CSS Use LESS with the asset pipeline or
Asset Pipeline LESS CSS Minified
Gems
•Rewritten using SASS •Rails Engine •Not yet on Bootstrap 3
bootstrap-sass https://github.com/thomas-mcdonald/bootstrap-sass/pull/329
GEMFILE gem 'sass-rails', '~> 3.2' gem 'bootstrap-sass', '~> 2.3.2.1' APPLICATION.CSS
@import "bootstrap"; APPLICATION.JS //= require bootstrap
•Should “just work” •Don’t use therubyracer •Docs are great Heroku
https://devcenter.heroku.com/articles/rails-asset-pipeline
•Also using SASS •Bootstrap 3 •Haven’t used this yet anjlab-bootstrap-rails
•Framework •Getting Started •Protips
Read the docs and play with the examples
•Find variables in the docs •Override before importing •3rd party
themes Customization
APPLICATION.CSS $blue: #5b9cbc $linkColor: $blue $headingsFontFamily: 'Helvetica Neue', Helvetica, Arial,
sans-serif @import "bootstrap";
Checkout the Bootstrap Expo for inspiration expo.getbootstrap.com
Alternatives •Foundation •Skeleton •Gumby
twbs/ bootstrap getbootstrap.com
None