Clear floated content within a container using a pseudo element

Media query for retina images (device-pixel-ratio)

Focused text

Provides an outline to clearly indicate when the target element is focused. Used for interactive text-based elements.

Font Face - GDS Transport

Outputs the font-face declaration for GDS Transport at the root of the CSS document the first time it is called.

Generate grid column styles

Creates a grid column with standard gutter between the columns.

Grid widths are defined in the $govuk-grid-widths map.

By default the column width changes from 100% to specified width at the 'tablet' breakpoint, but other breakpoints can be specified using the $at parameter.

Media Query

This is a currently a wrapper for sass-mq - abstracted so that we can replace it in the future if we so choose.

Arrow mixin

Generate Arrows (triangles) by using a mix of transparent (1) and coloured borders. The coloured borders inherit the text colour of the element (2).

Ensure the arrow is rendered correctly if browser colours are overridden by providing a clip path (3). Without this the transparent borders are overridden to become visible which results in a square.

We need both because older browsers do not support clip-path.

Responsive spacing

Adds responsive spacing (either padding or margin, depending on $property) by fetching a 'spacing map' from the responsive spacing scale, which defines different spacing values at different breakpoints.

To generate responsive spacing, use 'govuk-responsive-margin' or 'govuk-responsive-padding' mixins

Responsive margin

Adds responsive margin by fetching a 'spacing map' from the responsive spacing scale, which defines different spacing values at different breakpoints. Wrapper for the _govuk-responsive-spacing mixin.

Responsive padding

Adds responsive padding by fetching a 'spacing map' from the responsive spacing scale, which defines different spacing values at different breakpoints. Wrapper for the _govuk-responsive-spacing mixin.

'Common typography' helper

Sets the font family and associated properties, such as font smoothing. Also overrides the font for print.

Text colour helper

Sets the text colour, including a suitable override for print.

Regular font weight helper

Bold font weight helper

Responsive typography helper

Takes a 'font map' as an argument and uses it to create font-size and line-height declarations for different breakpoints, and for print.

Example font map:

$my-font-map: ( null: ( font-size: 16px, line-height: 20px ), tablet: ( font-size: 19px, line-height: 25px ), print: ( font-size: 14pt, line-height: 1.15 ) );

Font helper

Hide an element visually, but have it available for screen readers

Hide an element visually, but have it available for screen readers whilst allowing the element to be focused when navigated to via the keyboard (e.g. for the skip link)

This is slightly less opinionated about borders and padding to make it easier to style the focussed element.

Grid width percentage

Calculate the height of an equilateral triangle

Multiplying half the length of the base of an equilateral triangle by the square root of three gives us its height. We use 1.732 as an approximation.

Single point spacing

Returns measurement corresponding to the spacing point requested.

Convert line-heights specified in pixels into a relative value, unless they are already unit-less (and thus already treated as relative values) or the units do not match the units used for the font size.

Get colour

Get the colour for a government organisation

Make a colour darker by mixing it with black

Make a colour lighter by mixing it with white

Common link styles

Provides the typography and focus state, regardless of link style.

Link decoration

Provides the text decoration for links, including thickness and underline offset. Use this mixin only if you cannot use the govuk-link-common mixin.

Link hover decoration

Provides the text decoration for links in their hover state, for you to use within a :hover pseudo-selector. Use this mixin only if you cannot use the govuk-link-common mixin.

Default link styles

Makes links use the default unvisited, visited, hover and active colours.

If you use this mixin in a component, you must also include the govuk-link-common mixin to get the correct focus and hover states.

Error link styles

Makes links use the error colour. The link will darken if it's active or a user hovers their cursor over it.

If you use this mixin in a component, you must also include the govuk-link-common mixin to get the correct focus and hover states.

Success link styles

Makes links use the success colour. The link will darken if it's active or a user hovers their cursor over it.

If you use this mixin in a component, you must also include the govuk-link-common mixin to get the correct focus and hover states.

