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.

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