Groundwork Test: Helpers

This page generates elements that use Groundwork helpers using all 3 possible ways: classes, includes, and extends.

Things are good when:

Classes
Mixins
Placeholders
padded
padded
padded
padded-mobile
padded-mobile
padded-mobile
padded-small-tablet
padded-small-tablet
padded-small-tablet
padded-ipad
padded-ipad
padded-ipad
padded-desktop
padded-desktop
padded-desktop
pad-top
pad-top
pad-top
pad-top-mobile
pad-top-mobile
pad-top-mobile
pad-top-small-tablet
pad-top-small-tablet
pad-top-small-tablet
pad-top-ipad
pad-top-ipad
pad-top-ipad
pad-top-desktop
pad-top-desktop
pad-top-desktop
pad-right
pad-right
pad-right
pad-right-mobile
pad-right-mobile
pad-right-mobile
pad-right-small-tablet
pad-right-small-tablet
pad-right-small-tablet
pad-right-ipad
pad-right-ipad
pad-right-ipad
pad-right-desktop
pad-right-desktop
pad-right-desktop
pad-bottom
pad-bottom
pad-bottom
pad-bottom-mobile
pad-bottom-mobile
pad-bottom-mobile
pad-bottom-small-tablet
pad-bottom-small-tablet
pad-bottom-small-tablet
pad-bottom-ipad
pad-bottom-ipad
pad-bottom-ipad
pad-bottom-desktop
pad-bottom-desktop
pad-bottom-desktop
pad-left
pad-left
pad-left
pad-left-mobile
pad-left-mobile
pad-left-mobile
pad-left-small-tablet
pad-left-small-tablet
pad-left-small-tablet
pad-left-ipad
pad-left-ipad
pad-left-ipad
pad-left-desktop
pad-left-desktop
pad-left-desktop
gapped
gapped
gapped
gapped-mobile
gapped-mobile
gapped-mobile
gapped-small-tablet
gapped-small-tablet
gapped-small-tablet
gapped-ipad
gapped-ipad
gapped-ipad
gapped-desktop
gapped-desktop
gapped-desktop
gap-top
gap-top
gap-top
gap-top-mobile
gap-top-mobile
gap-top-mobile
gap-top-small-tablet
gap-top-small-tablet
gap-top-small-tablet
gap-top-ipad
gap-top-ipad
gap-top-ipad
gap-top-desktop
gap-top-desktop
gap-top-desktop
gap-right
gap-right
gap-right
gap-right-mobile
gap-right-mobile
gap-right-mobile
gap-right-small-tablet
gap-right-small-tablet
gap-right-small-tablet
gap-right-ipad
gap-right-ipad
gap-right-ipad
gap-right-desktop
gap-right-desktop
gap-right-desktop
gap-bottom
gap-bottom
gap-bottom
gap-bottom-mobile
gap-bottom-mobile
gap-bottom-mobile
gap-bottom-small-tablet
gap-bottom-small-tablet
gap-bottom-small-tablet
gap-bottom-ipad
gap-bottom-ipad
gap-bottom-ipad
gap-bottom-desktop
gap-bottom-desktop
gap-bottom-desktop
gap-left
gap-left
gap-left
gap-left-mobile
gap-left-mobile
gap-left-mobile
gap-left-small-tablet
gap-left-small-tablet
gap-left-small-tablet
gap-left-ipad
gap-left-ipad
gap-left-ipad
gap-left-desktop
gap-left-desktop
gap-left-desktop
inline
inline
inline
inline-mobile
inline-mobile
inline-mobile
inline-small-tablet
inline-small-tablet
inline-small-tablet
inline-ipad
inline-ipad
inline-ipad
inline-desktop
inline-desktop
inline-desktop
block
block
block
block-mobile
block-mobile
block-mobile
block-small-tablet
block-small-tablet
block-small-tablet
block-ipad
block-ipad
block-ipad
block-desktop
block-desktop
block-desktop
zero
zero
zero
zero-mobile
zero-mobile
zero-mobile
zero-small-tablet
zero-small-tablet
zero-small-tablet
zero-ipad
zero-ipad
zero-ipad
zero-desktop
zero-desktop
zero-desktop
pull-left
pull-left
pull-left
pull-left-mobile
pull-left-mobile
pull-left-mobile
pull-left-small-tablet
pull-left-small-tablet
pull-left-small-tablet
pull-left-ipad
pull-left-ipad
pull-left-ipad
pull-left-desktop
pull-left-desktop
pull-left-desktop
pull-right
pull-right
pull-right
pull-right-mobile
pull-right-mobile
pull-right-mobile
pull-right-small-tablet
pull-right-small-tablet
pull-right-small-tablet
pull-right-ipad
pull-right-ipad
pull-right-ipad
pull-right-desktop
pull-right-desktop
pull-right-desktop
bordered
bordered
bordered
bordered-mobile
bordered-mobile
bordered-mobile
bordered-small-tablet
bordered-small-tablet
bordered-small-tablet
bordered-ipad
bordered-ipad
bordered-ipad
bordered-desktop
bordered-desktop
bordered-desktop
border-right
border-right
border-right
border-right-mobile
border-right-mobile
border-right-mobile
border-right-small-tablet
border-right-small-tablet
border-right-small-tablet
border-right-ipad
border-right-ipad
border-right-ipad
border-right-desktop
border-right-desktop
border-right-desktop
border-left
border-left
border-left
border-left-mobile
border-left-mobile
border-left-mobile
border-left-small-tablet
border-left-small-tablet
border-left-small-tablet
border-left-ipad
border-left-ipad
border-left-ipad
border-left-desktop
border-left-desktop
border-left-desktop
border-top
border-top
border-top
border-top-mobile
border-top-mobile
border-top-mobile
border-top-small-tablet
border-top-small-tablet
border-top-small-tablet
border-top-ipad
border-top-ipad
border-top-ipad
border-top-desktop
border-top-desktop
border-top-desktop
border-bottom
border-bottom
border-bottom
border-bottom-mobile
border-bottom-mobile
border-bottom-mobile
border-bottom-small-tablet
border-bottom-small-tablet
border-bottom-small-tablet
border-bottom-ipad
border-bottom-ipad
border-bottom-ipad
border-bottom-desktop
border-bottom-desktop
border-bottom-desktop
align-top
align-top
align-top
align-top-mobile
align-top-mobile
align-top-mobile
align-top-small-tablet
align-top-small-tablet
align-top-small-tablet
align-top-ipad
align-top-ipad
align-top-ipad
align-top-desktop
align-top-desktop
align-top-desktop
align-right
align-right
align-right
align-right-mobile
align-right-mobile
align-right-mobile
align-right-small-tablet
align-right-small-tablet
align-right-small-tablet
align-right-ipad
align-right-ipad
align-right-ipad
align-right-desktop
align-right-desktop
align-right-desktop
align-bottom
align-bottom
align-bottom
align-bottom-mobile
align-bottom-mobile
align-bottom-mobile
align-bottom-small-tablet
align-bottom-small-tablet
align-bottom-small-tablet
align-bottom-ipad
align-bottom-ipad
align-bottom-ipad
align-bottom-desktop
align-bottom-desktop
align-bottom-desktop
align-left
align-left
align-left
align-left-mobile
align-left-mobile
align-left-mobile
align-left-small-tablet
align-left-small-tablet
align-left-small-tablet
align-left-ipad
align-left-ipad
align-left-ipad
align-left-desktop
align-left-desktop
align-left-desktop
align-center
align-center
align-center
align-center-mobile
align-center-mobile
align-center-mobile
align-center-small-tablet
align-center-small-tablet
align-center-small-tablet
align-center-ipad
align-center-ipad
align-center-ipad
align-center-desktop
align-center-desktop
align-center-desktop
justify
justify
justify
justify-mobile
justify-mobile
justify-mobile
justify-small-tablet
justify-small-tablet
justify-small-tablet
justify-ipad
justify-ipad
justify-ipad
justify-desktop
justify-desktop
justify-desktop
truncate
truncate
truncate
truncate-mobile
truncate-mobile
truncate-mobile
truncate-small-tablet
truncate-small-tablet
truncate-small-tablet
truncate-ipad
truncate-ipad
truncate-ipad
truncate-desktop
truncate-desktop
truncate-desktop
center
center
center
center-mobile
center-mobile
center-mobile
center-small-tablet
center-small-tablet
center-small-tablet
center-ipad
center-ipad
center-ipad
center-desktop
center-desktop
center-desktop
disabled
disabled
disabled
disabled-mobile
disabled-mobile
disabled-mobile
disabled-small-tablet
disabled-small-tablet
disabled-small-tablet
disabled-ipad
disabled-ipad
disabled-ipad
disabled-desktop
disabled-desktop
disabled-desktop
space
space
space
space-mobile
space-mobile
space-mobile
space-small-tablet
space-small-tablet
space-small-tablet
space-ipad
space-ipad
space-ipad
space-desktop
space-desktop
space-desktop
round
round
round
round-mobile
round-mobile
round-mobile
round-small-tablet
round-small-tablet
round-small-tablet
round-ipad
round-ipad
round-ipad
round-desktop
round-desktop
round-desktop
rotate-90
rotate-90
rotate-90
rotate-90-mobile
rotate-90-mobile
rotate-90-mobile
rotate-90-small-tablet
rotate-90-small-tablet
rotate-90-small-tablet
rotate-90-ipad
rotate-90-ipad
rotate-90-ipad
rotate-90-desktop
rotate-90-desktop
rotate-90-desktop
rotate-180
rotate-180
rotate-180
rotate-180-mobile
rotate-180-mobile
rotate-180-mobile
rotate-180-small-tablet
rotate-180-small-tablet
rotate-180-small-tablet
rotate-180-ipad
rotate-180-ipad
rotate-180-ipad
rotate-180-desktop
rotate-180-desktop
rotate-180-desktop
rotate-270
rotate-270
rotate-270
rotate-270-mobile
rotate-270-mobile
rotate-270-mobile
rotate-270-small-tablet
rotate-270-small-tablet
rotate-270-small-tablet
rotate-270-ipad
rotate-270-ipad
rotate-270-ipad
rotate-270-desktop
rotate-270-desktop
rotate-270-desktop
rotate-90-ctr
rotate-90-ctr
rotate-90-ctr
rotate-90-ctr-mobile
rotate-90-ctr-mobile
rotate-90-ctr-mobile
rotate-90-ctr-small-tablet
rotate-90-ctr-small-tablet
rotate-90-ctr-small-tablet
rotate-90-ctr-ipad
rotate-90-ctr-ipad
rotate-90-ctr-ipad
rotate-90-ctr-desktop
rotate-90-ctr-desktop
rotate-90-ctr-desktop
rotate-180-ctr
rotate-180-ctr
rotate-180-ctr
rotate-180-ctr-mobile
rotate-180-ctr-mobile
rotate-180-ctr-mobile
rotate-180-ctr-small-tablet
rotate-180-ctr-small-tablet
rotate-180-ctr-small-tablet
rotate-180-ctr-ipad
rotate-180-ctr-ipad
rotate-180-ctr-ipad
rotate-180-ctr-desktop
rotate-180-ctr-desktop
rotate-180-ctr-desktop
rotate-270-ctr
rotate-270-ctr
rotate-270-ctr
rotate-270-ctr-mobile
rotate-270-ctr-mobile
rotate-270-ctr-mobile
rotate-270-ctr-small-tablet
rotate-270-ctr-small-tablet
rotate-270-ctr-small-tablet
rotate-270-ctr-ipad
rotate-270-ctr-ipad
rotate-270-ctr-ipad
rotate-270-ctr-desktop
rotate-270-ctr-desktop
rotate-270-ctr-desktop

Spacer Modifiers

padded double
@include _padded(2);
extend-padded extend-double
padded triple
@include _padded(3);
extend-padded extend-triple
gapped double
@include _gapped(2);
extend-gapped extend-double
gapped triple
@include _gapped(3);
extend-gapped extend-triple