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
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
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
Algorithm | Hash digest | |
---|---|---|
SHA256 | 62c64fcf513a0fe0d36c0e414dfcf40a5083c0d6c80acfd55fe2562fd781d8cc |
|
MD5 | 9230424b225234c24b0d90021bc2337b |
|
BLAKE2b-256 | 083bf211bce3df5fde8f8156457fe4dc757df7090c38af222ac2e4a097b2b68a |
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
Algorithm | Hash digest | |
---|---|---|
SHA256 | d347c38f5a0b815d6c7854ad93a34aede7d419f1827a97e80e75dfeb6bac1c16 |
|
MD5 | 36d53ab1db60f750bf5c3005f95f8845 |
|
BLAKE2b-256 | 6b48f65631f3369b0c821bafbcfd378b952c93f90e7e71ab2139f2014ca893f9 |