Muted link styles

Makes links use the secondary text colour. The link will darken if it's active or a user hovers their cursor over it.

If you use this mixin in a component, you must also include the govuk-link-common mixin to get the correct focus and hover states.

Text link styles

Makes links use the primary text colour, in all states. Use this mixin for navigation components, such as breadcrumbs or the back link.

If you use this mixin in a component, you must also include the govuk-link-common mixin to get the correct focus and hover states.

Inverse link styles

Makes links white, in all states. Use this mixin if you're displaying links against a dark background.

If you use this mixin in a component, you must also include the govuk-link-common mixin to get the correct focus and hover states.

Default link styles, without a visited state

Makes links use the default unvisited, hover and active colours, with no distinct visited state.

Use this mixin when it's not helpful to distinguish between visited and non-visited links. For example, when you link to pages with frequently-changing content, such as the dashboard for an admin interface.

If you use this mixin in a component, you must also include the govuk-link-common mixin to get the correct focus and hover states.

Remove underline from links

Remove underlines from links unless the link is active or a user hovers their cursor over it. This has no effect in Internet Explorer 8 (IE8), because IE8 does not support :not.

Include link destination when printing the page

If the user prints the page, add the destination URL after the link text, if the URL starts with /, http:// or https://.

Width container mixin

Used to create page width and custom width container classes.

Directions for spacing

Spacing override classes

Generate spacing override classes for the given property (e.g. margin) for each point in the spacing scale.

Path to the assets directory, with trailing slash.

This is the directory where the images and fonts subdirectories live. You will need to make this directory available via your application – see the README for details.

Path to the images folder, with trailing slash.

Path to the fonts folder, with trailing slash.

Custom image URL function

If the built-in image URL helper does not meet your needs, you can specify the name of a custom handler – either built in or by writing your own function.

If you are writing your own handler, ensure that it returns a string wrapped with url()

Custom font URL function

If the built-in font URL helper does not meet your needs, you can specify the name of a custom handler – either built in or by writing your own function.

If you are writing your own handler, ensure that it returns a string wrapped with url()

Path to the assets directory, with trailing slash.

This is the directory where the images and fonts subdirectories live. You will need to make this directory available via your application – see the README for details.

Path to the images folder, with trailing slash.

Path to the fonts folder, with trailing slash.

Custom image URL function

If the built-in image URL helper does not meet your needs, you can specify the name of a custom handler – either built in or by writing your own function.

If you are writing your own handler, ensure that it returns a string wrapped with url()

Custom font URL function

If the built-in font URL helper does not meet your needs, you can specify the name of a custom handler – either built in or by writing your own function.

If you are writing your own handler, ensure that it returns a string wrapped with url()

Brand colour

Focus colour

Used for outline (and background, where appropriate) when interactive elements (links, form controls) have keyboard focus.

Focused text colour

Ensure that the contrast between the text and background colour passes WCAG Level AA contrast requirements.

Error colour

Used to highlight error messages and form controls in an error state

Link colour

Visited link colour

Link hover colour

Active link colour

Brand colour

Text colour

Canvas background colour

Used by the footer component and template to give the illusion of a long footer.

Body background colour

Text colour for print media

Use 'true black' to avoid printers using colour ink to print body text

Secondary text colour

Used for 'muted' text, help text, etc.

Focus colour

Used for outline (and background, where appropriate) when interactive elements (links, form controls) have keyboard focus.

Focused text colour

Ensure that the contrast between the text and background colour passes WCAG Level AA contrast requirements.

Error colour

Used to highlight error messages and form controls in an error state

Border colour

Used for borders, separators, rules, keylines etc.

Input border colour

Used for form inputs and controls

Input hover colour

Used for hover states on form controls

Link colour

Visited link colour

Link hover colour

Active link colour

Organisation colours

Use 'legacy' colour palette

