There are a handful of utilities in Dojo for quick behaviors, floats, colors, alignment, and more.
.css-truncate
will shorten text with an ellipsis. The maximum width of the truncated text can be changed by overriding the max-width of the .css-truncate-target.
<span class="branch-ref css-truncate css-truncate-target">
really-long-branch-name
</span>
You can reveal the entire string on hover with the addition of .expandable
.
<span class="css-truncate expandable">
<span class="branch-ref css-truncate-target">this-is-a-really-long-branch-name</span>
</span>
Add a number or unread indicator to navs and more with a counter.
<span class="counter">9</span>
Quickly float something to the left or right, and clear them later.
.left
.right
<div class="clearfix">
<code class="left">.left</code>
<code class="right">.right</code>
</div>
Easily center block level content if it’s not taking up the full width of the parent. Can be used on grid columns or any other elements.
<nav class="menu centered">
<a class="menu-item selected" href="#">Account</a>
<a class="menu-item" href="#">Profile</a>
<a class="menu-item" href="#">Emails</a>
<a class="menu-item" href="#">Notifications</a>
</nav>
Change the text-align
on elements with a class.
Left aligned text.
Right aligned text.
Center aligned text.
<p class="text-left">Left aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-center">Center aligned text.</p>
Change the color
of elements with a class.
Green/open text
Red/closed text
Merged text
Pending text
<p class="text-open">Green/open text</p>
<p class="text-closed">Red/closed text</p>
<p class="text-merged">Merged text</p>
<p class="text-pending">Pending text</p>
.text-closed
and .text-failure
are the same, as well as .text-open
and .text-success
.
When you need a hyperlink to not be $brand-blue
, use a .muted-link
.
Here is some example text. <a class="muted-link" href="#">And a muted link.</a>
Flex table is a module for creating dynamically resizable elements that always sit on the same horizontal line (e.g., they never break to a new line). Using table styles in our CSS means it’s cross browser friendly back to at least IE9.
Additional margin
or padding
may be required to properly space content.
<div class="flex-table">
<div class="flex-table-item flex-table-item-primary">
<input class="input-block" type="text" placeholder="Long flexible input form">
</div>
<div class="flex-table-item">
<button class="btn" type="button">Button</button>
</div>
</div>