4½ Methods for Theming in (S)CSS

4½ Methods for Theming in (S)CSS Harry Roberts – CSSConf
Australia – March, 2015

Hello, Australia!

Hello, Australia! Harry Roberts Consultant Front-end Architect @csswizardry #4halfCSS

Consultant Front-end Architect I help clients solve UI problems. Lots
and lots of different clients. Lots and lots of different problems.

Theming Is Common

Theming Is Common SaaS clients want to offer a varied
product range. White-label clients want to offer bespoke themes. Hub clients want each part of a product to have its own colours. Social network clients want to allow users to personalise things.

Theming vs. Customisation

Theming: deﬁned by developers.

Theming Requires developer input. Finite amount of variants. Known rules
and constraints.

Customisation: deﬁned by users.

Customisation Requires no developer input. Inﬁnite possibilities. Whatever the user
says goes.

Advice on Theming

Advice on Theming Avoid it if possible—make sure there’s a
real business case. KISS—always reduce the complexity involved. Only make changes to cosmetic aspects—avoid altering box-model. Enforce rules—deviation is expensive. Use it as an up-sell—‘Any deviation is going to cost you.’

A Quick Note on Preprocessors

A Quick Note on Preprocessors Some don’t need a preprocessor.
Some don’t neeeeeed a preprocessor. Some need a preprocessor.

You should probably be using  a preprocessor.

#1 – Theme Layer

Overriding default style with additional CSS.

Theme Layer Possibly the most common approach (currently). Start off
with the base/default styling. Use additional, subsequent CSS to override and redeﬁne.

Suited To Bespoke theming for clients.

@import "components.tabs"; ... @import "theme.tabs";

@import "components.tabs"; @import "components.buttons"; ... @import "theme.tabs"; @import "theme.buttons";

// _components.tabs.scss .tabs { margin: 0; padding: 0; background-color: gray;
} ... // _theme.tabs.scss .tabs { background-color: red;  }

The Good You can swap layers out. You can theme
anything.

The Bad Lots of redundancy. Wasted CSS over the wire.
Shards styles across multiple ﬁles.

#2 – Stateful Theming

Styling a UI based on a state or condition.

Stateful Theming Different skins based on conditions. Allow themes to
be switched on the client.

Suited To Style switchers. Individually styled sections or areas of
a site.

.tabs { background-color: gray; .t-red & { background-color: red; }
.t-blue & { background-color: blue; } }

’The tabs when in <this> context.’

.tabs { background-color: gray; } .t-red .tabs { background-color: red;
} .t-blue .tabs { background-color: blue; }

Now we just turn that switch on…

Stateful Utility Classes

.u-color-current { .t-red & { color: red; } .t-blue &
{ color: blue; } }

.t-red .u-color-current { color: red; } .t-blue .u-color-current { color:
blue; }

A utility class that tracks the current theme.

The Good Bundle a number of themes into one codebase.
Great for style-switchers. Perfect for ‘areas’ of a site. You can theme anything.

The Bad Bundle a number of themes into one codebase.
Potential redundancy.

#3 – Conﬁg Theming

Invoking a theme based on settings.

Conﬁg Theming Switching between themes dev-side. Compiling the same CSS
with a different skin based on a setting.

Suited To Spitting out differently themed variants of a UI.
Offering off-the-shelf themes to clients.

@import "settings.config"; ... @import "components.tabs";

// _settings.config.scss $theme: red; // _components.tabs.scss .tabs { margin: 0;
padding: 0;   @if ($theme == red) { background-color: red; } @else { background-color: gray; } }

// _settings.config.scss $config: ( theme: red, env: dev, ); //
Get config out of our map. @function config($key) { @return map-get($config, $key); }

// _components.tabs.scss .tabs { margin: 0; padding: 0;   @if
(config(theme) == red) { background-color: red; } @else { background-color: gray; } }

The Good Only send as little CSS over the wire
as necessary. Alter the entire theme from one location. You can theme anything.

The Bad Lots of logic in your Sass. Only supports
a ﬁnite number of themes. Theme information is spread out through the codebase. Adding themes could be laborious.

#4 – Theme Palettes

Holding entire themes in a palette ﬁle.

Theme Palettes Preload all of your theme settings into a
palette. Inject these settings into the project later.

Suited To Fully bespoke theming for clients. Adding speciﬁc branding
to a project.

@import "settings.palette"; ... @import "components.tabs";

// _settings.palette.scss $color-red: red; ... $color-tabs-background: $color-red;  ... // _components.tabs.scss
.tabs { margin: 0; padding: 0; background-color: $color-tabs-background; }

// _settings.palette.scss $color-brand: #BADA55; $color-brand-highlight: lighten($color-brand, 10%); $color-red: red; $color-green:
green; $color-blue: blue; ... $color-links: $color-brand; $color-links-hover: $color-brand-highilght; $color-tabs-background: $color-red; $color-btn-background: $color-blue;

The Good Zero redundancy. Perfect for bespoke theming—just plug in
the client’s brand colours. Completely restyle the project from one ﬁle.

The Bad Limited mainly just to theming colours.

#5 – User Customisation

Letting users style their own UIs.

User Customisation Letting users decide their own colours. Done through
a CMS/admin interface.

Suited To Social networks. SaaS platforms. Brandable software products.

Just dump it all in the view.

User Customisation Drop the hex value(s) into a style block.
Bind onto utility classes rather than existing hooks. Now just a case of decorating in the UI with the classes.

@necolas

The Good Requires zero developer input. Allows users to ‘own’
their proﬁle/platform. Incredibly pragmatic—always a good thing!

The Bad Requires zero developer input. Lots of redundancy. Wasted
CSS over the wire. Lose the ability to cache styles.

When to Use Which?

When to Use Which? Who’s doing the styling: you or
the user? – User Customisation. Do the themes need to change once they’re on the client? – Stateful or User Customisation. Do you have themes that you want people to be able to toggle? – Stateful. Do you have sections of the site that need to look different? – Stateful. Do you have preset themes that a client can choose from? – Conﬁg. Do you offer bespoke theming for white-label clients? – Theme Layer or Theme Palette.

Thank You!

Thank You! Follow me: @csswizardry Hire me: csswizardry.com/work Slides: speakerdeck.com/csswizardry
Code: csswizardry.net/talks/2015/theming.zip

4½ Methods for Theming in (S)CSS

4½ Methods for Theming in (S)CSS

More Decks by Harry Roberts

Other Decks in Design

Featured

Transcript