THEMING SITES WITH

SHAWN RIDER HTTP://SHAWNRIDER.COM TWITTER: @SHAWNR GITHUB: SHAWNR

WHAT IS SASS?QUICK QUESTION:

HTTP://SASS-LANG.COM

FILE ORGANIZATION

HIERARCHICAL STYLE NESTING

NESTED SASS

PROCESSED CSS

VARIABLE DEFINITION

MIXINS

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

IT’S POPULAR

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

ADD A CLASS

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