Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Rafael Rinaldi

February 25, 2015
Tweet

More Decks by Rafael Rinaldi

Other Decks in Technology

Transcript

  1. .imasters { /* Invalid color value */ color: #red; /*

    Invalid property and attribute */ lorem: 'ipsum'; }
  2. λ csslint style.css csslint: There are 2 problems in style.css.

    style.css 1: error at line 3, col 10 Expected a hex color but found '#red' at line 3, col 10. color: #red; style.css 2: warning at line 6, col 3 Unknown property 'lorem'. lorem: 'ipsum';
  3. # config.yaml linters: # IDs, classes and placeholders should be

    all lowercase. CapitalizationInSelector: enabled: true # Prefer hexadecimal color codes over color keywords. ColorKeyword: enabled: true # Reports when you define the same property twice. DuplicateProperty: enabled: true
  4. λ scss-lint -c config.yaml style.css style.css:1 Selector `iMasters` should be

    written in lowercase style.css:2 Color literals like `fuchsia` should be variables style.css:2 Color `fuchsia` should be written in hexadecimal form style.css:3 Property `color` already defined on line 2 style.css:3 Color `fuchsia` should be written in hexadecimal form style.css:3 Color literals like `fuchsia` should be variables
  5. . ├── assets │ └── stylesheets │ ├── application.scss │

    ├── base │ │ ├── _grid.scss │ │ ├── _typography.scss │ │ └── _variables.scss │ ├── components │ │ ├── _dropdown.scss │ ├── helpers │ │ └── _mixins.scss │ └── layout │ ├── core │ │ ├── _footer.scss │ │ ├── _header.scss │ └── sections │ └── _dashboard.scss ├── bower.json └── vendor ├── assets ├── normalize-css └── susy
  6. Use your common sense and build your projects with a

    solid foundation from the ground up
  7. { "viewports": [ { "name": "phone", "width": 320, "height": 480

    }, { "name": "tablet", "width": 568, "height": 1024 } ] }
  8. { "scenarios": [ { "label": "My Website", "url": "../../index.html", "selectors":

    [ "nav", ".jumbotron", "body .col-md-4:nth-of-type(1)", "body .col-md-4:nth-of-type(2)", "body .col-md-4:nth-of-type(3)", "footer" ] } ] }
  9. Feature: iMasters UI Test As a user I want visual

    consistency on the http://imasters.com.br Scenario: Header layout Given I visit 'http://imasters.com.br' Then 'header > logo > a' should have 'color' of 'rgb(255, 165, 0)'
  10. λ hardy selenium start λ hardy . Hardy v0.0.11 CSS

    Utils Steps Loaded CSS Steps Loaded Generic Steps Loaded Loading browser firefox …Shutting down browser 1 scenario (1 passed) 3 steps (3 passed) firefox success