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. These classes can also be used to align buttons.

  
    .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.

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