Skip to main content

A GOV.UK design system template pack for Django Pattern Library.

Project description

GDS template pack

This is a django-pattern-library template pack for the GOV.UK design system.

Quickstart

This is a minimal how-to for installation and usage.

Install using your package manager of choice. e.g. with pip:

pip install gds-template-pack

Add to installed apps and add a section to the django-pattern-library settings:

# settings.py

INSTALLED_APPS = [
    # ...
    "pattern_library",
    "gds_template_pack",
]

# django-pattern-library
PATTERN_LIBRARY = {
    "SECTIONS": (
        ("gds", ("gds",)),
        # ...
    ),
    # ...
}

Usage

Once installed and configured, you can reference the various templates as you would do with any Django app. e.g. to use the back-link component: {% include "gds/back-link/back-link.html" with link_url="https://example.com" link_text="Back" %})

Development

You'll need Python 3.8 or above and Poetry installed.

Setup

Install the Python dependencies using Poetry:

poetry install

By default, this will create a virtual environment in ./.venv/ and install the dependencies there. If this doesn't happen, check your settings against the documentation.

Then start the Django development server and browse the template pack at http://localhost:8000/:

poetry run dev_app/manage.py runserver 8000

Frontend Development

To set up the frontend development environment, first run the above commands to start the django server. Then, run the following commands in a separate terminal window.

fnm use
npm install
npm run start

If you haven't installed fnm yet, you can install it with brew install fnm on macOS / Linux. Further install instructions are on the fnm repository, or alternatively you can use nvm use instead.

Navigate to http://localhost:3000 to see the project running.

Run npm run dev to tell WebPack to watch for SCSS and JS changes without adding livereload to your browser. The files will recompile automatically, but you'll need to manually refresh your webpage to see changes take effect.

GOV UK Frontend CSS, JS and assets

This repo installs the GOV UK frontend styling and JavaScript via NPM. Where custom components are added to this repo, their styles and JavaScript are found in the static-src directory.

To add the GOV UK NPM package separately to your project, this can be done using the following instructions:

  • Install the govuk-frontend package: npm install govuk-frontend --save
  • Follow the documentation on how to get the CSS, JS, fonts and images working

Custom Components

We've added custom styles and JavaScript for some of the components in this pattern library, as they aren't officially supported by GDS yet.

GOV UK assets are stored in the root folder (under assets/) as this is where webpack will look for them when compiling the GOV UK node module SCSS. govuk.js is a separate JS file with all the official components JavaScript; it is loaded this way following the GOV get started advice.

Add any new SCSS or JS files to the static-src/ directory under dev_app/. The static folder must remain under dev_app as this is where Django will look for static files. Static file loading is only suitable for development purposes - this repository is not suitable as a base for production ready sites.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

gds-template-pack-0.1.1.tar.gz (14.7 kB view details)

Uploaded Source

Built Distribution

gds_template_pack-0.1.1-py3-none-any.whl (29.3 kB view details)

Uploaded Python 3

File details

Details for the file gds-template-pack-0.1.1.tar.gz.

File metadata

  • Download URL: gds-template-pack-0.1.1.tar.gz
  • Upload date:
  • Size: 14.7 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: poetry/1.1.13 CPython/3.9.10 Linux/5.14.0-1033-oem

File hashes

Hashes for gds-template-pack-0.1.1.tar.gz
Algorithm Hash digest
SHA256 62c64fcf513a0fe0d36c0e414dfcf40a5083c0d6c80acfd55fe2562fd781d8cc
MD5 9230424b225234c24b0d90021bc2337b
BLAKE2b-256 083bf211bce3df5fde8f8156457fe4dc757df7090c38af222ac2e4a097b2b68a

See more details on using hashes here.

File details

Details for the file gds_template_pack-0.1.1-py3-none-any.whl.

File metadata

  • Download URL: gds_template_pack-0.1.1-py3-none-any.whl
  • Upload date:
  • Size: 29.3 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: poetry/1.1.13 CPython/3.9.10 Linux/5.14.0-1033-oem

File hashes

Hashes for gds_template_pack-0.1.1-py3-none-any.whl
Algorithm Hash digest
SHA256 d347c38f5a0b815d6c7854ad93a34aede7d419f1827a97e80e75dfeb6bac1c16
MD5 36d53ab1db60f750bf5c3005f95f8845
BLAKE2b-256 6b48f65631f3369b0c821bafbcfd378b952c93f90e7e71ab2139f2014ca893f9

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page