Upgrade to Pro — share decks privately, control downloads, hide ads and more …

4½ Methods for Theming in (S)CSS

Harry Roberts
February 19, 2015

4½ Methods for Theming in (S)CSS

A detailed look at four (and a bit) different ways to provide various types of theming functionality in your UI projects.

Harry Roberts

February 19, 2015
Tweet

More Decks by Harry Roberts

Other Decks in Design

Transcript

  1. Consultant Front-end Architect I help clients solve UI problems. Lots

    and lots of different clients. Lots and lots of different problems.
  2. 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.
  3. 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.’
  4. A Quick Note on Preprocessors Some don’t need a preprocessor.

    Some don’t neeeeeed a preprocessor. Some need a preprocessor.
  5. Theme Layer Possibly the most common approach (currently). Start off

    with the base/default styling. Use additional, subsequent CSS to override and redefine.
  6. // _components.tabs.scss .tabs { margin: 0; padding: 0; background-color: gray;

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

    } ... // _theme.tabs.scss .tabs { background-color: red;
 }
  8. The Bad Lots of redundancy. Wasted CSS over the wire.

    Shards styles across multiple files.
  9. The Good Bundle a number of themes into one codebase.

    Great for style-switchers. Perfect for ‘areas’ of a site. You can theme anything.
  10. Suited To Spitting out differently themed variants of a UI.

    Offering off-the-shelf themes to clients.
  11. // _settings.config.scss $theme: red; // _components.tabs.scss .tabs { margin: 0;

    padding: 0; 
 @if ($theme == red) { background-color: red; } @else { background-color: gray; } }
  12. // _settings.config.scss $config: ( theme: red, env: dev, ); //

    Get config out of our map. @function config($key) { @return map-get($config, $key); }
  13. // _components.tabs.scss .tabs { margin: 0; padding: 0; 
 @if

    (config(theme) == red) { background-color: red; } @else { background-color: gray; } }
  14. The Good Only send as little CSS over the wire

    as necessary. Alter the entire theme from one location. You can theme anything.
  15. The Bad Lots of logic in your Sass. Only supports

    a finite number of themes. Theme information is spread out through the codebase. Adding themes could be laborious.
  16. Theme Palettes Preload all of your theme settings into a

    palette. Inject these settings into the project later.
  17. // _settings.palette.scss $color-red: red; ... $color-tabs-background: $color-red;
 ... // _components.tabs.scss

    .tabs { margin: 0; padding: 0; background-color: $color-tabs-background; }
  18. // _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;
  19. The Good Zero redundancy. Perfect for bespoke theming—just plug in

    the client’s brand colours. Completely restyle the project from one file.
  20. <style> .u-user-color { color: red; } .u-user-color-background { background-color: red;

    } </style> </head> <body> ... <ul class="tabs u-user-color-background">...</ul>
  21. 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.
  22. <style> .u-user-color { color: red; } .u-user-color-background { background-color: red;

    } </style> </head> <body> ... <ul class="tabs u-user-color-background">...</ul>
  23. The Good Requires zero developer input. Allows users to ‘own’

    their profile/platform. Incredibly pragmatic—always a good thing!
  24. The Bad Requires zero developer input. Lots of redundancy. Wasted

    CSS over the wire. Lose the ability to cache styles.
  25. 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? – Config. Do you offer bespoke theming for white-label clients? – Theme Layer or Theme Palette.