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

4½ Methods for Theming in (S)CSS

Avatar for Harry Roberts Harry Roberts
February 19, 2015
Design
72
15k

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.
Avatar for Harry Roberts

Harry Roberts

February 19, 2015
Tweet

More Decks by Harry Roberts

See All by Harry Roberts
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
6
540
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
23
1.6k
cache rules everything
Avatar for Harry Roberts csswizardry
4
3.3k
My Website Is Slow!
 Where Do I Start?
Avatar for Harry Roberts csswizardry
5
460
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.2k
Get Your Head Straight
Avatar for Harry Roberts csswizardry
15
20k
From Milliseconds
 to Millions: A Look at the Numbers Powering Web Performance
Avatar for Harry Roberts csswizardry
1
2.5k
More Than You Ever Wanted to Know About Resource Hints
Avatar for Harry Roberts csswizardry
6
9.2k
It’s My (Third) Party, and I’ll Cry if I Want To
Avatar for Harry Roberts csswizardry
13
5.5k

Other Decks in Design

See All in Design
CIRCULAR ECONOMY + SERVICES
Avatar for John Manoochehri jmanooch
0
100
苦労が多かった多言語対応をFigmaで楽にした話
Avatar for Pioneer pioneer_devrel
PRO
0
180
2024/11/25 ReDesigner Online Meetup 会社紹介
Avatar for Cybozu cybozuinsideout
PRO
0
480
ito aya Portfolio
Avatar for aya itoaya116
0
160
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
Avatar for Gaku Oyanagi gakuoya
1
620
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
Avatar for 株式会社カミナシ kaminashi
2
1.5k
NAHO SHIMONO_Portfolio2025
Avatar for Naho nahohphp
0
500
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
Avatar for Shigeyuki Kameda kamechi7222222
1
9.1k
Illustrator2025がやってきた！私が好きな新機能
Avatar for hamko hamko1114
0
150
portfolio_YumiYasuda
Avatar for yumi yasuda yum0418
0
240
ほしいテンプレート制作から始めるツール学習のススメ📝
Avatar for あげうどん 60d
0
110
本当に欲しかったのはモノレポツールではなく、tsconfigの設定だった / monorepo-tsconfig
Avatar for Masahiko Sakakibara rdlabo
1
120

Featured

See All Featured
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
38
1.7k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
81
9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
160
15k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
57k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.1k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
It's Worth the Effort
Avatar for 3n 3n
184
28k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
45
9.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
47
5.4k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k

Transcript

  1. 4½ Methods for Theming in (S)CSS Harry Roberts – CSSConf

    Australia – March, 2015

  2. Hello, Australia!

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

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

    and lots of different clients. Lots and lots of different problems.

  5. Theming Is Common

  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.

  7. Theming vs. Customisation

  8. Theming: defined by developers.

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

    and constraints.
  10. None

  11. Customisation: defined by users.

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

    says goes.
  13. None

  14. Advice on Theming

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

  16. A Quick Note on Preprocessors

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

    Some don’t neeeeeed a preprocessor. Some need a preprocessor.

  18. You should probably be using
 a preprocessor.

  19. None

  20. #1 – Theme Layer

  21. Overriding default style with additional CSS.

  22. Theme Layer Possibly the most common approach (currently). Start off

    with the base/default styling. Use additional, subsequent CSS to override and redefine.

  23. Suited To Bespoke theming for clients.

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

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

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

    } ... // _theme.tabs.scss .tabs { background-color: red;
 }

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

    } ... // _theme.tabs.scss .tabs { background-color: red;
 }

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

    anything.

  29. The Bad Lots of redundancy. Wasted CSS over the wire.

    Shards styles across multiple files.

  30. #2 – Stateful Theming

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

  32. Stateful Theming Different skins based on conditions. Allow themes to

    be switched on the client.

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

    a site.
  34. None
  35. None

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

    .t-blue & { background-color: blue; } }

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

    .t-blue & { background-color: blue; } }

  38. ’The tabs when in <this> context.’

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

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

  40. Now we just turn that switch on…

  41. <body class="t-red"> <ul class="tabs">...</ul> </body>

  42. <body class="t-red"> <ul class="tabs">...</ul> </body>

  43. <body class="t-blue"> <ul class="tabs">...</ul> </body>

  44. Stateful Utility Classes

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

    { color: blue; } }

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

    { color: blue; } }

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

    blue; }

  48. A utility class that tracks the current theme.

  49. <body class="t-red"> <h1 class="page-title u-color-current">...</h1> </body>

  50. <body class="t-red"> <h1 class="page-title u-color-current">...</h1> </body>

  51. <body class="t-blue"> <h1 class="page-title u-color-current">...</h1> </body>

  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.

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

    Potential redundancy.

  54. #3 – Config Theming

  55. Invoking a theme based on settings.

  56. Config Theming Switching between themes dev-side. Compiling the same CSS

    with a different skin based on a setting.

  57. Suited To Spitting out differently themed variants of a UI.

    Offering off-the-shelf themes to clients.

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

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

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

  60. // _settings.config.scss $config: ( theme: red, env: dev, ); //

    Get config out of our map. @function config($key) { @return map-get($config, $key); }

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

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

  62. The Good Only send as little CSS over the wire

    as necessary. Alter the entire theme from one location. You can theme anything.

  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.

  64. #4 – Theme Palettes

  65. Holding entire themes in a palette file.

  66. Theme Palettes Preload all of your theme settings into a

    palette. Inject these settings into the project later.

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

    to a project.

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

  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; }

  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;

  71. The Good Zero redundancy. Perfect for bespoke theming—just plug in

    the client’s brand colours. Completely restyle the project from one file.

  72. The Bad Limited mainly just to theming colours.

  73. #5 – User Customisation

  74. Letting users style their own UIs.

  75. User Customisation Letting users decide their own colours. Done through

    a CMS/admin interface.

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

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

    } </style> </head> <body> ... <ul class="tabs u-user-color-background">...</ul>

  78. Just dump it all in the view.

  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.

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

    } </style> </head> <body> ... <ul class="tabs u-user-color-background">...</ul>
  81. None

  82. @necolas

  83. None
  84. None

  85. The Good Requires zero developer input. Allows users to ‘own’

    their profile/platform. Incredibly pragmatic—always a good thing!

  86. The Bad Requires zero developer input. Lots of redundancy. Wasted

    CSS over the wire. Lose the ability to cache styles.

  87. When to Use Which?

  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.

  89. Thank You!

  90. Thank You! Follow me: @csswizardry Hire me: csswizardry.com/work Slides: speakerdeck.com/csswizardry

    Code: csswizardry.net/talks/2015/theming.zip