Utilities

Utilities

A set of mixins and utilities for customizing components.

Contextual colors

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

Yeah, I like animals better than people sometimes... .text-muted

Especially dogs. Dogs are the best. .text-primary

Every time you come home, they act like they haven't seen you in a year. .text-success

And the good thing about dogs... is they got different dogs for different people. .text-info

Like pit bulls. Pit bull can be the right man's best friend... or the wrong man's worst enemy. .text-warning

You going to give me a dog for a pet, give me a pit bull. Give me... Raoul. Right, Omar? Give me Raoul text-danger

Yeah, I like animals better than people sometimes... .text-gray-darker

Especially dogs. Dogs are the best. .text-gray-medium

Every time you come home, they act like they haven't seen you in a year. .text-gray-medium

And the good thing about dogs... is they got different dogs for different people. .text-gray

Like pit bulls. Pit bull can be the right man's best friend... or the wrong man's worst enemy. .text-gray-light

You going to give me a dog for a pet, give me a pit bull. Give me... Raoul. Right, Omar? Give me Raoul. .text-gray-lighter

Yeah, I like animals better than people sometimes... .text-gray-white

Especially dogs. Dogs are the best. .text-white

<p class="text-muted">Yeah, I like animals better than people sometimes... </p>
<p class="text-primary">Especially dogs. Dogs are the best. </p>
<p class="text-success">Every time you come home, they act like they haven't seen you in a year. </p>
<p class="text-info">And the good thing about dogs... is they got different dogs for different people. </p>
<p class="text-warning">Like pit bulls. Pit bull can be the right man's best friend... or the wrong man's worst enemy. </p>
<p class="text-danger">You going to give me a dog for a pet, give me a pit bull. Give me... Raoul. Right, Omar? Give me Raoul.</p>
<p class="text-gray-darker">Yeah, I like animals better than people sometimes... </p>
<p class="text-gray-medium-dark">Especially dogs. Dogs are the best. </p>
<p class="text-gray-medium">Every time you come home, they act like they haven't seen you in a year. </p>
<p class="text-gray">And the good thing about dogs... is they got different dogs for different people. </p>
<p class="text-gray-light">Like pit bulls. Pit bull can be the right man's best friend... or the wrong man's worst enemy. </p>
<p class="text-gray-lighter">You going to give me a dog for a pet, give me a pit bull. Give me... Raoul. Right, Omar? Give me Raoul.</p>
<p class="text-gray-white">Yeah, I like animals better than people sometimes... </p>
<p class="text-white">Especially dogs. Dogs are the best. </p>

Contextual backgrounds

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.

Add .active to increase contrast.

Your bones don't break, mine do. That's clear. .bg-primary

Your bones don't break, mine do. That's clear. .bg-primary-light

Your cells react to bacteria and viruses differently than mine. .bg-complementary

Your cells react to bacteria and viruses differently than mine. .bg-success

You don't get sick, I do. That's also clear. .bg-info

But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. .bg-warning

Your bones don't break, mine do. That's clear. .bg-dark-warning

We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. .bg-danger

But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. .bg-gray-darker

We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. bg-gray-dark

Your cells react to bacteria and viruses differently than mine. .bg-gray-medium

You don't get sick, I do. That's also clear. .bg-gray

But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. .bg-gray-light

We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. .bg-gray-lighter

Your bones don't break, mine do. That's clear. .bg-gray-white

<p class="bg-primary">Your bones don't break, mine do. That's clear.</p>
<p class="bg-primary-light">Your bones don't break, mine do. That's clear.</p>
<p class="bg-complementary">Your cells react to bacteria and viruses differently than mine.</p>
<p class="bg-success">Your cells react to bacteria and viruses differently than mine. </p>
<p class="bg-info">You don't get sick, I do. That's also clear.</p>
<p class="bg-warning">But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke.</p>
<p class="bg-dark-warning">Your bones don't break, mine do. That's clear.</p>
<p class="bg-danger">We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I.</p>
<p class="bg-gray-darker">But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke.</p>
<p class="bg-gray-dark">We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I.</p>
<p class="bg-gray-medium">Your cells react to bacteria and viruses differently than mine.</p>
<p class="bg-gray">You don't get sick, I do. That's also clear.</p>
<p class="bg-gray-light">But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke.</p>
<p class="bg-gray-lighter">We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I.</p>
<p class="bg-gray-white">Your bones don't break, mine do. That's clear.</p>
  

