Making Peace with Twitter Bootstrap

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

description

Presentation at the April 2013 HTML5 Dev Conf, San Francisco, CA by Melanie Archer.

Transcript of Making Peace with Twitter Bootstrap

Page 1: Making Peace with Twitter Bootstrap

Melanie ArcherHTML5 Developer Conference

San Francisco, CAApril 2013

Making Peace with Twitter Bootstrap

1Wednesday, March 27, 2013

Page 2: Making Peace with Twitter Bootstrap

Web developer

@mejarc

http://twobanjos.com

Who’s talking?

2Wednesday, March 27, 2013

Page 3: Making Peace with Twitter Bootstrap

Who’s talking?

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

3Wednesday, March 27, 2013

Page 4: Making Peace with Twitter Bootstrap

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

Page 5: Making Peace with Twitter Bootstrap

Problems

Bootstrap Bloat

5Wednesday, March 27, 2013

Page 6: Making Peace with Twitter Bootstrap

Problems

Bootstrap Bloat

Bootstrap’s Class-itis

6Wednesday, March 27, 2013

Page 7: Making Peace with Twitter Bootstrap

Problems

Bootstrap Bloat

Bootstrap’s Class-itis

Bootstrap: inflexible

7Wednesday, March 27, 2013

Page 8: Making Peace with Twitter Bootstrap

PROBLEM

8Wednesday, March 27, 2013

Page 9: Making Peace with Twitter Bootstrap

Bootstrap Bloat

Photo: http://www.flickr.com/photos/wanderlost63

9Wednesday, March 27, 2013

Page 10: Making Peace with Twitter Bootstrap

The problem might not be with Bootstrap

Bootstrap Bloat

10Wednesday, March 27, 2013

Page 11: Making Peace with Twitter Bootstrap

Fix

11Wednesday, March 27, 2013

Page 12: Making Peace with Twitter Bootstrap

Strategies

Customize download

Customize @import

12Wednesday, March 27, 2013

Page 13: Making Peace with Twitter Bootstrap

Downloading

The least, first

13Wednesday, March 27, 2013

Page 15: Making Peace with Twitter Bootstrap

Using LESS

Delete unwanted @import

15Wednesday, March 27, 2013

Page 16: Making Peace with Twitter Bootstrap

cp bootstrap.less my-bootstrap.less

16Wednesday, March 27, 2013

Page 17: Making Peace with Twitter Bootstrap

gem ‘twitter-bootstrap-rails’

17Wednesday, March 27, 2013

Page 18: Making Peace with Twitter Bootstrap

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

18Wednesday, March 27, 2013

Page 19: Making Peace with Twitter Bootstrap

Using bower or npm

More LESS

19Wednesday, March 27, 2013

Page 20: Making Peace with Twitter Bootstrap

bower install bootstrap

20Wednesday, March 27, 2013

Page 21: Making Peace with Twitter Bootstrap

cp components/bootstrap/bootstrap.less ...

21Wednesday, March 27, 2013

Page 22: Making Peace with Twitter Bootstrap

npm install twitter-bootstrap-node

22Wednesday, March 27, 2013

Page 23: Making Peace with Twitter Bootstrap

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

23Wednesday, March 27, 2013

Page 24: Making Peace with Twitter Bootstrap

Using SASS

Delete unwanted @import

24Wednesday, March 27, 2013

Page 25: Making Peace with Twitter Bootstrap

gem 'bootstrap-sass'

25Wednesday, March 27, 2013

Page 26: Making Peace with Twitter Bootstrap

$ cd `bundle show bootstrap-sass`

$ cd vendor/assets/stylesheets

$ cp bootstrap.scss ...

$ cp bootstrap/bootstrap.scss ...

26Wednesday, March 27, 2013

Page 28: Making Peace with Twitter Bootstrap

yo webapp

28Wednesday, March 27, 2013

Page 29: Making Peace with Twitter Bootstrap

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

29Wednesday, March 27, 2013

Page 30: Making Peace with Twitter Bootstrap

Using Initializr

