Constants

The Design System sets the colour, font-size and width of fields using CSS classes. Rather than deal with the CSS directly the template pack provides a set of (python) classes with constants for each of the values. After all, who wants to be typing something like govuk-!-width-three-quarters every time they want to set the width of a field?. The constants are translated into the respective CSS class when a widget is rendered.

Colours

A set of constants defining the names for colours.

BLUE

GREEN

GREY

ORANGE

PINK

PURPLE

RED

TURQUOISE

YELLOW

Currently, Tag is the only component that explicitly sets a colour. For everything else the colour is set in the stylesheet.

HTML.tag("Pending", Colour.BLUE)

The colour value is a simple string, e.g. 'blue' The class method converts it into the respective CSS class, e.g. govuk-tag--blue.

If a new class is added but is has not been added to the template pack, then just pass the name:

HTML.tag("Pending", 'lilac')

Font sizes

A set of constants for setting the size of labels, legends or headings.

SMALL

MEDIUM

LARGE

EXTRA LARGE

Set the label size for a Text input:

Field.text("name", label_size=Size.SMALL)

Set the legend size for a set of checkboxes:

Field.checkboxes("multiple", legend_size=Size.MEDIUM)

Fixed widths

A set of constants for setting the width of a Text inputs to a fixed number of characters.

TWO

Set the Text input to be 2 characters wide.

THREE

Set the Text input to be 3 characters wide.

FOUR

Set the Text input to be 4 characters wide.

FIVE

Set the Text input to be 5 characters wide.

TEN

Set the Text input to be 10 characters wide.

TWENTY

Set the Text input to be 20 characters wide.

THIRTY

Set the Text input to be 30 characters wide.

Field.text("phone", field_width=Fixed.TWENTY)

The constant is just an integer. The Field class method converts this into the respective Design System CSS class, for example govuk-input--width-20.

You always have the option of adding the CSS class to the field:

Field.text("phone", css_class="govuk-input--width-20")

If the fixed width is not supported by the Design System then the text field will take up the full width of the parent container.

Fluid widths

A set of constants for setting a fluid width on Text inputs.

ONE_QUARTER

Set the Text input to be 25% of the width of the parent.

ONE_THIRD

Set the Text input to be 33% of the width of the parent.

ONE_HALF

Set the Text input to be 50% of the width of the parent.

TWO_THIRDS

Set the Text input to be 66% of the width of the parent.

THREE_QUARTERS

Set the Text input to be 75% of the width of the parent.

FULL

Set the Text input to be 100% of the width of the parent.

Field.text("name", field_width=Fluid.TWO_THIRDS),

The constant is just a simple string, e.g. 'two-thirds'. The Field class method converts this into the respective Design System CSS class, for example govuk-!-width-two-thirds.

As with fixed widths, you always have the option of adding the CSS class to the field:

Field.text("phone", css_class="govuk-!-width-two-thirds")

If the width is not supported by the Design System then the text field will take up the full width of the parent container.