Drupal Training 8: LocalGov Drupal Theme System

Flexibility and Customisation

One of the highlights of the LocalGov Drupal theming system is its flexibility. Developers are empowered to make significant changes with only small amounts of code. This flexibility is crucial for adapting the generated themes to fit the unique branding requirements of each local government entity. By leveraging this system, developers can focus on enhancing the user experience and visual appeal of their sites.

Accessibility

We are committed in LocalGov Drupal to meeting WCAG 2.2 AA accessibility standards. This means when you install the LocalGov Base theme as your base theme, you will have an accessible website. It is up to you to make sure it remains that way through your choice of fonts, colours, interactions, etc.

LocalGov Drupal Theme Generator

LocalGov Drupal comes with a theme generator that streamlines the process of developing custom themes. It's simple to use. In your terminal, 

1. cd to the localgov_base directory (probably cd web/themes/contrib/localgov_base.
2. Then run the theme generation script - bash scripts/create_subtheme.sh.
3. Fill out the prompts (theme name, etc).
4. Presto - a LocalGov Drupal subtheme that follows all the LocalGov Drupal best practices.

CSS System

Our CSS system follows Drupal coding standards and practices, most notably a BEM naming convention.

What makes it stand out however, is our use of CSS variables. You can theme a huge amount of your site by just opening the variables.css file (in your_theme/css/base/variables.css and adding/amending values for variables we have set. Some simple examples:

1. Change the default spacing between items, set --grid-column-spacing to something other than the default (--spacing). Maybe change it to --spacing-large.
2. Change the separator for breadcrumbs, set --breadcrumbs-divider to » or // for example
3. Update the line-height across the site, set --line-height to whatever value you want.

Take time to understand our CSS system, it's very powerful and means you won't need to maintain very many custom CSS files or override many Drupal templates.

JavaScript System

We have minimal JavaScript in our theme. There are a number of items in the your_theme/js directory for header, menu, and a few other things. All JS follows Drupal's coding standards and patterns. Make sure to understand how Drupal's behaviors, context, and once() work.

Template System

Most content types and components have their own templates in LocalGov Drupal. This is to make sure we can fully follow BEM naming conventions, follow the GOV.UK Design System, and create templates that should not need to be overridden by custom themes very often.

Overriding templates means that you are responsible for all updates to that templates and that template will no longer receive updates from the LocalGov Base theme. Proceed with caution!

Training and Standards

Even with a flexible system, developers should undergo training to effectively employ the LocalGov Drupal theming system. This training is essential not only for understanding the customisation options but also for ensuring that the themes meet critical standards. Developers must focus on:

• Accessibility: Ensuring the site is navigable and usable for all individuals, including those with disabilities.
• Performance: Optimising the site for quick loading times and smooth user interaction.
• Brand Consistency: Aligning the site’s theme with the council's branding guidelines.

Filed Under:

1. LocalGov Drupal
2. Drupal
3. Drupal Training