Utilities

Backgrounds

color The background color classes are used to set or change a background--color on a specific element. Class Class background--{ color } Set background color using our colors.

Learn More »

Borders

Border When set, all borders default to a 1px width which can be offset using border--width-{ i }. Class Class Result border Set border. no-border Remove border.

Learn More »

Display

properties Class Class Attribute display--none display: none display--block display: block display--inline-block display: inline-block display--inline display: inline display--flex display: flex display--inline-flex display: inline-flex responsive Our responsive classes take a mobile-first approach by either showing or hiding elements at specified viewports.

Learn More »

Height and Width

We handle height and width both in percentages and view-height/width. Both are broken into quarters. Percentage Class Class Result h-{ 25, 50, 75, 100 } Height is set to the corresponding percentage.

Learn More »

Hover Effects

scale Class Class Result hover-scale Scale the element on hover to 1.05 the original scale. Demo Shadow Class Class Result hover-shadow Adds a box-shadow on hover to the element.

Learn More »

Overflows

Overflow Overflow can be tricky so we gave you as much as we could to try and help out! Class Class Result overflow-visible Sets overflow to visible.

Learn More »

Positioning

Position To postion an element absolutely, set pos-rel on the parent element and pos-abs to child that you’d like to position absolute. Our position utilities are meant to be used (mostly) with pinning.

Learn More »

Rotating

Rotate Class Class Result rotate-{ 45, 90, 180 } Rotate an element 45, 90, or 180 degrees Visualizer Try this!

Learn More »

Screen Readers

screen reader only Yes, we have a sr-only class. No, we’re not trying to copy anyone else. We just care a lot about accessibility, and we think you should too! In case you missed it, read more about our thoughts on accessibility.

Learn More »

Spacers

Padding and margin How does it work Using our padding and margin utilities is simple. It’s what you’re setting, the direction, and the number based on our spacing map. {padding, p or margin, m }{ direction if not surrounding: t, b, l, r, x, y }-{ number }

Learn More »

Transitions

transition Class Class Result transition Adds 0.2s; transition to an element. Visualizer Try this! Check out how smooth the transition on the padding is!

Learn More »

Truncate With Ellipsis

default Class Class Result truncate-with-ellipsis Truncate long lines with an ellipsis! Visualizer Try this! Truncate long lines with an ellipsis!

Learn More »

Z-Index

Z-Index These utility classes control the stacking order within the DOM. Adding a z-{value} class to your element will change its order in the stack. Class Class Result z-0 z-index: 0 z-10 z-index: 10 z-20 z-index: 20 z-30 z-index: 30 z-40 z-index: 40 z-50 z-index: 50 z-60 z-index: 60 z-70 z-index: 70 z-80 z-index: 80 z-90 z-index: 90 z-100 z-index: 100 -z-10 z-index: -10 -z-20 z-index: -20 z-auto z-index: auto Demo z-30 z-40 z-50 z-40 z-30 Markup <div class="pos-rel z-30"> z-30 </div> <div class="pos-rel z-40"> z-40 </div> <div class="pos-rel z-50"> z-50 </div> <div class="pos-rel z-40"> z-40 </div> <div class="pos-rel z-30"> z-30 </div> Using Data Attributes Requires JavaScript Can’t find the value you need in the list above?

Learn More »