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
116
4.8k
vanstee
3
540
vanstee
11
350
vanstee
22
1.8k
vanstee
4
360
vanstee
1
120
vanstee
4
260
vanstee
10
470
Other Decks in Programming
See All in Programming
yosuke_furukawa
PRO
14
3.9k
line_developers_tw2
0
720
e10dokup
0
450
kazuki19992
0
450
osyo
1
370
cwozaki
1
1.9k
anchorcable
1
120
daiki1020
0
1.1k
kyoheig3
0
430
makicamel
1
180
dulltz
0
520
viteinfinite
0
200
Featured
See All Featured
ddemaree
274
31k
destraynor
146
19k
destraynor
223
47k
jeffersonlam
328
15k
edds
56
9.3k
paulrobertlloyd
71
3.6k
mongodb
23
3.8k
shpigford
165
19k
yeseniaperezcruz
302
31k
jacobian
255
20k
moore
125
21k
iamctodd
17
1.8k
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