Using Sass as a Workflow for Design

Using Sass as a Workflow for Design

@mkivikoski

Another tool for your workflow

Should Designers know how to code?

Should Designers know how to code?

Meh.

Why design in the browser?

http://history-behind-game-of-thrones.com/wp-content/uploads/2014/06/the-wall-elevator-game-of-thrones-lord-snow-01.png

about_final_v2c.psd

homescreen_option1.sketch

homescreen_option2.sketch

/desktop/

/mobile/http://1.bp.blogspot.com/_esJiRTfGD7M/TGZEBS2fFwI/AAAAAAAAAYA/oTGafbnY8IY/s1600/Picture+39.png

http://stylecampaign.com/blog/blogimages/device-lab/device-lab-13.jpg

Test faster

Unify Design with a style guide

Build Components for others

Easily change UI

Less polish

Shortcuts on design

Might take longer

Moodboard

A collection of images to influence design direction

Sketching

Quick pen and paper exercise for layout ideas

Variables

$color-primary

$color-secondary

$font-family-primary

$font-family-secondary

$font-size-base

$font-size-up-one

$font-size-down-one

Partials

Break down into layout & components

Mixins

Reduce, Reuse

bourbon.io

Grid System

Use one. Duh.

Type System

Use a base size and build off that.

Color Functions

http://sass-lang.com/documentation/Sass/Script/Functions.html

Learn More!

thesassway.com

sass-lang.com

bourbon.io

http://shop.oreilly.com/product/0636920035251.do

Thank You!

@mkivikoski