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. 4½ Methods for Theming in (S)CSS
    Harry Roberts – CSSConf Australia – March, 2015

    View full-size slide

  2. Hello, Australia!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. Theming Is Common

    View full-size slide

  6. 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.

    View full-size slide

  7. Theming vs. Customisation

    View full-size slide

  8. Theming: defined by developers.

    View full-size slide

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

    View full-size slide

  10. Customisation: defined by users.

    View full-size slide

  11. Customisation
    Requires no developer input.
    Infinite possibilities.
    Whatever the user says goes.

    View full-size slide

  12. Advice on Theming

    View full-size slide

  13. 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.’

    View full-size slide

  14. A Quick Note on Preprocessors

    View full-size slide

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

    View full-size slide

  16. You should probably be using

    a preprocessor.

    View full-size slide

  17. #1 – Theme Layer

    View full-size slide

  18. Overriding default style with additional CSS.

    View full-size slide

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

    View full-size slide

  20. Suited To
    Bespoke theming for clients.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    }

    View full-size slide

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

    }

    View full-size slide

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

    View full-size slide

  26. The Bad
    Lots of redundancy.
    Wasted CSS over the wire.
    Shards styles across multiple files.

    View full-size slide

  27. #2 – Stateful Theming

    View full-size slide

  28. Styling a UI based on a state or condition.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. ’The tabs when in context.’

    View full-size slide

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

    View full-size slide

  35. Now we just turn that switch on…

    View full-size slide

  36. Stateful Utility Classes

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. A utility class that tracks the current theme.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. #3 – Config Theming

    View full-size slide

  44. Invoking a theme based on settings.

    View full-size slide

  45. Config Theming
    Switching between themes dev-side.
    Compiling the same CSS with a different skin based on a setting.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. // _settings.config.scss
    $theme: red;
    // _components.tabs.scss
    .tabs {
    margin: 0;
    padding: 0;

    @if ($theme == red) {
    background-color: red;
    } @else {
    background-color: gray;
    }
    }

    View full-size slide

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

    View full-size slide

  50. // _components.tabs.scss
    .tabs {
    margin: 0;
    padding: 0;

    @if (config(theme) == red) {
    background-color: red;
    } @else {
    background-color: gray;
    }
    }

    View full-size slide

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

    View full-size slide

  52. 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.

    View full-size slide

  53. #4 – Theme Palettes

    View full-size slide

  54. Holding entire themes in a palette file.

    View full-size slide

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

    View full-size slide

  56. Suited To
    Fully bespoke theming for clients.
    Adding specific branding to a project.

    View full-size slide

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

    View full-size slide

  58. // _settings.palette.scss
    $color-red: red;
    ...
    $color-tabs-background: $color-red;

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

    View full-size slide

  59. // _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;

    View full-size slide

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

    View full-size slide

  61. The Bad
    Limited mainly just to theming colours.

    View full-size slide

  62. #5 – User Customisation

    View full-size slide

  63. Letting users style their own UIs.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  66. <br/>.u-user-color { color: red; }<br/>.u-user-color-background { background-color: red; }<br/>


    ...
    ...

    View full-size slide

  67. Just dump it all in the view.

    View full-size slide

  68. 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.

    View full-size slide

  69. <br/>.u-user-color { color: red; }<br/>.u-user-color-background { background-color: red; }<br/>


    ...
    ...

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  72. When to Use Which?

    View full-size slide

  73. 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.

    View full-size slide

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

    View full-size slide