When Bootstrap Attacks!


@pamelafox


press space bar for the next slide




a bit of background...


coursera

a modern web app?


Modern...

Backbone logo
+
Python logo
+
Django logo

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

Backbone logo

Jade logo

Stylus logo

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

wysihtml5/editor.js:
 var defaults = {'prefix.css': ''}
var $toolbar = $(toolbarTemplate({prefix:options['prefix.css']}))
toolbar.js.jade:
div(class=prefix+"-toolbar", role="toolbar", title="HTML editing toolbar")
coursera.editor.js:
new WysiEditor({'prefix.css': 'coursera-wysihtml5'});
coursera.editor.styl:
 .coursera-wysihtml5
padding 0
Dynamic Selectors

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);

selenium:
 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


Automatic: Needle: Selenium+Nose
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



CSS can break you.



use protection.


When Bootstrap Attacks!

By pamelafox

When Bootstrap Attacks!

  • 15,578