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 Slide

  2. Hello, Australia!

    View Slide

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

    View 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 Slide

  5. Theming Is Common

    View 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 Slide

  7. Theming vs. Customisation

    View Slide

  8. Theming: defined by developers.

    View Slide

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

    View Slide

  10. View Slide

  11. Customisation: defined by users.

    View Slide

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

    View Slide

  13. View Slide

  14. Advice on Theming

    View Slide

  15. 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 Slide

  16. A Quick Note on Preprocessors

    View Slide

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

    View Slide

  18. You should probably be using

    a preprocessor.

    View Slide

  19. View Slide

  20. #1 – Theme Layer

    View Slide

  21. Overriding default style with additional CSS.

    View Slide

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

    View Slide

  23. Suited To
    Bespoke theming for clients.

    View Slide

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

    View Slide

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

    View Slide

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

    }

    View Slide

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

    }

    View Slide

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

    View Slide

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

    View Slide

  30. #2 – Stateful Theming

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  34. View Slide

  35. View Slide

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

    View Slide

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

    View Slide

  38. ’The tabs when in context.’

    View Slide

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

    View Slide

  40. Now we just turn that switch on…

    View Slide


  41. ...

    View Slide


  42. ...

    View Slide


  43. ...

    View Slide

  44. Stateful Utility Classes

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  48. A utility class that tracks the current theme.

    View Slide


  49. ...

    View Slide


  50. ...

    View Slide


  51. ...

    View Slide

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

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

    View Slide

  54. #3 – Config Theming

    View Slide

  55. Invoking a theme based on settings.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

  63. 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 Slide

  64. #4 – Theme Palettes

    View Slide

  65. Holding entire themes in a palette file.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  69. // _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 Slide

  70. // _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 Slide

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

    View Slide

  72. The Bad
    Limited mainly just to theming colours.

    View Slide

  73. #5 – User Customisation

    View Slide

  74. Letting users style their own UIs.

    View Slide

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

    View Slide

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

    View Slide

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


    ...
    ...

    View Slide

  78. Just dump it all in the view.

    View Slide

  79. 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 Slide

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


    ...
    ...

    View Slide

  81. View Slide

  82. @necolas

    View Slide

  83. View Slide

  84. View Slide

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

    View Slide

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

    View Slide

  87. When to Use Which?

    View Slide

  88. 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 Slide

  89. Thank You!

    View Slide

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

    View Slide