css/docs/utilities.md

layout	title
page	Utilities

There are a handful of utilities in Primer for quick behaviors, floats, colors, alignment, and more.

Contents

• Will be replaced with the ToC, excluding the "Contents" header {:toc}

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.

{% example html %} really-long-branch-name {% endexample %}

You can reveal the entire string on hover with the addition of .expandable.

{% example html %} this-is-a-really-long-branch-name {% endexample %}

Counter

Add a number or unread indicator to navs and more with a counter.

{% example html %} 9 {% endexample %}

Floats

Quickly float something to the left or right, and clear them later.

{% example html %}

.left .right

{% endexample %}

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.

{% example html %}

Account Profile Emails Notifications {% endexample %}

Text alignment

Change the text-align on elements with a class.

{% example html %}

Left aligned text.

Right aligned text.

Center aligned text.

{% endexample %}

Background colors

Fill in an element with background colors.

{% example html %} .bg-white .bg-gray-dark .bg-blue .bg-blue-light .bg-gray .bg-gray-light .bg-green .bg-red {% endexample %}

Text color

Change the color of elements with a class.

{% example html %} .text-blue .text-red .text-gray-light .text-gray .text-gray-dark .text-green .text-orange .text-purple .text-white .text-inherit {% endexample %}

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.

{% example html %}

Here is some example text. And a .link-blue

Here is some example text. And a .link-gray

Here is some example text. And a .link-gray-dark

{% endexample %}

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.

{% example html %}

Button

{% endexample %}

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.

{% example html %}

.mr-0

.mr-1

.mr-2

.mr-3

.mr-4

.mr-5

.mx-5

.my-5

.m-2

{% endexample %}

Padding

You have the option to set padding sizes from 0-5. You also have the optional direction using t,b,x,y.

{% example html %}

.pt-0

.pt-1

.pt-2

.pt-3

.pt-4

.pt-5

.p-3

.px-3

.py-3

{% endexample %}

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.

{% example html %}

.position-relative

.position-absolute.right-0.top-0

{% endexample %}

Display

You can set your display with these utilities.

{% example html %} .d-block .d-inline .d-inline-block .d-none {% endexample %}

Borders

With these border utilities you can set common borders.

{% example html %}

.border

.border-top

.border-right

.border-bottom

.border-left

{% endexample %}

Border colors

Add these classes with .border and you'll have some common border colors.

{% example html %}

.border-blue

.border-gray-light

.border-gray-dark

{% endexample %}

No borders

To remove a border from one side you can use -0 postfix.

{% example html %}

.border-0

.border-top-0

.border-right-0

.border-bottom-0

.border-left-0

{% endexample %}