Skip to main content

NHSUK Frontend Styles for Wagtail

Project description

Wagtail NHS.UK frontend

A wagtail implementation of the NHS frontend v5.2.0 standard components.

Installation

Install the pypi package

pip install wagtail-nhsuk-frontend

Add to your INSTALLED_APPS in wagtail settings

INSTALLED_APPS = [
  ...

  'wagtailnhsukfrontend',

  ...
]

Use blocks in your streamfields

from wagtail.admin.edit_handlers import FieldPanel, StreamFieldPanel
from wagtail.core.models import Page
from wagtail.core.fields import StreamField

from wagtailnhsukfrontend.blocks import ActionLinkBlock, WarningCalloutBlock

class HomePage(Page):
  body = StreamField([
      # Include any of the blocks you want to use.
      ('action_link', ActionLinkBlock()),
      ('callout', WarningCalloutBlock()),
  ])

  content_panels = Page.content_panels + [
      StreamFieldPanel('body'),
  ]

Use templatetags

{% load nhsukfrontend_tags %}

<html>
...
<body>
  {% breadcrumb %}
</body>
</html>

Use template includes

{% include 'wagtailnhsukfrontend/header.html' with show_search=True %}

See the component documentation for a list of components you can use.

Include the CSS in your base template

  <link rel="stylesheet" type="text/css" href="{% static 'wagtailnhsukfrontend/css/nhsuk.min.css' %}">

Include the Javascript in your base template

  <script type="text/javascript" src="{% static 'wagtailnhsukfrontend/js/nhsuk.min.js' %}" defer></script>

Upgrading

If you are upgrading from v0 to v1, see the changelog.

This CSS and JS is taken directly from the nhsuk-frontend library and provided in this package for convenience.

If you have a more complicated frontend build such as compiling your own custom styles, you might want to install from npm instead.

Contributing

See the contributing documentation to run the application locally and contribute changes.

Further reading

See more documentation

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

wagtail-nhsuk-frontend-1.2.1.zip (96.7 kB view details)

Uploaded Source

File details

Details for the file wagtail-nhsuk-frontend-1.2.1.zip.

File metadata

  • Download URL: wagtail-nhsuk-frontend-1.2.1.zip
  • Upload date:
  • Size: 96.7 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/3.4.2 importlib_metadata/4.8.1 pkginfo/1.7.1 requests/2.26.0 requests-toolbelt/0.9.1 tqdm/4.62.3 CPython/3.9.7

File hashes

Hashes for wagtail-nhsuk-frontend-1.2.1.zip
Algorithm Hash digest
SHA256 63e33ec897cd78677ae2a3ac7f8f3b58521774c91ff01635b787ebfc63420608
MD5 7568fa5065f45d91f8cad7bfe49f914a
BLAKE2b-256 f00a01faca3e530d5e1d54c1d0d68bf1f376cff487f110725b81a4b694270c4a

See more details on using hashes here.

Supported by

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