Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Drupal: Theming Like a Pro

Parent Feed: 

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

  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.

Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web