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
540
Bootstrap
Design for Developers
Patrick Van Stee
August 28, 2013
Tweet
Share
More Decks by Patrick Van Stee
See All by Patrick Van Stee
Raft: Consensus for Rubyists
vanstee
127
5.5k
Elixir and Ecto
vanstee
4
570
HTTP API Design for iOS Applications
vanstee
11
380
Consensus: An Introduction to Raft
vanstee
22
2.1k
Convergent Replicated Data Types
vanstee
4
460
Pour Over Brewing Method
vanstee
1
130
Celluloid & DCell
vanstee
4
280
Map Reduce & Ruby
vanstee
10
500
Other Decks in Programming
See All in Programming
Computer Vision Seminar 1/コンピュータビジョンセミナーvol.1 OpenCV活用
fixstars
0
170
Isar勉強会
hoddy3190
0
470
モデルの定義に基づくバリデーションを実現するためのpydantic入門
daikikatsuragawa
0
120
一口目から美味しいReactのスルメ本🦑
taro28
1
380
NestJS_meetup_atamaplus
atamaplus
0
210
ふんわり理解するcontext
rukiadia
1
180
レビュー駆動学習のススメ_StaPy#83
soogie
0
320
動画合成アーキテクチャを実装してみて
satorunooshie
0
550
ECサイトの脆弱性診断をいい感じにやりたい/OWASPKansaiNight_LT1_220727
owaspkansai
0
290
閱讀原始碼 - 再戰十年的 jQuery
eddie
1
290
Rust、何もわからない...#3
estie
0
160
話題の AlloyDB は本当に凄いデータベースなのでプレビューを使い倒した #devio2022
maroon1st
0
13k
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
107
16k
What's new in Ruby 2.0
geeforr
335
30k
Gamification - CAS2011
davidbonilla
75
3.9k
Statistics for Hackers
jakevdp
782
210k
The Invisible Side of Design
smashingmag
290
48k
Mobile First: as difficult as doing things right
swwweet
213
7.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.3k
What’s in a name? Adding method to the madness
productmarketing
11
1.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
21
1.4k
KATA
mclloyd
7
8.8k
The Brand Is Dead. Long Live the Brand.
mthomps
46
2.7k
The Mythical Team-Month
searls
210
39k
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