LocalGov Drupal Docs
Overview
  • Developers
  • Content designers
  • Designers
  • Contributing
  • Credits System
  • Accessibility
  • Governance
Microsites
Main site
GitHub
Overview
  • Developers
  • Content designers
  • Designers
  • Contributing
  • Credits System
  • Accessibility
  • Governance
Microsites
Main site
GitHub
  • For Developers
  • Getting started
    • Drupal requirements
    • Working with Lando
    • Working with DDEV
    • Debugging with Xdebug
    • Working with Gitpod
  • General configuration
    • Content types
    • Custom modules
    • Image styles
    • Media types
    • Paragraph types
    • Taxonomies
    • User roles
  • Features
    • Services: Technical
    • Alert banners: Technical
    • News: Technical
    • Directories: Technical
    • Location Geo: Technical
    • Subsites: Technical
    • Workflows: Technical
  • Theme
    • LocalGov Base
    • Regions
    • LocalGov Theme (Deprecated)
    • Skeleton theme (Deprecated)
    • Admin theme (Deprecated)
  • Testing
  • Development workflows
    • Installing and deploying a LocalGov Drupal site
  • Hosting
    • Hosting a LocalGov Drupal site
    • Hosting LocalGov Drupal on Azure
  • Release statuses
    • Release statuses
  • Security
    • Best practice guidance
    • Single Sign-On
  • Quality standards
    • Quality standards: Accessibility
    • Quality standard: Documentation
    • Quality standard: Testing
  • How-tos
    • How to use Gitpod to test modules in the browser

LocalGov Base

GitHub Repository

This theme was developed with scalability and easy of use in mind. That means, the theme should be a very good starting point for any website using the LocalGov Drupal distribution, and it provides an easy way to be customised out of the box.

Inline Documentation

Instead of creating documentation for the theme and storing it in a wiki or something else that is unlikely to be updated, we have written detailed comments inline with the code. This should make it easier to know exactly what code block any specific documentation item refers to.

Installation

The theme should automatically be installed through composer if you're getting setup on the localgov project. You can also simply clone the theme and remove the .git folder, make sure you clone from the latest production branch.

Getting started

Sub-theme

Create a sub-them by running the sub-theme creation script in the /scripts directory, like so:

  cd web/themes/contrib/localgov_base/
  bash scripts/create_subtheme.sh

You need to enter two items when creating a sub-theme:

  1. The name of the theme, this can be anything and can include spaces, e.g. Super Council
  2. The machine name for the theme, this must start with a letter and use only lowercase letters and underscores, e.g. super_council

Create a sub-theme demo:

Custom styles

The theme relies on css custom properties (aka css variables). You can set these in the css/variables.css file in your subtheme.

This is where you set your colours, fonts, spacing, etc. Then you "apply" these variables where needed, like so:

  :root {
    /* Set/Override Variables */
    --color-accent: red;
    --spacing-largest: 5rem;

    /* Apply Variables */
    --color-link: var(--color-accent);
    --breadcrumbs-background-color: var(--color-accent);
    --section-spacing-vertical-header: var(--spacing-largest);
  }

If you need to add any CSS overides, you can create custom CSS files for these and then a library/libraries to attach them to your components.

Automated CSS Coding Standards

To make sure we follow Drupal's CSS coding standards (without having to think about it), there is a handy npm script to automatically scan and fix any CSS coding standards violations.

Simply run npm install to get the necessary packages, then run npm start to scan the files and fix any issues.

Help us improve this page!
Last Updated:
Prev
Features
Next
Testing