Making Peace with Twitter Bootstrap

Making Peace with
Twitter Bootstrap
Melanie Archer
HTML5 Developer Conference
San Francisco, CA
April 2013
Wednesday, March 27, 2013 1

Who’s talking?

Web developer
@mejarc
http://twobanjos.com


Who’s talking?

Slide URL:
http://slidesha.re/Wuboo4


Why bother?

You will have
to deal with it

Photo: Bundesarchiv, B 145 Bild-F024624-0004 / Gräﬁngholt, Detlef / CC-BY-SA, via Wikimedia Commons

Problems

Bootstrap Bloat


Problems

Bootstrap Bloat
Bootstrap’s Class-itis


Problems
Bootstrap Bloat
Bootstrap: inﬂexible


PROBLEM


Bootstrap Bloat

Photo: http://www.ﬂickr.com/photos/wanderlost63


Bootstrap Bloat

The problem might
not be with Bootstrap


Fix


Strategies

Customize download
Customize @import


Downloading

The least, ﬁrst


git clone
https://github.com/
twitter/bootstrap.git


Using LESS

Delete unwanted
@import


cp bootstrap.less my-bootstrap.less


gem ‘twitter-bootstrap-rails’


gem ‘therubyracer’
gem ‘less-rails’
gem ‘twitter-bootstrap-rails’


Using bower or npm

More LESS


bower install bootstrap


cp components/bootstrap/bootstrap.less ...


npm install twitter-bootstrap-node


cp vendor/bootstrap/less/bootstrap.less ...


Using SASS

Delete unwanted
@import


gem 'bootstrap-sass'


$ cd `bundle show bootstrap-sass`
$ cd vendor/assets/stylesheets
$ cp bootstrap.scss ...
$ cp bootstrap/bootstrap.scss ...


git clone
https://github.com/jlong/sass-
twitter-bootstrap.git


yo webapp


Would you like to include
Twitter Bootstrap for
Sass? (Y/n) Y


Using Initializr


Treating Bootstrap Bloat

Use Bootstrap in LESS/
SASS components

Copy bootstrap.*

Revise your copy

PROBLEM



Photo: http://www.ﬂickr.com/photos/dukeyearlook


What you want


! ! <div class="page">
! ! ! <header class="global">
! ! ! ! <h1>My Semantic Markup Fantasy
</h1>
! ! ! </header>
! ! ! <nav class="global">
! ! ! ! <ul>
! ! ! ! ! <li class="active">
! ! ! ! ! ! <a href="#article1">
! ! ! ! ! ! ! Article 1


What you use


! ! <div class="container">
! ! ! <div class="row">
! ! ! ! <div class="span8 page-header"
id="header">
! ! ! ! ! ! <h1>
My Presentational Markup Reality
</h1>
! ! ! ! </div>
! ! ! </div>
! ! ! <div class="row">
! ! ! ! <div class="span12" id="nav">
! ! ! ! ! <ul class="span8 nav nav-pills">
! ! ! ! ! ! <li class="active">
! ! ! ! ! ! ! <a href="#article1">
! ! ! ! ! ! ! ! Article 1


Fix


What you want


! ! <div class="page">
! ! ! <header class="global">
! ! ! ! <h1>My Semantic Markup Fantasy
</h1>
! ! ! </header>
! ! ! <nav class="global">
! ! ! ! <ul>
! ! ! ! ! <li class="active">
! ! ! ! ! ! <a href="#article1">
! ! ! ! ! ! ! Article 1


@import "mixins.less";


Treating Bootstrap’s Class-itis

@import Bootstrap’s
mixins or style rules
Use these rules for your
own selectors


PROBLEM


Bootstrap: inﬂexible?

Photo: http://www.ﬂickr.com/photos/walkingsf


The Plan

Photo: http://www.ﬂickr.com/photos/telstar


The Result

Photo: http://www.ﬂickr.com/photos/caseorganic


!important


.alt {
margin: 10px 5px;
}

.alt.exception {
margin-top: 18px;
}

.alt.exception.just-this-one-time {
margin-top: 0;
}


Fix


New process

No more PSDs


//
// Variables
// --------------------------------------------------

// Global values
// --------------------------------------------------

// Grays
// -------------------------
@black: #000;
@grayDarker: #222;
@grayDark: #333;
@gray: #555;


builtwithbootstrap.com
expo.getbootstrap.com


Make peace

Take only what you
need


Make peace

Use your class names


Make peace

Design with Bootstrap,
not against it


☮

Thanks

Bill Fisher
Dave Nugent
Michael Knowles
Angel Inokon

Questions


More
BVision, “Please stop embedding Bootstrap classes in your
HTML”
http://ruby.bvision.com/blog/please-stop-embedding-
bootstrap-classes-in-your-html

Roberto Soares, “Integrating Twitter Bootstrap with Ruby
on Rails”
http://blog.robertosoares.me/blog/2012/08/17/
integrating-twitter-bootstrap-with-ruby-on-rails/


More

Mario Noble, “Getting started with SCSS and Bootstrap”
http://www.slideshare.net/marionoble/getting-started-
with-scss-and-bootstrap

Sean Brewer, “How-To: Awesome Web Design with Twitter
Bootstrap”
http://saidigital.co/customize-twitter-bootstrap-4216/


More
Ash Tewari, “Bootstrap With LESS”
http://blog.appliedis.com/2013/02/04/bootstrap-with-
less/

Pat Shaughnessy, “Twitter Bootstrap, Less, and Sass:
Understanding Your Options for Rails 3.1”
http://rubysource.com/twitter-bootstrap-less-and-sass-
understanding-your-options-for-rails-3-1


Making Peace with Twitter Bootstrap

Recomendados

Recomendados

Más contenido relacionado

Último

Último (20)

Destacado

Destacado (20)

Making Peace with Twitter Bootstrap