Skip to main content

Your privacy settings

We use cookies to help you with journey planning and relevant disruptions, remember your login and show you content you might be interested in. If you’re happy with the use of cookies by West Midlands Combined Authority and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.

Manage Cookies
Beta

This is a new service - your feedback will help us to improve it.

Styles

Utility classes

About

There are a variety of utility classes that can be used with the existing components and styles on.

Containers

Containers are used to wrap content in a 'container'. The container will have a fixed max size and be centered on the page, it will adjust to 100% width when the page width is less than the container size.

  
    .wmnds-container /* Container with max-width of 1280px */

    /* This should be used on your main content section and will
    add a margin top to seperate from header/breadcrumb section */
    .wmnds-container.wmnds-container--main
  

Grid

The WMN Design System uses its own custom syntax grid system adopted from Pure CSS Grid. The grid system is already included in the bundled wmnds-components.min.css file so you don't need to include it seperately.

You can Refer to the Pure CSS Grid documentation for reference on how to use our grid system, but bear in mind that:

  • .pure-g becomes .wmnds-grid in our design system

  • .pure-u-* becomes .wmnds-col-* in our design system

You can also use modifier classes on the same element where the class .wmnds-grid is being used.

  
    .wmnds-grid--justify-between
    .wmnds-grid--justify-around
    .wmnds-grid--justify-end
    .wmnds-grid--justify-center
  

Information for designers

The grid is part of the Design System Sketch library or as a standalone template file.

Screen sizes

  • Extra Small Devices (≥320px, 2-col + 1-col)
  • Small Device 2 (SM) (≥568px 6-col + 3-col + 2-col)
  • Small Device (MD) (≥768px)
  • Medium Device (LG) (≥992px)
  • Large Device (XL) (≥1280px)

Sketch grid sizes

  • 1280px: 12 columns, 960px total width, 80px each which includes 16px padding and 64px content area column
  • 992px: 12 columns, 960px total width, 80px each which includes 16px padding and 64px content area column
  • 768px: 12 columns, 576px width, 48px each which includes 16px padding and 32px content area column
  • 568px: 6 columns, 426px width, 71px each which includes 16px padding and 55px content area column
  • 568px: 3 columns, 426px width, 142px each which includes 16px padding and 126px content area column
  • 568px: 2 columns, 568px width, 142px each which includes padding 16px and 126px content area column
  • 320px: 2 columns, 320px width, 213px each which includes padding 16px and 197px content area column
  • 320px: 1 column, 320px total width, 320px each which includes 16px padding and 304px content area column

Floats

Floats an element in the intended direction.

  
    .wmnds-float-left
    .wmnds-float-right
  

Text Align

Aligns text in the intended direction.

  
    .wmnds-text-align-left
    .wmnds-text-align-center
    .wmnds-text-align-right
  

Show or hide on devices

When you want to hide an element based on if the device width is a desktop or mobile device.

  
    .wmnds-hide-mobile /* Hide only on mobile devices or smaller (less than 48em)  */
    .wmnds-hide-desktop /* Hide only on desktop devices or larger (greater than 48em) */
  

Spacing

The spacing utility classes are used to adjust whitespace for an element via padding and margins.

Before using the spacing utility classes, please consider:

  • Most components already come with defined spacing. This spacing shouldn't be overwritten.
  • Spacing should be used as a last resort to help layout components on a page.
  • You can use none as a size to enforce zero margin or padding.

The classes are named using the format .wmnds-{type}-{side}-{size}.

Where {type} is one of:

  • m - for classes that set margin
  • p - for classes that set padding

Where {side} is one of:

  • t - for classes that set margin-top or padding-top
  • r - for classes that set margin-right or padding-right
  • b - for classes that set margin-bottom or padding-bottom
  • l - for classes that set margin-left or padding-left
  • blank - for classes that set a margin or padding on all 4 sides of the element

Where {size} is one of:

  • xs - set size to 0.25rem
  • xsm - set size to 0.5rem
  • sm - set size to 0.75rem
  • md - set size to 1rem
  • lg - set size to 2rem
  • xl - set size to 3rem

Some examples of using these utility classes...

  
    .wmnds-m-xs // applies a margin of 0.25rem to all sides
    .wmnds-p-b-lg // applies a padding-bottom of 2rem
    .wmnds-m-l-none // sets left margin to 0
  

Grid column spacing

Spacing can be applied in between .wmnds-col-* elements by adding a class to the parent .wmnds-grid.

The classes are named using the format .wmnds-grid--spacing-{col-count}-{size}.

Where {col-count} is the number of columns per row and {size} is the same as in the spacing utility classes above.

Spacing can also be applied responsively using the format .wmnds-grid--spacing-{breakpoint}-{col-count}-{size}.

Where {breakpoint} is one of breakpoint sizes described in the grid section.

Some examples of using these utility classes...

  
    .wmnds-grid--spacing-2-md // applies a 1rem spacing between 2 columns
    .wmnds-grid--spacing-lg-4-lg // applies a 2rem spacing between 4 columns above a screen width of 1024px
  

Background Colour

Changes background to the intended colour.

  
    .bg-default
    .bg-white
    .bg-disabled-elements
    .bg-planned-disruption
    .bg-transparent