Whether or not to use the colour palette from GOV.UK Elements / Frontend Toolkit, for teams that are migrating to GOV.UK Frontend and may be using components from both places in a single application.

Legacy colour palette

This exists only because you cannot easily set a !default variable conditionally (thanks to the way scope works in Sass) so we set $govuk-colour-palette using the if function.

Modern colour palette

This exists only because you cannot easily set a !default variable conditionally (thanks to the way scope works in Sass) so we set $govuk-colour-palette using the if function.

Colour palette

Compatibility Mode: alphagov/govuk_frontend_toolkit

Set this to true if you are also including alphagov/govuk_frontend_toolkit in your application.

Compatibility Mode: alphagov/govuk_template

Enabling this will:

• prevent GOV.UK Frontend from including the New Transport typeface, as it'll use the version of New Transport included with GOV.UK Template.

• alter some of the CSS outputted by GOV.UK Frontend to 'counter' specific CSS rules in GOV.UK Template.

Set this to true if you are also including alphagov/govuk_template in your application.

Compatibility Mode: alphagov/govuk_elements

Enabling this will:

• alter some of the CSS outputted by GOV.UK Frontend to 'counter' specific CSS rules in GOV.UK Elements.

Set this to true if you are also including alphagov/govuk_elements in your application.

Compatibility Product Map

Maps product names to their settings that we can use to lookup states from within the @govuk-compatibility mixin.

Include 'global' styles

Whether to style paragraphs (<p>) and links (<a>) without explicitly having to apply the govuk-body and govuk-link classes.

Whether the stylesheet being built is targeting Internet Explorer 8.

The name of the breakpoint to use as the target when rasterizing media queries

Enable new link styles

If enabled, the link styles will change. Underlines will:

• be consistently thinner and a bit further away from the link text
• have a clearer hover state, where the underline gets thicker to make the link stand out to users

You should only enable the new link styles if both:

• you've made sure your whole service will use the new style consistently
• you do not have links in a multi-column CSS layout - there's a Chromium bug that affects links

Enable new link styles

If enabled, the link styles will change. Underlines will:

• be consistently thinner and a bit further away from the link text
• have a clearer hover state, where the underline gets thicker to make the link stand out to users

You should only enable the new link styles if both:

• you've made sure your whole service will use the new style consistently
• you do not have links in a multi-column CSS layout - there's a Chromium bug that affects links

Thickness of link underlines

The default will be either:

• 1px
• 0.0625rem, if it's thicker than 1px because the user has changed the text size in their browser

Set this variable to false to avoid setting a thickness.

Thickness of link underlines

The default will be either:

• 1px
• 0.0625rem, if it's thicker than 1px because the user has changed the text size in their browser

Set this variable to false to avoid setting a thickness.

Offset of link underlines from text baseline

Set this variable to false to avoid setting an offset.

Offset of link underlines from text baseline

Set this variable to false to avoid setting an offset.

Thickness of link underlines in hover state

The default for each link will be the thickest of the following:

