Theming for Distributions: Sub-theming Like a Pro

Recently we rewrote the base theme for the LocalGov Drupal distribution.

Why? Well, the original sub-theme made lots of assumptions about the site that was going to be produced. As an example, a class like `pt-4` from Bootstrap in the breadcrumbs region assumes every site wants 4 units of padding at the top of that section. When this happens many times, the effect leads to a lot of technical debt.

We set about creating a new base theme, funded thanks to the MHCLG in the UK (thanks for sponsoring open source!!!). This new theme rewrote each template to better follow Drupal standards - put back in {{ attributes }} and default classes, etc. This also including writing our own grid system, based on the gov.uk design system.

We then rewrote all of the JS and CSS to follow a more modern approach, based on BEM. The killer feature here was the use of CSS custom properties, which we then re-use in our sub-theme.

The finished product is a slick and fast base theme, and a sub-theme that is just one CSS file of custom properties. Want a new theme, with a new colour scheme/fonts/spacing/etc? Just add the necessary variables to the sub-theme `variables.css` file. When we tried this approach for our first demo site, the sub-theme took us about 30 minutes to create, however we think we can make that time even shorter.

CSS custom properties? So you are not supporting IE11 then? Of course we support IE11 (it's our favourite browser!). We'll show you how we are cleverly supporting this beast of a browser during our talk. If you can't wait until then, you can see a Poc of it here: https://www.youtube.com/watch?v=tcEjNBvQFiA

Sounds pretty cool, but what about if I just want to use the base theme's templates and not the CSS and JS? Oh, we figured that might happen, so we created some theme settings to switch the assets on and off, and then only load our libraries if the theme setting is switched on.

What's next? We are looking at the idea of allowing site builders add the variables for their theme via theme settings. Wait, doesn't that sound like the color module? Yes, we believe color module was before it's time, but our approach when it works out will be like color module on steroids as it will also set margins and paddings and lots of other variables.

Here's a brief outline of the general approach:
https://www.youtube.com/watch?v=DUdJbBgKsFE