Text truncate

Use it to truncate text in small containers. Add it in the text tag or apply it to all texts inside a container.

Use .text-truncate for truncation in a single line, or .text-truncate-wrap to truncate only long words on a multiline container (e.g. a url).

Always add a title attribute with the full text so it is avaliable as a tooltip.

Use text-truncate to truncate a long sentence when there's no available space.

 

This is also a long sentence so you can see that is gets truncated.
This is another long sentence so you can see that is gets truncated too.

Use text-truncate-wrap when in a multiline container one word doesn't fit in the available space, something like https://demos.cumulocity.com/apps/devicemanagement/index.html#/device/635236265/info, for instance.

<p title="Use text-truncate to truncate a long sentence when there's no available space." class="text-truncate">Use text-truncate to truncate a long sentence when there's no available space.</p>
<div class="text-truncate">
<span title="This is also a long sentence so you can see that is gets truncated.">This is also a long sentence so you can see that is gets truncated.</span><br>
<span title="This is another long sentence so you can see that is gets truncated too.">This is another long sentence so you can see that is gets truncated too.</span>
</div>
<p title="Use text-truncate-wrap when in a multiline container one word doesn't fit in the available space, something like https://demos.cumulocity.com/apps/devicemanagement/index.html#/device/635236265/info, for instance" class="text-truncate-wrap">Use text-truncate-wrap when in a multiline container one word doesn't fit in the available space, something like https://demos.cumulocity.com/apps/devicemanagement/index.html#/device/635236265/info, for instance.</p>

Close icon

Use the generic close icon for dismissing content like modals and alerts. It's right aligned by default.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>

Quickfloats

Float an element to the left or right with a class. !important is included to avoid specificity issues.

Easily clear floats by adding .clearfix to the parent element. Utilizes the micro clearfix as popularized by Nicolas Gallagher.

This paragraph contains a badge with .pull-left 2

This paragraph contains a badge with .pull-right 2

<p class="clearfix"> This paragraph contains a badge with <code>.pull-left</code> <span class="badge badge-primary pull-left">2</span></p>
<p class="clearfix">This paragraph contains a badge with <code>.pull-right</code> <span class="badge badge-success pull-right">2</span></p>

Center block

Add .center-block to set an element to display: block and center via margin.

This div is centered
  <div class="center-block bg-primary" style="width:150px; padding: 10px;"> This div is centered</div>

Margins

Utility classes for margin spacing. Start by picking the side (top, right, bottom, or left), add "m" (for margin), and the size classes xs, sm, md, lg, xl, and xxl.

The base size is 8px. Check the Baseline grid and vertical rhythm in principles.

Example:

  • .bottom-m-xs - base size ÷ 2 — 4px
  • .bottom-m-sm - base size 8px
  • .bottom-m-md - 2 × base size — 16px
  • .bottom-m-lg - 3 × base size — 24px
  • .bottom-m-xl - 4 × base size — 32px
  • .bottom-m-xxl - 5 × base size — 40px
.top-m-xs
margin-top: 4px
.top-m-sm
margin-top: 8px
.top-m-md
margin-top: 16px
.top-m-lg
margin-top: 24px
.top-m-xl
margin-top: 32px
.top-m-xxl
margin-top: 40px
.right-m-xs
margin-right: 4px
.right-m-sm
margin-right: 8px
.right-m-md
margin-right: 16px
.right-m-lg
margin-right: 24px
.right-m-xl
margin-right: 32px
.right-m-xxl
margin-right: 40px
.bottom-m-xs
margin-bottom: 4px
Other element
.bottom-m-sm
margin-bottom: 8px
Other element
.bottom-m-md
margin-bottom: 16px
Other element
.bottom-m-lg
margin-bottom: 24px
Other element
.bottom-m-xl
margin-bottom: 32px
Other element
.bottom-m-xxl
margin-bottom: 40px
Other element
.left-m-xs
margin-left: 4px
.left-m-sm
margin-left: 8px
.left-m-md
margin-left: 16px
.left-m-lg
margin-left: 24px
.left-m-xl
margin-left: 32px
.left-m-xxl
margin-left: 40px
<div>
  <div class="top-m-xs">margin-top: 4px;</div>
  <div class="top-m-sm">margin-top: 8px;</div>
  <div class="top-m-md">margin-top: 16px;</div>
  <div class="top-m-lg">margin-top: 24px;</div>
  <div class="top-m-xl">margin-top: 32px;</div>
  <div class="top-m-xxl">margin-top: 40px;</div>
