CSS Helpers

Global helpers for removing styles, modifying typography, font weights, text positioning, general layout, form elements and accessibility helpers.


Overview

A full list of helpers are categorised and listed below.

Reset Helpers

  • .no-margin
    Removes all margin for small devices (mobile) and up
  • .no-padding
    Removes all padding for small devices (mobile) and up
  • .no-float
    Removes all floats for small devices (mobile) and up
  • .no-background
    Removes background for small devices (mobile) and up
  • .no-border
    Removes borders for small devices (mobile) and up
  • .no-select
    Disabled text selection for small devices (mobile) and up
  • .no-margin-m
    Removes all margin for medium devices (tablet) and up
  • .no-padding-m
    Removes all padding for medium devices (tablet) and up
  • .no-float-m
    Removes all floats for medium devices (tablet) and up
  • .no-margin-l
    Removes all margin for large devices (desktop) and up
  • .no-padding-l
    Removes all padding for large devices (desktop) and up
  • .no-float-l
    Removes all floats for large devices (desktop) and up
  • .no-margin-xl
    Removes all margin for extra large devices (HD) and up
  • .no-padding-xl
    Removes all padding for extra large devices (HD) and up
  • .no-float-xl
    Removes all floats for extra large devices (HD) and up

Typography Helpers

  • .strong
    Applies strong styles
  • .em
    Applies italic styles
  • .abbr
    Applies abbreviation styles
  • .small
    Applies small styles
  • .mark
    Applies mark styles
  • .sub
    Applies sub styles
  • .sup
    Applies sup styles
  • .del
    Applies del styles
  • .font-100
    Applies a font weight of 100
  • .font-200
    Applies a font weight of 200
  • .font-300
    Applies a font weight of 300
  • .font-400
    Applies a font weight of 400
  • .font-500
    Applies a font weight of 500
  • .font-600
    Applies a font weight of 600
  • .font-700
    Applies a font weight of 700
  • .font-800
    Applies a font weight of 800
  • .font-900
    Applies a font weight of 900
  • .font-normal
    Applies normal font style
  • .font-italic
    Applies italic font style
  • .uppercase
    Transforms text to uppercase
  • .lowercase
    Transforms text to lowercase
  • .capitalize
    Transforms text to capitalize
  • .text-left
    Left align text
  • .text-right
    Right align text
  • .text-center
    Center align text
  • .text-justify
    Justifies text

Display Helpers

  • .none
    Hides element for small devices (mobile) and up
  • .block
    Sets element to block for small devices (mobile) and up
  • .inline-block
    Sets element to inline-block for small devices (mobile) and up
  • .inline
    Sets element to inline for small devices (mobile) and up
  • .none-m
    Hides element for medium devices (tablet) and up
  • .block-m
    Sets element to block for medium devices (tablet) and up
  • .inline-block-m
    Sets element to inline-block for medium devices (tablet) and up
  • .inline-m
    Sets element to inline for medium devices (tablet) and up
  • .none-l
    Hides element for large devices (desktop) and up
  • .block-l
    Sets element to block for large devices (desktop) and up
  • .inline-block-l
    Sets element to inline-block for large devices (desktop) and up
  • .inline-l
    Sets element to inline for large devices (desktop) and up
  • .none-xl
    Hides element for extra large devices (HD) and up
  • .block-xl
    Sets element to block for extra large devices (HD) and up
  • .inline-block-xl
    Sets element to inline-block for extra large devices (HD) and up
  • .inline-xl
    Sets element to inline for extra large devices (HD) and up

