Let's talk style guides
Byron Delpinal
Our Style Guide Story
Sweet, BUT what's a style guide?
Sweet, BUT what's a style guide?
"A style guide is a single source of truth for the design and development of the atoms that make up a website."
Byron Delpinal
Requirements
- Provide Examples
Requirements
- Provide Examples
- Explain Concepts
Requirements
- Provide Examples
- Explain Concepts
- Provide HTML / CSS
Requirements
- Provide Examples
- Explain Concepts
- Provide HTML / CSS
- Eliminate Rework
Requirements
Eliminating Rework
Styleguide Application
styles.css
Client's Web
Application
Step One: Showing The Element
Step Two: Describe Your Reasoning
Step Three: HTML / CSS
Super Secret Step: Brand It
- Sandbox your UI
- Maintainability
- Quick late-stage iteration for developers
Benefits
super awesome examples
Codepen.io
MailChimp
http://codepen.io/guide
http://ux.mailchimp.com/patterns
http://www.coffeeandcode.com/styleguide.html
Coffee and Code