style guide-driven ui design with...
TRANSCRIPT
Style Guide-DrivenUI Design with SassJina Bolton // Product Designer // Do
CSS Summit // 2012
sushiandrobots.com
artinmyco!ee.com
Be regular and orderly in your life so that you may be violent and original in your work.”
”
—Gustave Flaubert
Style Guides & UI Libraries
It used to be that designers made an object and walked away. Today the emphasis must shift to designing the entire life cycle.”
”
—Paul Sa!o
Create pages
Create pages
Create systems
A fractured process makes for a fractured user experience.”
”
—Nate Fortin
What to include?
Brand Guidelines
Logos
Tone & Voice
Copywriting Standards
Typography
Color Palettes
Layout
Grids
Spacing
Image & Media Sizes
Development Standards
HTML, CSS, & JS
Naming Conventions
Directory Structures
Validation & QA
Version Control
Android Design // developer.android.com/design
Android Design // developer.android.com/design
Android Design // developer.android.com/design
Android Design // developer.android.com/design
Android Design // developer.android.com/design
Android Design // developer.android.com/design
Starbucks Style Guide // starbucks.com/static/reference/styleguide/
Starbucks Style Guide // starbucks.com/static/reference/styleguide/
Starbucks Style Guide // starbucks.com/static/reference/styleguide/
Starbucks Style Guide // starbucks.com/static/reference/styleguide/
Starbucks Style Guide // starbucks.com/static/reference/styleguide/
Starbucks Style Guide // starbucks.com/static/reference/styleguide/
Starbucks Style Guide // starbucks.com/static/reference/styleguide/
Fellowship Technologies Design Patterns Library & Code Standards //developer.fellowshipone.com/patterns/
Fellowship Technologies Design Patterns Library & Code Standards //developer.fellowshipone.com/patterns/
Fellowship Technologies Design Patterns Library & Code Standards //developer.fellowshipone.com/patterns/
Google HTML/CSS Style Guide //google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
Google HTML/CSS Style Guide //google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
Writing an Interface Style Guide //alistapart.com/articles/writingainterfacestyleguide/
Do iPhone application assets by the Do design team, stored in one PSD
Do Android Design Specs on an internal GitHub wiki
Do Android Design Specs on an internal GitHub wiki
Do Android comps & UI inventory on an internal GitHub wiki
CSS Preprocessors+Style Guides= Super Rad
Easier maintainability
Better separationof presentationfrom content
DRY Development
Patterns & Proportions
Stylus
Sass, not SASS!
Sassy Style Guides
Keep documentation current & useful
First variables. Then mixins. Then placeholder selectors.
Then advanced stuff!
Start withBaby Steps
Front-end Maintainability with Sass and Style Guides //engineyard.com/blog/2011/front-end-maintainability-with-sass-and-style-guides/
Front-end Maintainability with Sass and Style Guides //engineyard.com/blog/2011/front-end-maintainability-with-sass-and-style-guides/
Front-end Maintainability with Sass and Style Guides //engineyard.com/blog/2011/front-end-maintainability-with-sass-and-style-guides/
Front-end Maintainability with Sass and Style Guides //engineyard.com/blog/2011/front-end-maintainability-with-sass-and-style-guides/
iframes!?!
Using iframes to evaluate design systems — nice for mobile prototypes
Do // do.comUsing iframes to check responsive sizing during development
// =================================================
// DO WEBSITE
// -------------------------------------------------
// 01. VENDOR FRAMEWORKS
@import "compass"
@import "compass/css/pie"
// -------------------------------------------------
// 02. RESET
*
+box-sizing(border-box)
@import "vendor/normalize"
// -------------------------------------------------
// 03. DEPENDENCIES
// Variables, mixins, functions, & placeholder selectors.
// These files do not emit any CSS output on their own.
@import "dependencies/colour"
@import "dependencies/measurements"
@import "dependencies/typography"
@import "dependencies/layout"
// -------------------------------------------------
// 04. FOUNDATION
// This section begins CSS output as plain semantic HTML
// No classes or IDs are introduced at this point.
@import "foundation"
// -------------------------------------------------
// 05. LAYOUT
@import "grid"
@import "helpers"
$breakpoint-iPhone: 20em
=respond-to($media)
@if $media == iPhone
@media #{$breakpoint-iPhone}
@content
@else if ...
// PLACEHOLDER SELECTORS + @CONTENT FOR CLEAN CSS OUTPUT!
@for $i from 1 through $column-count
+respond-to(iPhone)
%grid-#{$i}-iPhone
// ...
+respond-to(iPhone)
.sidebar
@extend %grid-3-iPhone
// -------------------------------------------------
// 06. COMPONENTS
// Reusable modules, widgets, components, etc.
@import "components/forms"
@import "components/buttons"
@import "components/messaging"
@import "components/pop-stripe"
// POP STRIPE: https://gist.github.com/3141010 -- Thanks goes to Eric Meyer// Returns a striped gradient for use anywhere gradients are accepted.// - $position: the starting position or angle of the gradient.// - $colours: a list of all the colors to be used.
@function pop-stripe($position, $colours) $colours: if(type-of($colours) != 'list', compact($colours), $colours) $gradient: compact() $width: 100% / length($colours) @for $i from 1 through length($colours) $pop: nth($colours, $i) $new: $pop ($width * ($i - 1)), $pop ($width * $i) $gradient: join($gradient, $new, comma) @return linear-gradient($position, $gradient)
.pop-stripe +background-image(pop-stripe(left, ($stripe-colours)))
Awesome Sauce!
// -------------------------------------------------
// 07. THEMES
@import "themes/light"
@import "themes/dark"
@import "themes/orangina"
// -------------------------------------------------
// 08. REGIONS
@import "regions/header"
@import "regions/sidebar"
@import "regions/footer"
// -------------------------------------------------
// 09. PRINT
@import "print"
// -------------------------------------------------
// 10. TOOLS
<% if Rails.env.development? %>
@import "show-grid"
<% end %>
What else?
Object-Oriented CSS // oocss.org
Scalable and Modular Architecture for CSS // smacss.com
320 and Up // stuffandnonsense.co.uk/projects/320andup
Team Sass Design FTW!
Team Sass Design Dribbble Bucket //dribbble.com/jina/buckets/58901-Team-Sass-Design
@TeamSassDesign
#teamSass
@jinaThank You!