Making peace with Twitter Bootstrap - HTML5 DevCon 2013

Making peace with Twitter Bootstrap
slides on slideshare: slidesha.re/Wuboo4

using a css framework like bootstrap does not absolve you form having to learn css

Bootstrap issues
1. too bloated, too many lines css
fix: customize download; use customize link.
  You can always come back later and get more if you need it.
  Just get what you need

fix: customize @import when using in less/saas; delete imports. See bootstrap.less
  make your own copy of bootstrap.less and you can take imports out and it will still work
  (but keep a copy of the original)

Saas - twitter bootstrap not available in saas and need to go through a 3rd party.

Yoeman - can include for you.

2. bootstrap Class-itis
bootstrap requies alot of classes, some not named as you'd like
there's alot of row, span...it's not semantic, very tableized
plus if you take out bootstrap you've alot of markup changes to remove those classes

fix: define your own style classnames and rules which you use instead of bootstrap classnames
  you abstract twitter bootstrap out
  she had some cool examples of these rules in the presentation


3. its too inflexible e.g. locking into grid system
bootstrap is highly opinionated, it has alot of rules
people use !important to override bootstrap...avoid that, use real selectors

if there is no style guide then you'll probably end up with too many disparate css rules and exceptions

fix: fix your process, you need designers who work consistently with bootstrap
  get consistency going
  design with bootstrap in mind, not against it....can't design a PSD in a vaccum


Reference: bower

Options to Photoshop: search "design with twitter bootstrap"

Bootstrap galleries: builtwithbootstrap.com