Utilities
There are a handful of utilities in Primer for quick behaviors, floats, colors, alignment, and more.
Truncation
.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.
really-long-branch-name
<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.
this-is-a-really-long-branch-name
<span class="css-truncate expandable">
<span class="branch-ref css-truncate-target">this-is-a-really-long-branch-name</span>
</span>Counter
Add a number or unread indicator to navs and more with a counter.
<span class="counter">9</span>Floats
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>Centering content
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>Text alignment
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>Background colors
Fill in an element with background colors.
.bg-white.bg-gray-dark.bg-blue.bg-blue-light.bg-gray.bg-gray-light.bg-green.bg-red
<span class="d-inline-block p-3 bg-white">.bg-white</span>
<span class="d-inline-block p-3 bg-gray-dark text-white">.bg-gray-dark</span>
<span class="d-inline-block p-3 bg-blue">.bg-blue</span>
<span class="d-inline-block p-3 bg-blue-light">.bg-blue-light</span>
<span class="d-inline-block p-3 bg-gray">.bg-gray</span>
<span class="d-inline-block p-3 bg-gray-light">.bg-gray-light</span>
<span class="d-inline-block p-3 bg-green">.bg-green</span>
<span class="d-inline-block p-3 bg-red">.bg-red</span>Text color
Change the color of elements with a class.
.text-blue.text-red.text-gray-light.text-gray.text-gray-dark.text-green.text-orange.text-purple.text-white.text-inherit
<span class="text-blue">.text-blue</span>
<span class="text-red">.text-red</span>
<span class="text-gray-light">.text-gray-light</span>
<span class="text-gray">.text-gray</span>
<span class="text-gray-dark">.text-gray-dark</span>
<span class="text-green">.text-green</span>
<span class="text-orange">.text-orange</span>
<span class="text-purple">.text-purple</span>
<span class="text-white bg-gray-dark">.text-white</span>
<span class="text-inherit">.text-inherit</span>Link colors
The default link color is blue, but there are a couple of other options to use for deemphasized links. On :hover all links will turn blue.
<p>Here is some example text. <a class="link-blue" href="#">And a .link-blue</a></p>
<p>Here is some example text. <a class="link-gray" href="#">And a .link-gray</a></p>
<p>Here is some example text. <a class="link-gray-dark" href="#">And a .link-gray-dark</a></p>Flex table
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>Margin
You have the option to set margin sizes from 0-5. You also have the optional direction using t,r,b,l,x,y.
.mr-0
.mr-1
.mr-2
.mr-3
.mr-4
.mr-5
.mx-5
.my-5
.m-2
<div class="d-inline-block border p-2 mr-0">.mr-0</div>
<div class="d-inline-block border p-2 mr-1">.mr-1</div>
<div class="d-inline-block border p-2 mr-2">.mr-2</div>
<div class="d-inline-block border p-2 mr-3">.mr-3</div>
<div class="d-inline-block border p-2 mr-4">.mr-4</div>
<div class="d-inline-block border p-2 mr-5">.mr-5</div>
<div class="d-inline-block border p-2 mx-2">.mx-5</div>
<div class="d-inline-block border p-2 my-2">.my-5</div>
<div class="d-inline-block border p-2 m-2">.m-2</div>Padding
You have the option to set padding sizes from 0-5. You also have the optional direction using t,b,x,y.
.pt-0
.pt-1
.pt-2
.pt-3
.pt-4
.pt-5
.p-3
.px-3
.py-3
<div class="d-inline-block border pt-0">.pt-0</div>
<div class="d-inline-block border pt-1">.pt-1</div>
<div class="d-inline-block border pt-2">.pt-2</div>
<div class="d-inline-block border pt-3">.pt-3</div>
<div class="d-inline-block border pt-4">.pt-4</div>
<div class="d-inline-block border pt-5">.pt-5</div>
<div class="d-inline-block border p-3">.p-3</div>
<div class="d-inline-block border px-3">.px-3</div>
<div class="d-inline-block border py-3">.py-3</div>Positioning
We include classes for setting positioning as well as setting the top-0, right-0, bottom-0, left-0 to zero. Your options for positioning are position-static, position-absolute, position-relative, position-fixed.
.position-relative
.position-absolute.right-0.top-0
<div class="p-3 border position-relative">
.position-relative
<div class="border position-absolute right-0 top-0 p-1">.position-absolute.right-0.top-0</div>
</div>Display
You can set your display with these utilities.
.d-block.d-inline.d-inline-block
<span class="border text-center d-block p-2">.d-block</span>
<span class="border text-center d-inline p-2">.d-inline</span>
<span class="border text-center d-inline-block p-2">.d-inline-block</span>
<span class="border text-center d-none p-2">.d-none</span>Borders
With these border utilities you can set common borders.
.border
.border-top
.border-right
.border-bottom
.border-left
<div class="border p-3 mb-3">.border</div>
<div class="border-top p-3 mb-3">.border-top</div>
<div class="border-right p-3 mb-3">.border-right</div>
<div class="border-bottom p-3 mb-3">.border-bottom</div>
<div class="border-left p-3 mb-3">.border-left</div>Border colors
Add these classes with .border and you’ll have some common border colors.
.border-blue
.border-gray-light
.border-gray-dark
<div class="border p-3 mb-3 border-blue">.border-blue</div>
<div class="border p-3 mb-3 border-gray-light">.border-gray-light</div>
<div class="border p-3 mb-3 border-gray-dark">.border-gray-dark</div>No borders
To remove a border from one side you can use -0 postfix.
.border-0
.border-top-0
.border-right-0
.border-bottom-0
.border-left-0
<div class="border border-0 p-3 mb-3">.border-0</div>
<div class="border border-top-0 p-3 mb-3">.border-top-0</div>
<div class="border border-right-0 p-3 mb-3">.border-right-0</div>
<div class="border border-bottom-0 p-3 mb-3">.border-bottom-0</div>
<div class="border border-left-0 p-3 mb-3">.border-left-0</div>