Your SlideShare is downloading. ×
Using Sass as Your Style Guide
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Using Sass as Your Style Guide

308

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

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
308
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 1. {style with attitude} Alexis Finch @agentfin #modevux
    • 2. by Robby Ingebretsen nerdplusart.com
    • 3. after Erik Flowers helloerik.com
    • 4. separation of CONTENT from PRESENTATIO N
    • 5. HOW not WHAT
    • 6. Sass: Syntactically Awesome Stylesheets
    • 7. From many files into one stylesheet…
    • 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. $blue: #24bcd4 .buttons border-color: darken($blue, 17%) THE MAGIC OF VARIABLES!!!
    • 10. from Stephen Hay the-haystack.com
    • 11. IT CAN EVEN DO MATH
    • 12. by Brian Shaler crappygraphs.com
    • 13. NO PROBLEM.
    • 14. YOU CAN BE F L E X I B L E
    • 15. and FAST
    • 16. SUPE R
    • 17. SKYPE
    • 18. Alexis Finch @agentfin Thanks to [in order of appearance] @ingebretsen @erik_ux @stephenhay @itsdoge @brianshaler

    ×