The long answer:

1. cd to /web/themes/contrib/localgov_base
2. run bash scripts/create_subtheme.sh
3. done

The details are available in this short video:

I've started streaming some of my work, especially if it's contributions to open source, on twitch if you'd like to follow along/subscribe. As it turns out, Twitch deletes your videos after 14 days, so I have also been uploading them to YouTube. Feel free to subscribe.

Creating theme settings have so many uses. For example, you might have a sub-theme that wants to set a theme setting for the main/accent colour, and then use CSS variables to pull that into your theme - simple. Or, in my case, I want to create a base theme that is styled with CSS and JS, but allow sub-themes to switch off those libraries and just use the HTML from our templates.

Here's how:

I've started streaming some of my work, especially if it's contributions to open source, on twitch if you'd like to follow along/subscribe. As it turns out, Twitch deletes your videos after 14 days, so I have also been uploading them to YouTube. Feel free to subscribe.

Drupal will support IE11 until about this time next year. We have been seeing many clients say to us that they are happy to drop support for IE11 if it means they can have a better website. However, some organisations (government, etc) still use IE11 internally as their main browser, so those users need a website that works and is a pleasure to use. However, often the only users of these websites in IE11 are internal users - editors updating content - and not "visitors" to the website who are mostly using mobile browsers on their phones or modern browsers like Firefox, Edge, and Chrome on their computers.

Within LocalGov Drupal, we aim to support IE11 as long as Drupal does. However, I don't want us in a position this time next year needing/wishing to rewrite our frontend in modern CSS after we drop IE11 support. Here's my proposal to give IE11 users a really good experience via a default theme (like Wordpress does for mobile sites hosted on Wordpress.com) but uses progressive enhancement to supplement how the site works for visitors using modern browsers.

If we take the approach in this video, it means that all CSS properties are variables (fonts, line-heights, spacing, colours, etc) and then any council can use our base theme but brand it to their own brand guidelines simply using a variables.css file to override the base CSS variables. Since variables are calculated at run time, we don't need to recompile the theme to each time we make a simple change. Why is this so great/sustainable/scalable? It means sub-themes are very small, but also means we can create theme settings so editors can set some of these variables themselves (e.g. setting background colour via the CMS for Christmas, or when a notable person has passed away) all without needing to contact developers.

But won't the site look different in IE11 to other browsers? If you site uses the base theme, it will look the same in all browsers. If you site uses the base theme but extends it, then it will look like the base theme in IE11 but your branded theme in other browsers. Remember, sites already look different in different browsers - everything stacks in one column on phone browsers buy is side-by-side on desktop browsers, etc. Different does not mean bad.

I've started streaming some of my work, especially if it's contributions to open source, on twitch if you'd like to follow along/subscribe. As it turns out, Twitch deletes your videos after 14 days, so I have also been uploading them to YouTube. Feel free to subscribe.

Writing sensible defaults means that the dev we might perform or the CSS we might write for a new feature/component is additive, and you do not need to reset libraries and/or write code to overwrite other code. Here's an outline of creating sensible defaults for our region template within the new localgov_base theme - region.html.twig.

I've started streaming some of my work, especially if it's contributions to open source, on twitch if you'd like to follow along/subscribe. As it turns out, Twitch deletes your videos after 14 days, so I have also been uploading them to YouTube. Feel free to subscribe.

When looking recently at the template for the video paragraph type in LocalGov Drupal, I thought, "hang on, is this necessary?". As it turns out, we have a template for it, but I'm not sure it's needed.

One of the reasons is must be there however is because we have set a template suggestion for it in the localgov_subsites_paragraphs.module file, so if it's removed we will get a Twig error about an undefined template.

Let's go through this template implementation step-by-step to show how sometimes less is more.

I've started streaming some of my work, especially if it's contributions to open source, on twitch if you'd like to follow along/subscribe. As it turns out, Twitch deletes your videos after 14 days, so I have also been uploading them to YouTube. Feel free to subscribe.

When it comes to CSS frameworks, I really don't like using them. I find them bloat and opinionated. I also think they go against basic principles of scaling a web project, because each dependency we include forces that dependency on all users.

If there's something that we can do in a few lines of code that means we don't need to depend on a framework, I think we owe to to ourselves to investigate it. Here's my proof-of-concept of a grid system based on the GOVUK and NHSUK design systems' grid systems. It's only about 30 lines of CSS.

I've started streaming some of my work, especially if it's contributions to open source, on twitch if you'd like to follow along/subscribe. As it turns out, Twitch deletes your videos after 14 days, so I have also been uploading them to YouTube. Feel free to subscribe.

LocalGov Drupal is the distribution for local councils in the United Kingdom. When reviewing the alert banner module, there were a few small issues that niggled me with the alert banner HTML and CSS. I wanted to make sure the HTML followed BEM naming conventions, and then the CSS the same. This means the CSS is easier to read, and relies less on nested selectors.

There was also a tiny issue with hover states on some of the buttons.

I've started streaming some of my work, especially if it's contributions to open source, on twitch if you'd like to follow along/subscribe. As it turns out, Twitch deletes your videos after 14 days, so I have also been uploading them to YouTube. Feel free to subscribe.

tl;dr

1. Create a theme.
2. Use CSS variables for as many CSS properties as you can - spacing, line-height, font, etc.
3. Create a sub-theme.
4. Create a library in that sub-theme which just has a CSS file.
5. Use that CSS file to set values for the variables in the sub-theme.

E.g. in the base theme, you could have padding on top and bottom of header. This could be a variable called --section-spacing-v (as in, section spacing vertical) and set to 2rem. Then in the sub-theme you could set that variable to 4rem. Continue for any other variables you want to override - fonts, line-height, etc.

For added points, you could take these variables and save them as theme settings, so site builders can set them.

I've started streaming some of my work, especially if it's contributions to open source, on twitch if you'd like to follow along/subscribe. As it turns out, Twitch deletes your videos after 14 days, so I have also been uploading them to YouTube. Feel free to subscribe.

In this first video, we will look at creating the view mode pattern and then integrating that with Drupal.

In the second video, we will see how to create a views listing in Patternlab and integrate that with Drupal - in essence, we just clone the views templates into Patternlab, so the heavy lifting is done for us, no need to recreate the wheel.

Let me know in the comments what other videos you might like to see.