.u--color- utility classes..u--color- utility class to an a tag..u--background-color- utility classes..u--border utility class..u--border-color- utility classes..u--border-width-0 a utility classes..u--margin- utility classes. Note that each numerical postfix represents a pixel value. When compiled, these get converted to rem units.top, right, bottom and left modifiers, like so:.u--padding- utility classes. Note that each numerical postfix represents a pixel value. When compiled, these get converted to rem units.top, right, bottom and left modifiers, like so:.u--width- utility classes. Note that each numerical postfix represents a percentage of the containing element..u--float- utility classes. You can also use the .u--clearfix utility to clear floats.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor dolor at suscipit tristique. Curabitur condimentum euismod velit non feugiat. Praesent tincidunt nibh non ullamcorper convallis. Suspendisse potenti. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Donec euismod, turpis sed facilisis congue, sem risus tempus nunc, in rutrum mauris neque non est. Phasellus imperdiet gravida ligula. Mauris in augue blandit, iaculis turpis a, hendrerit nisl. Fusce sem sem, commodo id orci vel, mollis pellentesque nisi. Cras a lorem iaculis, cursus leo id, tempor neque.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras aliquam sit amet metus vel vestibulum. Suspendisse ultricies, eros et venenatis vulputate, lorem magna rhoncus eros, quis ultricies eros augue at felis. Phasellus finibus suscipit aliquet. Cras mattis dui a nisl dictum sagittis. Suspendisse pulvinar venenatis aliquet.
.u--truncate..u--squash to remove margin top from the first child and margin bottom from the last child. Alternatively, classes of .u--squash-start or .u--squash-end can be used to squash spacing individually. A common use case, as seen below, is to remove the margin from the last paragraph in a sequence of paragraphs.Ex anim cillum enim ullamco aute sint. Cupidatat sint elit aliqua et magna commodo. Fugiat proident consectetur non magna in fugiat irure fugiat fugiat occaecat adipisicing. Laboris nostrud ea occaecat dolore exercitation non veniam esse mollit commodo duis incididunt. Nostrud enim excepteur sunt adipisicing sit pariatur esse. Ipsum ad et commodo commodo occaecat eiusmod non eu excepteur irure adipisicing esse sunt aute.
Eu ex anim cillum enim ullamco. Sint dolor cupidatat sint elit. Et magna commodo cupidatat fugiat proident consectetur non magna in. Irure fugiat fugiat occaecat adipisicing nisi laboris nostrud. Occaecat dolore exercitation non veniam esse mollit commodo duis incididunt pariatur nostrud enim excepteur. Adipisicing sit pariatur esse elit ipsum ad et commodo commodo occaecat eiusmod. Eu excepteur irure adipisicing esse sunt.
.u--font-weight- utility classes..u--font-family- utility classes..u--font-style- utility classes..u--text-align- utility classes.Eiusmod adipisicing dolor elit consequat cupidatat tempor aute magna reprehenderit. Magna ipsum consequat aute quis dolore ad sunt cillum non quis esse tempor. Elit nostrud minim ullamco Lorem cillum officia mollit magna nisi irure sint in duis incididunt. Consequat id aute deserunt ullamco nostrud proident occaecat anim exercitation deserunt ex est nulla.
Proident pariatur eiusmod laborum esse consectetur nisi incididunt mollit. Officia eiusmod dolor do laboris enim aliqua Lorem. Officia sit duis velit nostrud quis cillum incididunt ex sunt eiusmod dolor. Eiusmod adipisicing dolor elit consequat cupidatat tempor aute magna reprehenderit. Magna ipsum consequat aute quis dolore ad sunt cillum non quis esse tempor. Elit nostrud minim ullamco Lorem cillum officia mollit magna nisi irure sint in duis incididunt. Consequat id aute deserunt ullamco nostrud proident occaecat anim exercitation deserunt ex est.
Eiusmod dolor do laboris enim aliqua Lorem eiusmod officia sit duis velit. Quis cillum incididunt ex sunt eiusmod dolor mollit eiusmod adipisicing dolor elit consequat cupidatat. Aute magna reprehenderit exercitation magna ipsum consequat aute quis dolore ad sunt cillum non. Esse tempor officia elit nostrud minim ullamco Lorem cillum officia mollit magna nisi irure. In duis incididunt veniam consequat id. Deserunt ullamco nostrud proident occaecat anim exercitation deserunt ex.
Ipsum consequat aute quis dolore. Sunt cillum non quis esse tempor officia elit nostrud minim ullamco Lorem cillum. Mollit magna nisi irure sint in duis incididunt veniam consequat. Aute deserunt ullamco nostrud proident occaecat anim exercitation deserunt.
.u--text-transform- utility classes.Officia eiusmod dolor do laboris enim aliqua Lorem. Officia sit duis velit nostrud quis cillum incididunt ex sunt eiusmod dolor. Eiusmod adipisicing dolor elit consequat cupidatat tempor aute magna reprehenderit exercitation. Ipsum consequat aute quis dolore. Sunt cillum non quis esse tempor officia elit nostrud minim ullamco. Cillum officia mollit magna nisi irure sint in duis incididunt veniam consequat id aute deserunt.
Veniam ad nostrud deserunt culpa. Et eiusmod Lorem proident pariatur eiusmod laborum esse consectetur nisi incididunt mollit et. Eiusmod dolor do laboris enim aliqua Lorem eiusmod officia sit duis velit. Quis cillum incididunt ex sunt eiusmod dolor mollit eiusmod adipisicing dolor elit consequat cupidatat. Aute magna reprehenderit exercitation magna ipsum consequat aute quis dolore ad sunt cillum non. Esse tempor officia elit nostrud minim ullamco Lorem cillum officia mollit magna nisi irure. In duis incididunt veniam consequat id aute.
Quis cillum incididunt ex sunt eiusmod dolor mollit eiusmod adipisicing dolor elit consequat cupidatat. Aute magna reprehenderit exercitation magna ipsum consequat aute quis dolore ad sunt cillum non. Esse tempor officia elit nostrud minim ullamco Lorem cillum officia mollit magna nisi irure. In duis incididunt veniam consequat id.
To make media embeds like iframe, video, embed and object elements responsive, simply wrap them in a div element with the .u--embed-responsive class.
The default aspect ratio is 16x9. You can change the aspect ratio by adding one of the following modifying classes:
.u--embed-responsive--21x9.u--embed-responsive--16x9.u--embed-responsive--4x3.u--embed-responsive--1x1Below is an example of the 4x3 aspect ratio.
.u--display- and .u--hidden utility classes.The full list of display utilities includes:
.u--display-none.u--display-inline.u--display-inline-block.u--display-block.u--display-table.u--display-table-row.u--display-flex.u--display-inline-flexTo simply hide elements, use the .u--hidden utility class. This will set the style to display: none.
Alter the horizontal and vertical direction of flex items.
Control the wrapping behavior of flex items.
Adjust the horizontal alignment of flex items.
Adjust the vertical alignment of flex items.
Below is an example of how you can combine a few different utility classes to set a default alignment on the parent flex container (using .u--align-items-), and then align each child flex item individually, using .u--align-self-.
Change the order of flex items by applying the .u--order- class with a value between 1 and 12.
The following table shows all the available flex utilities:
| Base | Postfix |
|---|---|
u--flex-wrap- | nowrapwrapwrap-reverse |
u--flex-direction- | rowrow-reversecolumncolumn-reverse |
u--justify-content- | flex-startflex-endcenterspace-betweenspace-aroundspace-evenly |
u--align-items- | flex-startflex-endcenterstretchbaseline |
u--align-content- | flex-startflex-endcenterspace-betweenspace-around |
u--align-self- | autoflex-startflex-endcenterbaselinestretch |
u--flex-grow- | 01 |
u--flex-shrink- | 01 |
u--order- | A number 1 through 12 |
You may also apply responsive postfixes to any of the following utility classes to make them apply only for certain screen sizes.
.u--margin-.u--width-.u--float-.u--display-.u--padding-.u--flex-wrap-.u--flex-direction-.u--justify-content-.u--align-items-.u--align-content-.u--align-self-.u--flex-grow-.u--flex-shrink-.u--order-| Screen/Device Size | Postfix | Meaning |
|---|---|---|
| All | (no postfix) | all screen/device sizes |
| Extra Small | -xs-xs-min | xs only xs and up |
| Small | -sm-sm-min-sm-max | sm only sm and up sm and down |
| Medium | -md-md-min-md-max | md only md and up md and down |
| Large | -lg-lg-min-lg-max | lg only lg and up lg and down |
| Extra Large | -xl-xl-min | xl only xl and up |
-pr | print only |
For example, if you only wanted something to display on large screen sizes (lg) and up and not others, you might do the following:
I'm only visible on large and extra large screen sizes!
xs) and small (sm) screen sizes, you could do one of the following:I'm only visible on extra small and small screen sizes!
I'm only visible on extra small and small screen sizes!
I'm only visible on extra small and small screen sizes!