{style with attitude} Alexis Finch
@agentfin
#modevux
by Robby Ingebretsen
nerdplusart.com
after Erik Flowers
helloerik.com
separation of
CONTENT
from
PRESENTATIO
N
HOW
not
WHAT
Sass:
Syntactically
Awesome
Stylesheets
From many files
into one
stylesheet…
Preprocessors
Sass or SCSS or LESS or Stylus….
Whatever.
Sass if you’re using Ruby.
-> media queries built in
-> get to us...
$blue: #24bcd4
.buttons
border-color: darken($blue, 17%)
THE MAGIC
OF
VARIABLES!!!
from Stephen Hay
the-haystack.com
IT CAN EVEN DO MATH
by Brian Shaler
crappygraphs.com
NO
PROBLEM.
YOU CAN BE
F L E X I B L E
and FAST
SUPE
R
SKYPE
Alexis Finch
@agentfin
Thanks to [in order of appearance]
@ingebretsen
@erik_ux
@stephenhay
@itsdoge
@brianshaler
Using Sass as Your Style Guide
Using Sass as Your Style Guide
Using Sass as Your Style Guide
Using Sass as Your Style Guide
Using Sass as Your Style Guide
Using Sass as Your Style Guide
Using Sass as Your Style Guide
Using Sass as Your Style Guide
Using Sass as Your Style Guide
Using Sass as Your Style Guide
Using Sass as Your Style Guide
Using Sass as Your Style Guide
Using Sass as Your Style Guide
Using Sass as Your Style Guide
Using Sass as Your Style Guide
Using Sass as Your Style Guide
Upcoming SlideShare
Loading in …5
×

Using Sass as Your Style Guide

451
-1

Published on

Style guides are inherited from the old days of print. Defining typography and inks to ensure the next magazine looked like the last one. They were on paper, for paper.

Designers were the ones who owned these documents, and they've inherited them for the web. Sure, sometimes style guides are put up online, as their own website. But they're still not in the code.

This means that designs get set, then chucked over the fence to the folks who actually implement them, often leading to painful rewrites when design changes happen [Blue. No, yellow!].

By making Sass act as your style guide, breaking design into variables and mixins, a site becomes easier to maintain, and often options get opened up that someone on the visual side wouldn't have thought possible.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
451
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • UX-ers are polymaths.
  • So you either already are or are aspiring to be a platypus.
  • Right in the middle of the whole process…
  • Or Platypi
  • Traditional style guides “toss it all over the fence”
  • How content is displayed. Not what content is displayed – or in what sections etc.
  • First of the whole preprosser trend
    Spawned SCSS as well as LESS and Stylus
  • Or Platypi
  • Using Sass as Your Style Guide

    1. 1. {style with attitude} Alexis Finch @agentfin #modevux
    2. 2. by Robby Ingebretsen nerdplusart.com
    3. 3. after Erik Flowers helloerik.com
    4. 4. separation of CONTENT from PRESENTATIO N
    5. 5. HOW not WHAT
    6. 6. Sass: Syntactically Awesome Stylesheets
    7. 7. From many files into one stylesheet…
    8. 8. Preprocessors Sass or SCSS or LESS or Stylus…. Whatever. Sass if you’re using Ruby. -> media queries built in -> get to use Compass Stylus if you’re using Node. -> keyframes built in -> utilize Node modules LESS is …less.
    9. 9. $blue: #24bcd4 .buttons border-color: darken($blue, 17%) THE MAGIC OF VARIABLES!!!
    10. 10. from Stephen Hay the-haystack.com
    11. 11. IT CAN EVEN DO MATH
    12. 12. by Brian Shaler crappygraphs.com
    13. 13. NO PROBLEM.
    14. 14. YOU CAN BE F L E X I B L E
    15. 15. and FAST
    16. 16. SUPE R
    17. 17. SKYPE
    18. 18. Alexis Finch @agentfin Thanks to [in order of appearance] @ingebretsen @erik_ux @stephenhay @itsdoge @brianshaler
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×