Utility classes

Manipulate your HTML the easy way

We included some utility classes to make your life easier, also see utility_spacers.scss

Text-alignment, variable per breakpoint

Class Value
ta-left text-align: left
ta-right text-align: right
ta-center text-align: center
ta-left-b{breakpoint} text-align: left for that breakpoint and higher
ta-right-b{breakpoint} text-align: right for that breakpoint and higher
ta-center-b{breakpoint} text-align: center for that breakpoint and higher

Text-alignment examples

Align center
					
Align center, left breakpoint 3+
					
Align right breakpoint b5+
					

Floating and clearing, variable per breakpoint

Class Value
fl float: left
fr float: right
fn float: none
fl-b{breakpoint} float: left for that breakpoint and higher
fr-b{breakpoint} float: right for that breakpoint and higher
fn-b{breakpoint} float: none for that breakpoint and higher
Class Value
cl clear: left
cr clear: right
cb clear: both
cn clear: none
cl-b{breakpoint} clear: left for that breakpoint and higher
cr-b{breakpoint} clear: right for that breakpoint and higher
cb-b{breakpoint} clear: both for that breakpoint and higher
cn-b{breakpoint} clear: none for that breakpoint and higher

Clearfix

Placing the cf class on a container will clear the floating elements within.

Class Value
cf .cf:before, .cf:after, ul.fields > li:before, ul.fields > li:after {content:"";display:table;}
.cf:after, .g:after, ul.fields > li:after {clear:both;}

Border radius

Class Value
radius border-radius: $radius;

Hide/show

Class Value
hide display: none;
show display: block;

Image-alignment

Wrap your image in a figure element with these classes to float your images within chunks of text.

Class Value
img-right display: block; margin: .8rem auto 1.6rem; text-align: center;
img-left display: block; margin: .8rem auto 1.6rem; text-align: center;
img-center display: block; margin: .8rem auto 1.6rem; text-align: center;

Full width element

Add this class to stretch your element to the full width of his parent.

Class Value
full-block width: 100%; display: block;