using sass as your style guide
DESCRIPTION
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.TRANSCRIPT
{style with attitude} Alexis Finch@agentfin
#modevux
by Robby Ingebretsen nerdplusart.com
after Erik Flowers helloerik.com
separation of
CONTENTfrom PRESENTATION
HOWnot
WHAT
Sass:Syntactically Awesome Stylesheets
From many files into one stylesheet…
PreprocessorsSass 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.
$blue: #24bcd4
.buttonsborder-color: darken($blue, 17%)
THE MAGIC OF
VARIABLES!!!
from Stephen Haythe-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
SUPER
SKYPE
Alexis Finch@agentfin
Thanks to [in order of appearance]
@ingebretsen@erik_ux
@stephenhay@itsdoge
@brianshaler