Skip to main content

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

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.

  
    .wmcads-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 */
    .wmcads-container.wmcads-container--main
  

Grid

The WMCA Design System uses its own custom syntax grid system adopted from Pure CSS Grid. The grid system is already included in the bundled wmcads-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 .wmcads-grid in our design system

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

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

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

Floats

Floats an element in the intended direction.

  
    .wmcads-float-left
    .wmcads-float-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.

  
    .wmcads-hide-mobile /* Hide only on mobile devices or smaller (less than 48em)  */
    .wmcads-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 .wmcads-{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...

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