Wagtail’s user interface is built with:
HTML using Django templates
SVG for our icons, minified with SVGO
Linting and formatting¶
Here are the available commands:
make lintwill run all linting,
make lint-serverlints templates,
make lint-clientlints JS/CSS.
make formatwill run all formatting and fixing of linting issues. There is also
Have a look at our
Makefile tasks and
package.json scripts if you prefer more granular options.
Familiarise yourself with our stylelint-config-wagtail configuration, which details our preferred code style.
font-size, because they offer absolute control over text. Additionally, unit-less
line-heightis preferred because it does not inherit a percentage value of its parent element, but instead is based on a multiplier of the
Always use variables for design tokens such as colours or font sizes, rather than hard-coding specific values.
We use the
w-prefix for all styles intended to be reusable by Wagtail site implementers.
This is an area of active improvement for Wagtail, with ongoing discussions.
Always use the
blocktranstags to prevent unnecessary whitespace from being added to the translation strings.