LocalGov Drupal docs

# LocalGov Base

GitHub Repository (opens new window)

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.

# IE11 Fallbacks

Within the css directories (opens new window) there are files with the naming convention of .ie11.css . These define the fallback for IE11 (which does not support css variables). This means that by default all sites using this theme will look the same in IE11.

If you wish to support IE11 in a sub-theme, you can simply copy these files and add your own overrides.

← Regions →