{% extends "wagtailadmin/base.html" %} {% load wagtailadmin_tags i18n staticfiles gravatar %} {% block extra_css %} {{ block.super }} {% endblock %} {% block titletag %}{% trans 'Styleguide' %}{% endblock %} {% block bodyclass %}styleguide{% endblock %} {% block content %} {% trans "Styleguide" as title_trans %} {% include "wagtailadmin/shared/header.html" with title=title_trans %}

Contents

Colour palette

Typography

This is an h1

This is an h2

This is an h3

This is an h4

This is an h5

This is a paragraph

  1. These are
  2. items in an
  3. ordered list
This is an example of code

Help text

Help text is not to be confused with the messages that appear in a banner drop down from the top of the screen. Help text are permanent instructions, visible on every page view, that explain or warn about something.

This is help text that might be just for information, explaining what happens next, or drawing the user's attention to something they're about to do

It could be multiple lines

A warning message might be output in cases where a user's action could have serious consequences

A critical message would probably be rare, in cases where a particularly brittle or dangerously destructive action could be performed and needs to be warned about.

Listings

table listing

Heading 1 Heading 2 Heading 3

TD with title class

Regular listing TD Regular listing TD

Unpublished TD with title class

Regular listing TD Regular listing TD

TD with title class

Regular listing TD Regular listing TD

ul listing

ul listings with multiple columns

Listings used for choosing a list item

Heading 1 Heading 2 Heading 3

TD with title class

Regular listing TD Regular listing TD

Disabled TD with title class

Regular listing TD Regular listing TD

TD with title class

Regular listing TD Regular listing TD

Pagination

{% paginate example_page %}

Buttons

Do not use {% filter force_escape|lower %}{% endfilter %} use {% filter force_escape|lower %}

Secondary buttons

button link

Small buttons

button link

(secondary)

button link

Disabled buttons

button link

Bi-color icon buttons with text

Note that input elements are not supported by any icon buttons.

button link

(small)

button link

Icon buttons without text

button link

(small)

button link

Colour signifiers

Positive

yes yes

Negative

No No

Buttons with internal loading indicators (currently only button supported)

Note that in some browsers, clicking these buttons minutely affects the appearance of Dropdown buttons, below. This is yet to be resolved.

Secondary

Small

Buttons where the text is replaced on click

Arbitrarily bigger

Mixtures

A link button A non-link button button link

Button groups

Adds rounding to first and last items only


A link button A non-link button

Forms

    {% for field in example_form %} {% if field.name == 'file' %} {% include "wagtailimages/images/_file_field.html" %} {% else %} {% include "wagtailadmin/shared/field_as_li.html" %} {% endif %} {% endfor %}
  • {% trans "Delete image" %}

TODO: Rich text input

TODO: Snippet chooser

Page editor

Tabs

Tabs are currently only used following headers, where they often appear merged with the bottom of the header:

{% include "wagtailadmin/shared/header.html" with title=title_trans merged=1 %}

Tabs can also indicate errors:

{% include "wagtailadmin/shared/header.html" with title=title_trans merged=1 %}

Progress indicators

60%

 

50%

Misc formatters

Avatar icons

Gravatar set (normal)

Gravatar not set (normal)

Gravatar set (small)

Gravatar not set (small)

Status tags

Primary tag
Secondary tag

Loading mask

Add the following div around any items you wish to display with a spinner overlay and fading out

Remove the "loading" class to disable the effect

Icons

IE9 debugging

Internet Explorer 9 has two critical limitations in its CSS support: a maximum of 31 stylesheets per page and a maximum of 4096 selectors per stylesheet. The latter is particularly problematic when CSS is concatenated.

{% endblock %} {% block extra_js %} {{ block.super }} {% include "wagtailadmin/pages/_editor_js.html" %} {% endblock %}