Visual consistency on web projects

Visual consistency on web projects

One of the hardest things when dealing with web UI is to keep visual consistency. CSS is really easy to change but way too hard to test.
How to make sure that that simple visual change will not break something completely unrelated in a very different context of your project?
This talk is a compilation of my experience around this subject. I've found some steps that can help us to avoid things breaking in the wild and ensure visual consistency.

Video:

Recording from 7masters at iMasters HQ
https://www.youtube.com/watch?v=yJrs4uhv_88

Links:

F.biz
http://www.fbiz.com.br

Netshoes
http://netshoes.com.br

FEMUG-SP (Front-End Meetup Group São Paulo)
http://sp.femug.com

ZOFE podcast (Zone of Front-Enders)
http://zofe.com.br

CSSLint
https://github.com/CSSLint/csslint

SCSSLint
https://github.com/causes/scss-lint

BEM
http://bem.info

SMACSS
https://smacss.com

OOCSS
http://oocss.org

Bower
http://bower.io

BackstopJS
http://backstopjs.org

Resemble.js
http://huddle.github.io/Resemble.js

CasperJS
http://casperjs.org

PhantomJS
http://phantomjs.org

Website Style Guide Resources
http://styleguides.io

Hardy
http://hardy.io

Selenium
http://www.seleniumhq.org

Cucumber
https://cukes.info

Saucelabs
https://saucelabs.com

Travis
https://travis-ci.com

Ffc5102ee85d0d7ec57200fa3e6b1fce?s=128

Rafael Rinaldi

February 25, 2015
Tweet