When Bootstrap Attacks!

a bit of background...

coursera

a modern web app?

Modern...

+

+

Not so modern...

+

too many bootstraps

Modern App: Bootstrap 2.1

Legacy Codebase: Bootstrap 1, Bootstrap 2.0

A SIMPLE GOAL:

PORT TO BOOTSTRAP 2

⟱

i'll JUST Follow

THE upgrade guide...!

2 days later

1 month later

bring in the recruits!

bootstrapv2athon!

a week of q/a!

FInally, 1 month later...

upgrading css

frameworks shouldn't

 be that hard.

...so why was it?

⟱

my, grandma, what a big codebase you have...

207 *.template.php files

351 *controller.php files

143 *.js files

25 *.css files

class names, class names, everywhere!

HTML, CSS, PHP, PHPed JS

least greppable

class names ever

grep "alert" * -R

80

grep "label" * -R

329

grep "success" * -R

364

grep "info" * -R

1153

BOOTstrap: its js, too!

if i could turn back time....

aka what I'll do differently next time.

⟱

use less spaghetti,

more architecture

...but just one architecture!

use namespaced

bootstrap class names

grep 'tbs-alert' * -R

:%s/tbs-alert/tbs-alert2 * -R

Issue 1287: Prefix Bootstrap classes

Auto-prefixing with Less

Adding Prefixes to Bootstrap CSS classes

DON't use bootstrap

class names directly

 <button class="coursera-submit-button">Sign Up</button>

 .coursera-submit-button
  @extends .btn
  @extends .btn-info
  &:hover
    @extends .btn:hover
    @extends .btn-info:hover

Custom class names via Sass

Stop embedding Bootstrap in your HTML

CSS Architecture

don't use class names in your js libraries

 var defaults = {'prefix.css': ''}
var $toolbar = $(toolbarTemplate({prefix:options['prefix.css']}))

div(class=prefix+"-toolbar", role="toolbar", title="HTML editing toolbar")

new WysiEditor({'prefix.css': 'coursera-wysihtml5'});

 .coursera-wysihtml5
  padding 0

don't use class names

in your js

 <button class="coursera-submit-button">Sign Up</button>
 <script>
  $('.coursera-submit-button').on('click', signUp);
 </script>

vs.

 <button class="coursera-submit-button coursera-submit-js">Sign Up</button>

view.$('.coursera-submit-js').on('click', signUp);

vs.

 <button class="coursera-submit-button" data-js="signup">Sign Up</button>

view.$('form [data-js=signup]').on('click', signUp);

test your frontend

mocha/chai/jsdom:

view.$('.course-forum-thread-showmore').click();
chai.expect(view.$('.course-forum-your-threads-listing tr:visible').size())
   .to.be.equal(25);
chai.expect(view.$('.course-forum-thread-showmore').is(':visible'))
   .to.be.equal(false);

 def expand_all_lectures(self):
     sections = self.get_els('.course-item-list-header')
     for section in sections:
        if 'contracted' in section.get_attribute('class'):
                section.click()
        self.wait_for(lambda: 'contracted' not in section.get_attribute('class'))

diff your frontend

from needle.cases import NeedleTestCase

class BBCNewsTest(NeedleTestCase):
    def test_masthead(self):
        self.driver.get('http://www.bbc.co.uk/news/')
        self.assertScreenshot('#blq-mast', 'bbc-masthead')

Also: Perceptual Diffs, PhantomCSS, CasperJS, SlimerJS

Manual Flow: Firefox screenshot + Kaleidoscope