</div>

<div>
  <div class="right-m-xs">margin-right: 4px;</div>
  <div class="right-m-sm">margin-right: 8px;</div>
  <div class="right-m-md">margin-right: 16px;</div>
  <div class="right-m-lg">margin-right: 24px;</div>
  <div class="right-m-xl">margin-right: 32px;</div>
  <div class="right-m-xxl">margin-right: 40px;</div>
</div>

<div>
  <div class="bottom-m-xs">margin-bottom: 4px;</div>
  <div class="bottom-m-sm">margin-bottom: 8px;</div>
  <div class="bottom-m-md">margin-bottom: 16px;</div>
  <div class="bottom-m-lg">margin-bottom: 24px;</div>
  <div class="bottom-m-xl">margin-bottom: 32px;</div>
  <div class="bottom-m-xxl">margin-bottom: 40px;</div>
</div>

<div>
  <div class="left-m-xs">margin-left: 4px;</div>
  <div class="left-m-sm">margin-left: 8px;</div>
  <div class="left-m-md">margin-left: 16px;</div>
  <div class="left-m-lg">margin-left: 24px;</div>
  <div class="left-m-xl">margin-left: 32px;</div>
  <div class="left-m-xxl">margin-left: 40px;</div>
</div>

Show / hide

Force an element to be shown or hidden ( including for screen readers) with the use of .show and .hidden or .sr-only classes. These classes use !important to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling.

Furthermore, .invisible can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.

Display block in this one.
Not displayed, but available for screen readers.
<div class="show">Display block in this one.</div>
<div class="hidden">Display none on this one.</div>
<div class="sr-only">Not displayed, but available for screen readers.</div>
<div class="invisible">Completely invisible but affecting the flow of the document.</div>

Responsive utilities

Use a single or combination of the available classes for toggling content across viewport breakpoints.

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
.visible-xs-* Visible
.visible-sm-* Visible
.visible-md-* Visible
.visible-lg-* Visible
.hidden-xs Visible Visible Visible
.hidden-sm Visible Visible Visible
.hidden-md Visible Visible Visible
.hidden-lg Visible Visible Visible

The .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value listed below.

Group of classes CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

Elevation utilities

Use the mixin .boxShadowHelper(@level,@direction) or the .shadow* classes to apply the right elevation to custom components.

Check on

Level 1

Cards and other flat components

.shadow1

Level 2

used in dropdows - no border

.shadow2

Level 2

Used in dropdows - includes a subtle border

.shadow2-border

Level 3

Used in ui-button-footer - direction top

.shadow3-top

Level 3

Used in navigator (below grid-float-breakpoint) - direction right

.shadow3-right

Level 3

Used in horizontal tabs and action-bar - direction bottom

.shadow3-bottom

Level 3

Used in right drawer - direction left

.shadow3-left

Level 4

Used in popover

.shadow4

Level 5

Used in card:hover

.shadow5

Level 6

Used in global alerts

.shadow6

Level 6

Used in dropdown inside hovered card, inside action-bar, and inside main header

.shadow6-right

Level 7

Used in modal

.shadow7

Animation utilities

We're using a subset of animate.css to display css animations.

Start by adding the class animated to the element you want to animate. You may also want to include the class infinite for an infinite loop.

Add one of the following classes:

Attention


flash

pulse

shake

bounce

Slide


slideInUp

slideInRight

slideInDown

slideInLeft

slideOutUp

slideOutRight

slideOutDown

slideOutLeft

fadeInUpBig

fadeInRightBig

fadeInDownBig

fadeInLeftBig

fadeOutUpBig

fadeOutRightBig

fadeOutDownBig

fadeOutLeftBig

Fade


fadeIn

fadeOut