THEMING SITES WITH
SHAWN RIDER HTTP://SHAWNRIDER.COM TWITTER: @SHAWNR GITHUB: SHAWNR
WHAT IS SASS?QUICK QUESTION:
HTTP://SASS-LANG.COM
HIERARCHICAL STYLE NESTING
NESTED SASS
PROCESSED CSS
VARIABLE DEFINITION
ADDITIONAL HELPERS
WHY SASS?BUT SERIOUSLY
CSSISAWESOME!
A DRY-ER APPROACH
EVERY PIECE OF KNOWLEDGE MUST HAVE A SINGLE, UNAMBIGUOUS, AUTHORITATIVE REPRESENTATION WITHIN A SYSTEM.
FEATURES DEVELOPERS EXPECT
FUNCTIONS, CONDITIONALS, INHERITANCE, ETC.
THINGS DEVELOPERS LOVE
THEMING SITESA COMMON USE CASE
THREE OF THE BRANDS OWNED BY DISCOVERY COMMUNICATIONS.
THEMING USED BY PBS TO LOCALIZE WEBSITES FOR MEMBER DISTRIBUTION.
THEMES PROVIDE UNIQUE HEADERS FOR THE VOGUE WEBSITE.
TECHNIQUES FOR THEMING SITES
THE HOW-TO SECTION
WRITE YOUR BASE STYLES
CREATE A MIXIN TO CUSTOMIZE YOUR STYLES PER THEME
CREATE YOUR THEMES DEFINITION FILE
CONNECT IT ALL UP@IMPORT “THEMES”;
USE A QUICK THEME-SWITCHER SCRIPT TO TEST AND DEMO YOUR THEMES
WHY I LIKE THIS APPROACH TO THEMING
SOME EVALUATION
IT’S SIMPLE
STRAIGHTFORWARD SOLUTIONS
IT’S POWERFUL
STANDING ON THE SHOULDERS OF GIANTS
IT’S EFFICIENTPRECISE CONTROL OVER DUPLICATED STYLES
IT’S EXTENSIBLEGROWS WITH YOU
THE LIVE CODING DEMO
AND NOW
HTTP://SHAWNR.NET/SASS-THEMESGITHUB REPOSITORY AVAILABLE AT
THANKS FOR WATCHING!
SHAWN RIDER HTTP://SHAWNRIDER.COM TWITTER: @SHAWNR GITHUB: SHAWNR
DEMO REPO AVAILABLE AT: HTTP://SHAWNR.NET/SASS-THEMES