30Wednesday, March 27, 2013

Page 31: Making Peace with Twitter Bootstrap

<link href=”[CDN]/bootstrap.css” />

31Wednesday, March 27, 2013

Page 32: Making Peace with Twitter Bootstrap

<link href=”[CDN]/bootstrap.css” />

32Wednesday, March 27, 2013

Page 33: Making Peace with Twitter Bootstrap

Treating Bootstrap Bloat

Revise your copy

Use Bootstrap in LESS/SASS components

Copy bootstrap.*

33Wednesday, March 27, 2013

Page 34: Making Peace with Twitter Bootstrap

PROBLEM

34Wednesday, March 27, 2013

Page 35: Making Peace with Twitter Bootstrap

Bootstrap’s Class-itis

Photo: http://www.flickr.com/photos/dukeyearlook

35Wednesday, March 27, 2013

Page 36: Making Peace with Twitter Bootstrap

What you want

36Wednesday, March 27, 2013

Page 37: Making Peace with Twitter Bootstrap

!!<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

Page 38: Making Peace with Twitter Bootstrap

What you use

38Wednesday, March 27, 2013

Page 39: Making Peace with Twitter Bootstrap

! ! <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

Page 40: Making Peace with Twitter Bootstrap

Fix

40Wednesday, March 27, 2013

Page 41: Making Peace with Twitter Bootstrap

What you want

41Wednesday, March 27, 2013

Page 42: Making Peace with Twitter Bootstrap

!!<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

Page 43: Making Peace with Twitter Bootstrap

@import "mixins.less";

43Wednesday, March 27, 2013

Page 44: Making Peace with Twitter Bootstrap

Treating Bootstrap’s Class-itis

@import Bootstrap’s mixins or style rules

Use these rules for your own selectors

44Wednesday, March 27, 2013

Page 45: Making Peace with Twitter Bootstrap

PROBLEM

45Wednesday, March 27, 2013

Page 46: Making Peace with Twitter Bootstrap

Bootstrap: inflexible?

Photo: http://www.flickr.com/photos/walkingsf

46Wednesday, March 27, 2013

Page 47: Making Peace with Twitter Bootstrap

The Plan

Photo: http://www.flickr.com/photos/telstar

47Wednesday, March 27, 2013

Page 48: Making Peace with Twitter Bootstrap

The Result

Photo: http://www.flickr.com/photos/caseorganic

48Wednesday, March 27, 2013

Page 49: Making Peace with Twitter Bootstrap

!important

49Wednesday, March 27, 2013

Page 50: Making Peace with Twitter Bootstrap

.alt { margin: 10px 5px;}

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

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

50Wednesday, March 27, 2013

Page 51: Making Peace with Twitter Bootstrap

Fix

51Wednesday, March 27, 2013

Page 52: Making Peace with Twitter Bootstrap

New process

No more PSDs

52Wednesday, March 27, 2013

Page 53: Making Peace with Twitter Bootstrap

53Wednesday, March 27, 2013

Page 54: Making Peace with Twitter Bootstrap

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

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

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

54Wednesday, March 27, 2013

Page 55: Making Peace with Twitter Bootstrap

builtwithbootstrap.comexpo.getbootstrap.com

55Wednesday, March 27, 2013

Page 56: Making Peace with Twitter Bootstrap

Make peace

Take only what you need

56Wednesday, March 27, 2013

Page 57: Making Peace with Twitter Bootstrap

Make peace

Use your class names

57Wednesday, March 27, 2013

Page 58: Making Peace with Twitter Bootstrap

Make peace

Design with Bootstrap, not against it

58Wednesday, March 27, 2013

Page 59: Making Peace with Twitter Bootstrap

☮59Wednesday, March 27, 2013

Page 60: Making Peace with Twitter Bootstrap

Thanks

Bill Fisher

Dave Nugent

Michael Knowles

Angel Inokon60Wednesday, March 27, 2013

Page 61: Making Peace with Twitter Bootstrap

Questions

61Wednesday, March 27, 2013