Using Sass as a Workflow for Design
29
Using Sass as a Workflow for Design @mkivikoski
-
Upload
mkivikoski -
Category
Design
-
view
512 -
download
1
Transcript of 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