Flex Helpers

  • .flex-row
    Sets elements flex direction to row for small devices (mobile) and up
  • .flex-column
    Sets elements flex direction to be column for small devices (mobile) and up
  • .flex-space-around
    Sets element to justify content with space around for small devices (mobile) and up
  • .flex-space-between
    Sets element to justify content with space in between for small devices (mobile) and up
  • .flex-start
    Sets element to justify content to the left for small devices (mobile) and up
  • .flex-center
    Sets element to justify content to the center for small devices (mobile) and up
  • .flex-end
    Sets element to justify content to the right for small devices (mobile) and up
  • .flex-wrap
    Sets element to display all content to flow on multiple lines for small devices (mobile) and up
  • .flex-nowrap
    Sets element to display all content on a single line for small devices (mobile) and up
  • .flex-row-m
    Sets elements flex direction to row for medium devices (tablet) and up
  • .flex-column-m
    Sets elements flex direction to be column for medium devices (tablet) and up
  • .flex-space-around-m
    Sets element to justify content with space around for medium devices (tablet) and up
  • .flex-space-between-m
    Sets element to justify content with space in between for medium devices (tablet) and up
  • .flex-start-m
    Sets element to justify content to the left for medium devices (tablet) and up
  • .flex-center-m
    Sets element to justify content to the center for medium devices (tablet) and up
  • .flex-end-m
    Sets element to justify content to the right for medium devices (tablet) and up
  • .flex-wrap-m
    Sets element to display all content to flow on multiple lines for medium devices (tablet) and up
  • .flex-nowrap-m
    Sets element to display all content on a single line for medium devices (tablet) and up
  • .flex-row-l
    Sets elements flex direction to row for large devices (desktop) and up
  • .flex-column-l
    Sets elements flex direction to be column for large devices (desktop) and up
  • .flex-space-around-l
    Sets element to justify content with space around for large devices (desktop) and up
  • .flex-space-between-l
    Sets element to justify content with space in between for large devices (desktop) and up
  • .flex-start-l
    Sets element to justify content to the left for large devices (desktop) and up
  • .flex-center-l
    Sets element to justify content to the center for large devices (desktop) and up
  • .flex-end-l
    Sets element to justify content to the right for large devices (desktop) and up
  • .flex-wrap-l
    Sets element to display all content to flow on multiple lines for large devices (desktop) and up
  • .flex-nowrap-l
    Sets element to display all content on a single line for large devices (desktop) and up
  • .flex-row-xl
    Sets elements flex direction to row for extra large devices (HD) and up
  • .flex-column-xl
    Sets elements flex direction to be column for extra large devices (HD) and up
  • .flex-space-around-xl
    Sets element to justify content with space around for extra large devices (HD) and up
  • .flex-space-between-xl
    Sets element to justify content with space in between for extra large devices (HD) and up
  • .flex-start-xl
    Sets element to justify content to the left for extra large devices (HD) and up
  • .flex-center-xl
    Sets element to justify content to the center for extra large devices (HD) and up
  • .flex-end-xl
    Sets element to justify content to the right for extra large devices (HD) and up
  • .flex-wrap-xl
    Sets element to display all content to flow on multiple lines for extra large devices (HD) and up
  • .flex-nowrap-xl
    Sets element to display all content on a single line for extra large devices (HD) and up

Float Helpers

  • .left
    Sets element to float left for small devices (mobile) and up
  • .right
    Sets element to float right for small devices (mobile) and up
  • .center
    Center aligns an element with a width and removes float for small devices (mobile) and up
  • .left-m
    Sets element to float left for medium devices (tablet) and up
  • .right-m
    Sets element to float right for medium devices (tablet) and up
  • .center-m
    Center aligns an element with a width and removes float for medium devices (tablet) and up
  • .left-l
    Sets element to float left for large devices (desktop) and up
  • .right-l
    Sets element to float right for large devices (desktop) and up
  • .center-l
    Center aligns an element with a width and removes float for large devices (desktop) and up
  • .left-xl
    Sets element to float left for extra large devices (HD) and up
  • .right-xl
    Sets element to float right for extra large devices (HD) and up
  • .center-xl
    Center aligns an element with a width and removes float for extra large devices (HD) and up

Position Helpers

  • .relative
    Sets elements position to relative for small devices (mobile) and up
  • .absolute
    Sets elements position to absolute for small devices (mobile) and up
  • .static
    Sets elements position to static for small devices (mobile) and up
  • .fixed
    Sets elements position to fixed for small devices (mobile) and up
  • .relative-m
    Sets elements position to relative for medium devices (tablet) and up
  • .absolute-m
    Sets elements position to absolute for medium devices (tablet) and up
  • .static-m
    Sets elements position to static for medium devices (tablet) and up
  • .fixed-m
    Sets elements position to fixed for medium devices (tablet) and up
  • .relative-l
    Sets elements position to relative for large devices (desktop) and up
  • .absolute-l
    Sets elements position to absolute for large devices (desktop) and up
  • .static-l
    Sets elements position to static for large devices (desktop) and up
  • .fixed-l
    Sets elements position to fixed for large devices (desktop) and up
  • .relative-xl
    Sets elements position to relative for extra large devices (HD) and up
  • .absolute-xl
    Sets elements position to absolute for extra large devices (HD) and up
  • .static-xl
    Sets elements position to static for extra large devices (HD) and up
  • .fixed-xl
    Sets elements position to fixed for extra large devices (HD) and up

Accessibility Helpers

  • .sr
    Hides an element visually, but is available for screenreaders

Image Helpers

  • .img-fluid
    Adds a max width of 100% so images shrink as the screen size reduces.

Animation Helpers

  • .animation
    Applies an animation speed of 1 second
  • .animation-infinite
    Runs an animation infinite number of times (loop)

Grid

A powerful and responsive grid to easily create your page layout.