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
Class Purpose
.no-margin Removes all margin
.no-padding Removes all padding
.no-float Removes all floats
.no-background Removes background
.no-border Removes all borders
.no-select Disables text selection

Typography Helpers
Class Purpose
.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
Class Purpose
.block Sets element to display block
.inline-block Sets element to display inline-block
.inline Sets element to display inline
.none Sets element to display none

Flex Helpers
Class Purpose
.flex-row Sets elements flex direction to row
.flex-column Sets elements flex direction to column
.flex-space-around Sets element to justify content with space around
.flex-space-between Sets element to justify content with space in between
.flex-start Sets element to justify content to the left
.flex-center Sets element to justify content to the center
.flex-end Sets element to justify content to the right
.flex-wrap Sets element to display all content to flow on multiple lines
.flex-nowrap Sets element to display all content on a single line

Float Helpers
Class Purpose
.left Sets element to float left for mobile devices and up
.right Sets element to float right for mobile devices and up
.left-tablet Sets element to float left for tablet devices and up
.right-tablet Sets element to float right for tablet devices and up
.left-desktop Sets element to float left for desktop devices and up
.right-desktop Sets element to float right for desktop devices and up
.left-hd Sets element to float left for HD devices and up
.right-hd Sets element to float right for HD devices and up
.center-element Center aligns an element with a width (removes float)

Position Helpers
Class Purpose
.relative Sets element to position relative
.absolute Sets element to position absolute
.static Sets element to position static

Accessibility Helpers
Class Purpose
.sr Hides an element visually, but is available for screenreaders

Image Helpers
Class Purpose
.img-left Floats an image left and applies a right margin of 20px
.img-right Floats an image right and applies a left margin of 20px
.img-fluid Adds a max width property of 100% so images shrink to device size.

Animation Helpers
Class Purpose
.animate Applies an animation speed of 1 second
.animate-infinite Runs an animation infinite number of times (loop)


Grid

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