Utilities

Margins overview

Class Behavior
.u-m0 All margins 0.
.u-mr1 Margin right 50% of gutter
.u-mr2 Margin right 100% of gutter.
.u-ml1 Margin left 50% of gutter.
.u-ml2 Margin left 100% of gutter.
.u-mt1 Margin top 50% of baseline.
.u-mt2 Margin top 100% of baseline.
.u-mt3 Margin top 150% of baseline.
.u-mt4 Margin top 200% of baseline.
.u-mb1 Margin bottom 50% of baseline.
.u-mb2 Margin bottom 100% of baseline.
.u-mb3 Margin bottom 150% of baseline.
.u-mb4 Margin bottom 200% of baseline.

Aligns overview

Class Behavior
.u-textLeft Align text to left.
.u-textRight Align text to right.
.u-textCenter Align text to center.

Text colors overview

Class Behavior
.u-colorDanger Sets color to danger.
.u-colorPrimary Sets color to primary.
.u-colorSuccess Sets color to success.
.u-colorWarning Sets color to warning.

Text decorations overview

Class Behavior
.u-textSmaller Sets 80% font size of inherited font size.
.u-textBold Sets font weight to bold.
.u-textMuted Sets lighter text color, if used on a element, it sets text decoration to underline.
.u-textLineThrough Sets color to warning.

Max width overview

Class Behavior
.u-max100 Sets max width to 100.
.u-max150 Sets max width to 150.
.u-max200 Sets max width to 200.
... (depends on configuration)

Text ellipsis (.u-textEllipsis)

Use .u-textEllipsis inside element with max width set or on element with max width set. .u-textEllipsis adds "…" if text is too long for one line.

<!-- Example in divs -->
<div class="u-max100">
    <div class="u-textEllipsis">
        VeryLongTextWithoutWhiteSpacesThatWouldBreakLayoutWithoutUsageOfTextEllipsisAndMaxWidth.
    </div>
</div>

<!-- Example in div -->
<div class="u-max100 u-textEllipsis">
    VeryLongTextWithoutWhiteSpacesThatWouldBreakLayoutWithoutUsageOfTextEllipsisAndMaxWidth.
</div>

<!-- Example in table -->
<table class="table">
    <tbody>
        <tr class="table-row">
            <td class="table-data">
                <div class="u-max200 u-textEllipsis">
                    Very long description of something in table that would break layout without max width and text ellipsis.
                </div>
            </td>
        </tr>
    </tbody>
</table>

Print

.u-hideForPrint hides element only for print (display: none).

Position relative container (.u-positionRelativeContainer)

Wrap dropdowns and tooltips in .u-positionRelativeContainer for correct absolute positioning.

<div class="u-positionRelativeContainer">
    <div class="tooltip">
        ...
    </div>
</div>

results matching ""

    No results matching ""