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/

BBC Global Experience Language// bbc.co.uk/gel

BBC Global Experience Language// bbc.co.uk/gel

BBC Global Experience Language// bbc.co.uk/gel

BBC Global Experience Language// bbc.co.uk/gel

BBC Global Experience Language// bbc.co.uk/gel

BBC Global Experience Language// bbc.co.uk/gel

BBC Global Experience Language// bbc.co.uk/gel

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/

Style Tiles // styletil.es/

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.com

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

Sass // sass-lang.com

Susy // susy.oddbird.net/

Sass // sass-lang.com

Team Sass Design FTW!

Team Sass Design Dribbble Bucket //dribbble.com/jina/buckets/58901-Team-Sass-Design

@TeamSassDesign

#teamSass

speakerdeck.com/u/jina

@jinaThank You!