Organizational style guides
Tonight I attended an event at Shutterstock office on style guides used at Etsy. Kyle Turman talks about consistency in UI product at Etsy where they have continuous integration.
He summarizes highlights from a project in 2013 that revamps the front end development workflow and processes. First he starts with the basics of style guides.
Style Guides
- … is a marriage of design and code.
- … is started by designers
- … is about creating the styles != implementing the styles
Rules were not well defined before so it was hard to implement. The front end infrastructure team built tools - compilers, minifers, etc to improve the workflow. They are responsible for checking load times and file sizes to make website really fast to load for consumers.
Components
* SASS components
* human readable
object oriented CSS
Components
- alerts, buttons, typography, icons, etc. were all classes
- separated by base and types
utility classes - used for responsive .text-gray .text-gray-darker .col-lg-6 //col grids . mb-xs-2 //
“Designers should design controls, rather than design controls” Give people options to improve with
Not good response, didn’t know how to use it. Were open to the idea. Had to explain to people how toolkit works People aren’t used to complete standardization Should have good documentation
Example: Nasa Logo uniform patches
Open meetings to train people “Devil’s Development” Scalable updates performance updates “Freaky fast” prototyping -> “in half of a day” Prototyping from sandboxes Listing manager is an example of using the style guide Search page
“Less markup to make beautiful webpages”
Lessons learned…
Readible variables:
/* to indicate zindex for readability */
@z-index-0:10;
@z-index-1:10;
/* rather than */
z-index:1;
z-index:2;
blue: #34A8CA;
black: #222;
/* SASS functions such as*/
lighten(blue, 0.1)
/* made it easier to understand breakpoints
max width or min width*/
@include breakpoint(sm-down)
Share early, share often
- weekly standups to update progress
- company wide emails - changes regarding button styles, type styles
- basecamp to get feedback from stakeholders
- Github to manage changes, can get pull requests. i.e. accessibility changes from one of the engineers
- documentation of styles, written in markdown
Product Feature (New carousel) jquery 1.3 -> upgraded to newer js
sketch instead of photoshop
Think about things that might happen 5 years from now Style guides are living and breathing
versioning is difficult, transitioning over is hard scoped version of toolkit — Questions
- What do you use to create documentation? Is there a framework?
seller side supports IE8 etsy checkout supports IE7
working on this over a year leadership was supportive, now dedicating more support
PostCSS
Entirely written in javascript 2.7x faster than less preprocessor