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; |