Utilities
.u-*
Utilities are single use classes that can be used to apply some very targeted styling.
The utilities are included at the bottom of the stylesheet and many of them have !important
applied, so they will trump other styles where they are added.
Text align
- u-left-text: align left
- u-right-text: align right
- u-center-text: align center
Example
Left
Center
Right
Markup
<p class="u-left-text">Left</p> <p class="u-center-text">Center</p> <p class="u-right-text">Right</p>
Cover
- u-cover: Makes element cover other elements
Custom text
- u-locked: render a lock icon before the text
- u-fine-print: make the text small
Example
Locked text smaller
Markup
<p class="u-locked">Locked text <span class="u-fine-print">smaller</span></p>
Display
- u-inline-block: Set
display
to inline block.
Flexbox container
- u-flexbox-container: Container element for flexbox-items.
Floating
Utilities are single use classes that can be used to override some settings.
- u-left: float left
- u-right: float right
- u-clear: clearfix for container
Example
Left
Right
Markup
<div class="u-clear" style="background-color: white;"> <div class="u-left" style="background-color: #C90062; padding: 1rem;">Left</div> <div class="u-right" style="background-color: #C90062; padding: 1rem;">Right</div> </div>
Input border
- u-input-border: put a border around an input field.
Useful when background color is the same as input field color.
Example
Markup
<div style="background-color: white; padding: 5rem;"> <label for="input-border-example">Label</label> <input id="input-border-example" class="u-input-border" placeholder="I have a border!"/> </div>
Margin
- u-margin-top: Set a margin above the element
- u-margin-left: Set a margin to the left of the element
- u-margin-right: Set a margin to the right of the element
- u-margin-bottom: Set a margin below the element
Example
Some text.
Some text with a top margin.
Some other text.Text with a margin to the left.
Text with a margin to the right.Some other text.
Some text with a bottom margin.
Some text.
Markup
<div style="background: #FFF"> Some text. </div> <div class="u-margin-top" style="background: #FFF"> Some text with a top margin. </div> <br /> <div style="background: #FFF"> Some other text.<span class="u-margin-left">Text with a margin to the left.</span> </div> <br /> <div style="background: #FFF"> <span class="u-margin-right">Text with a margin to the right.</span>Some other text. </div> <br /> <div class="u-margin-bottom" style="background: #FFF"> Some text with a bottom margin. </div> <div style="background: #FFF"> Some text. </div>
Text modifiers
- u-large-text: larger font size
- u-success-text: success color text
- u-warning-text: warning color text
- u-error-text: error color text
Example
Markup
<p class="u-large-text">Large text</p> <p class="u-success-text">Success text</p> <p class="u-warning-text">Warning text</p> <p class="u-error-text">Error text</p> <a class="u-inherit-text">Link inherit color</a> <a class="u-underline-text">Underline text</a>