making peace with twitter bootstrap
Post on 13-May-2015
8.902 Views
Preview:
DESCRIPTION
TRANSCRIPT
Melanie ArcherHTML5 Developer Conference
San Francisco, CAApril 2013
Making Peace with Twitter Bootstrap
1Wednesday, March 27, 2013
Web developer
@mejarc
http://twobanjos.com
Who’s talking?
2Wednesday, March 27, 2013
Who’s talking?
Slide URL:http://slidesha.re/Wuboo4
3Wednesday, March 27, 2013
Why bother?
You will have to deal with it
Photo: Bundesarchiv, B 145 Bild-F024624-0004 / Gräfingholt, Detlef / CC-BY-SA, via Wikimedia Commons
4Wednesday, March 27, 2013
Problems
Bootstrap Bloat
5Wednesday, March 27, 2013
Problems
Bootstrap Bloat
Bootstrap’s Class-itis
6Wednesday, March 27, 2013
Problems
Bootstrap Bloat
Bootstrap’s Class-itis
Bootstrap: inflexible
7Wednesday, March 27, 2013
PROBLEM
8Wednesday, March 27, 2013
Bootstrap Bloat
Photo: http://www.flickr.com/photos/wanderlost63
9Wednesday, March 27, 2013
The problem might not be with Bootstrap
Bootstrap Bloat
10Wednesday, March 27, 2013
Fix
11Wednesday, March 27, 2013
Strategies
Customize download
Customize @import
12Wednesday, March 27, 2013
Downloading
The least, first
13Wednesday, March 27, 2013
git clone https://github.com/twitter/bootstrap.git
14Wednesday, March 27, 2013
Using LESS
Delete unwanted @import
15Wednesday, March 27, 2013
cp bootstrap.less my-bootstrap.less
16Wednesday, March 27, 2013
gem ‘twitter-bootstrap-rails’
17Wednesday, March 27, 2013
gem ‘therubyracer’gem ‘less-rails’ gem ‘twitter-bootstrap-rails’
18Wednesday, March 27, 2013
Using bower or npm
More LESS
19Wednesday, March 27, 2013
bower install bootstrap
20Wednesday, March 27, 2013
cp components/bootstrap/bootstrap.less ...
21Wednesday, March 27, 2013
npm install twitter-bootstrap-node
22Wednesday, March 27, 2013
cp vendor/bootstrap/less/bootstrap.less ...
23Wednesday, March 27, 2013
Using SASS
Delete unwanted @import
24Wednesday, March 27, 2013
gem 'bootstrap-sass'
25Wednesday, March 27, 2013
$ cd `bundle show bootstrap-sass`
$ cd vendor/assets/stylesheets
$ cp bootstrap.scss ...
$ cp bootstrap/bootstrap.scss ...
26Wednesday, March 27, 2013
git clone https://github.com/jlong/sass-twitter-bootstrap.git
27Wednesday, March 27, 2013
yo webapp
28Wednesday, March 27, 2013
Would you like to include Twitter Bootstrap for Sass? (Y/n) Y
29Wednesday, March 27, 2013
Using Initializr
30Wednesday, March 27, 2013
<link href=”[CDN]/bootstrap.css” />
31Wednesday, March 27, 2013
<link href=”[CDN]/bootstrap.css” />
32Wednesday, March 27, 2013
Treating Bootstrap Bloat
Revise your copy
Use Bootstrap in LESS/SASS components
Copy bootstrap.*
33Wednesday, March 27, 2013
PROBLEM
34Wednesday, March 27, 2013
Bootstrap’s Class-itis
Photo: http://www.flickr.com/photos/dukeyearlook
35Wednesday, March 27, 2013
What you want
36Wednesday, March 27, 2013
!!<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
37Wednesday, March 27, 2013
What you use
38Wednesday, March 27, 2013
! ! <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
39Wednesday, March 27, 2013
Fix
40Wednesday, March 27, 2013
What you want
41Wednesday, March 27, 2013
!!<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
42Wednesday, March 27, 2013
@import "mixins.less";
43Wednesday, March 27, 2013
Treating Bootstrap’s Class-itis
@import Bootstrap’s mixins or style rules
Use these rules for your own selectors
44Wednesday, March 27, 2013
PROBLEM
45Wednesday, March 27, 2013
Bootstrap: inflexible?
Photo: http://www.flickr.com/photos/walkingsf
46Wednesday, March 27, 2013
The Plan
Photo: http://www.flickr.com/photos/telstar
47Wednesday, March 27, 2013
The Result
Photo: http://www.flickr.com/photos/caseorganic
48Wednesday, March 27, 2013
!important
49Wednesday, March 27, 2013
.alt { margin: 10px 5px;}
.alt.exception { margin-top: 18px;}
.alt.exception.just-this-one-time { margin-top: 0;}
50Wednesday, March 27, 2013
Fix
51Wednesday, March 27, 2013
New process
No more PSDs
52Wednesday, March 27, 2013
53Wednesday, March 27, 2013
//// Variables// --------------------------------------------------
// Global values// --------------------------------------------------
// Grays// -------------------------@black: #000;@grayDarker: #222;@grayDark: #333;@gray: #555;
54Wednesday, March 27, 2013
builtwithbootstrap.comexpo.getbootstrap.com
55Wednesday, March 27, 2013
Make peace
Take only what you need
56Wednesday, March 27, 2013
Make peace
Use your class names
57Wednesday, March 27, 2013
Make peace
Design with Bootstrap, not against it
58Wednesday, March 27, 2013
☮59Wednesday, March 27, 2013
Thanks
Bill Fisher
Dave Nugent
Michael Knowles
Angel Inokon60Wednesday, March 27, 2013
Questions
61Wednesday, March 27, 2013
MoreBVision, “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/
62Wednesday, March 27, 2013
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/
63Wednesday, March 27, 2013
MoreAsh 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
64Wednesday, March 27, 2013
top related