• 3px
• 0.1875rem, if it's thicker than 3px because the user has changed the text size in their browser
• 0.12em (relative to the link's text size)

Set this variable to false to avoid setting a thickness.

Thickness of link underlines in hover state

The default for each link will be the thickest of the following:

• 3px
• 0.1875rem, if it's thicker than 3px because the user has changed the text size in their browser
• 0.12em (relative to the link's text size)

Set this variable to false to avoid setting a thickness.

Width of main container

Map of grid column widths

Width of gutter between grid columns

Width of half the gutter between grid columns

Standard border width

Wide border width

Narrow border width

Form control border width

Form control border width when in error state

Form group border width when in error state

Border width of focus outline

Hover width for form controls with a hover state

Breakpoint definitions

Show active breakpoint in top-right corner.

Only use this during local development.

Single point spacing variables. Access using govuk-spacing() (see helpers/spacing).

Responsive spacing maps

These definitions are used to generate responsive spacing that adapts according to the breakpoints (see 'helpers/spacing'). These maps should be used wherever possible to standardise responsive spacing.

You can define different behaviour on tablet and desktop. The 'null' breakpoint is for mobile.

Access responsive spacing with govuk-responsive-margin or govuk-responsive-padding mixins (see helpers/spacing).

List of font families to use if using GDS Transport (the default font 'stack' for GOV.UK)

List of font families to use if using GDS Transport (the default font 'stack' for GOV.UK)

Use 'legacy' fonts

Whether or not to use v1 nta font from GOV.UK Elements / Frontend Toolkit, for teams that are migrating to GOV.UK Frontend and may be using components from both places in a single application.

Font families to use for all typography on screen media

Font families to use when displaying tabular numbers

Font families to use for print media

Include the default @font-face declarations

If you have set $govuk-font-family to something other than $govuk-font-family-gds-transport this option is disabled by default.

Font weight for regular typography

Font weight for bold typography

Whether or not to define font sizes in rem, improving accessibility by allowing users to adjust the base font-size. This is enabled by default, unless any of the compatibility mode settings are enabled.

You should make sure that $govuk-root-font-size is set correctly for your project.

Root font size

This is used to calculate rem sizes for the typography, and should match the effective font-size of your root (or html) element.

Ideally you should not be setting the font-size on the html or root element in order to allow it to scale with user-preference, in which case this should be set to 16px.

If you are integrating Frontend into an existing project that also uses alphagov/govuk_template and you wish to enable $govuk-typography-use-rem then you should set this to 10px to match the 62.5% (10px) base font size that govuk_template sets on the

Responsive typography font map

This is used to generate responsive typography that adapts according to the breakpoints.

Font size and font weight can be defined for each breakpoint. You can define different behaviour on tablet and desktop. The 'null' breakpoint is for mobile.

Line-heights will automatically be converted from pixel measurements into relative values. For example, with a font-size of 16px and a line-height of 24px, the line-height will be converted to 1.5 before output.

You can also specify a separate font size and line height for print media.

Conditional Compatibility Mixin

Selectively output a block (available to the mixin as @content) if a given $product is also identified as being used in the project.

This can then be used to include styles that are only needed to override styles provided by those other products (e.g. where govuk_template has a very specific link selector that otherwise affects buttons).

Export module

Ensure that the modules of CSS that we define throughout Frontend are only included in the generated CSS once, no matter how many times they are imported across the individual components.

Conditionally include rules only for IE8

Conditionally exclude rules for IE8

List of modules which have already been exported

Font URL

If a custom font-url handler is defined ($govuk-font-url-function) then it will be called, otherwise a url will be returned with the filename appended to the font path.

Font URL

If a custom font-url handler is defined ($idsk-font-url-function) then it will be called, otherwise a url will be returned with the filename appended to the font path.

Syntactic sugar around Sass' built-in if function that does not require you to pass a value for $if-false.

Image URL

If a custom image-url handler is defined ($idsk-image-url-function) then it will be called, otherwise a url will be returned with the filename appended to the image path.

Image URL

If a custom image-url handler is defined ($govuk-image-url-function) then it will be called, otherwise a url will be returned with the filename appended to the image path.

Convert pixels to em

Convert pixels to rem

The $govuk-root-font-size (defined in settings/_typography-responsive.scss) must be configured to match the font-size of your root (html) element

content menu navigation

logo part

logo svg image

logo svg image - mobile view

search bar

language selector

social icons

navigation

arrow

navigation - submenu

navigation - hmaburger button

Hide the inverted crown when printing in browsers that don't support SVG.

Do not append link href to GOV.UK link when printing (e.g. '(/)')

Font Face - Source Sans Pro

Outputs the font-face declaration for Source Sans Pro at the root of the CSS document the first time it is called.

Font Face - Font Awesome

Outputs the font-face declaration for Font Awesome at the root of the CSS document the first time it is called.