Published: April 28, 2021
Drupal: Theming Like a Pro
Ok, maybe the title is a bit ambitious, but here's a little proof-of-concept video of any idea for sub-theming I have been working on.
tl;dr
- Create a theme.
- Use CSS variables for as many CSS properties as you can - spacing, line-height, font, etc.
- Create a sub-theme.
- Create a library in that sub-theme which just has a CSS file.
- 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.