RhinoStyle: Utility Classes

Utility Classes

A utility class applies a single rule or a very simple, universal pattern. Utility classes are simple, composable, and reusable. They will (intentionally) end up scattered throughout your markup.

All utility classes are prefixed with u-.

Core Utilities

u-block

Use to create block level element.

u-inline-block

Use to create inline-block level element.

u-font-weight-normal

Use to force normal font weight.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-font-weight-bold

Use to force bold font weight. Optionally, use the <strong> tag.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-overflow-hidden

Use to hide overflowing content. Resize browser and observe how the u-overflow-hidden container hides content.

u-overflow-y-auto

Use to set overflow-y to auto

u-text-center

Use to center align text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-justify

Use to justify text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed quam eget sapien consequat cursus eget pretium est. Maecenas porta tincidunt ullamcorper. Maecenas et pretium leo. Nam blandit imperdiet porta. Donec ante leo, aliquam at laoreet vel, laoreet nec nunc. Proin tincidunt efficitur libero, vitae consectetur dui consectetur quis.

u-text-left

Use to left align text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-right

Use to right align text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-small

Use for smaller text. Optionally, use <small> for percentage based, smaller text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-base

Use to force base text size.

<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>

u-text-medium

Use for medium text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-large

Use for larger text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-break

Use to prevent long URLs from breaking out of container.

Prevent long urls http://www.likethislongwordybloviatingwebaddressrighthere.com from breaking out of container. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed quam eget sapien consequat cursus eget pretium est. Maecenas porta tincidunt ullamcorper.

u-text-overflow

Use to truncate (ellipsis) overflowing text. Resize browser to observe.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed quam eget sapien consequat cursus eget pretium est. Maecenas porta tincidunt ullamcorper.

u-text-underline

Use to underline text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-normal

Use to set normal font style.

Lorem ipsum this text is wrapped in u-text-normal, consectetur adipiscing elit.

u-text-italic

Use to force italic font style. Optionally, use <em> tags.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-capitalize

Use to capitalize.

capitalize the first letter of every word in this paragraph

u-text-capitalize-first

Use to capitalize first letter only.

capitalize the first letter of first word in this paragraph

u-text-lowercase

Use to make lowercase.

ALL OF THIS TEXT IS LOWERCASE

u-text-uppercase

Use to make uppercase.

all of this text is uppercase

u-list

Use to remove default decoration from unordered/ordered lists.

  • Item 1
  • Item 2
  • Item 3

u-list--numbers

Use to proivide an alternative style to ordered lists.

  1. Item 1
  2. Item 2
  3. Item 3

Color Utilities

u-bg-color

Use to set background color.

u-bg-accent
u-bg-danger
u-bg-gray
u-bg-gray-dark
u-bg-gray-darker
u-bg-gray-light
u-bg-gray-lighter
u-bg-gray-lightest
u-bg-info
u-bg-primary
u-bg-primary-rich
u-bg-secondary
u-bg-success
u-bg-warning
u-bg-white

u-text-color

Used to set text color.

u-text-accent u-text-body u-text-danger u-text-highlight u-text-info u-text-muted u-text-primary u-text-teal u-text-secondary u-text-success u-text-warning u-text-white

Flexbox Utilities

Most of our layout will be handled by our Flexbox grid system or within the CSS of complex components. However, we have included some helpful Flexbox utility classes to compliment our layout system and offer additional flexibility.

For a Flexbox refresher, see this CSS Tricks article.

Aligning Items

Align items in the cross axis of the current line of the flex container. Similar to 'justify-content' but in the perpendicular direction.

u-flex-align-items-baseline

item one
item two
item three

u-flex-align-items-center

item one
item two
item three

u-flex-align-items-end

item one
item two
item three

u-flex-align-items-start

item one
item two
item three

u-flex-align-items-stretch

item one
item two
item three
Aligning Content

Aligns items within the flex container when there is extra space in the cross-axis. Has no effect when there is only one line of flex items. Requires that flex items are wrapping.

u-flex-align-content-start

flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item

u-flex-align-content-end

flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item

u-flex-align-content-center

flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item

u-flex-align-content-stretch

flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
Aligning Self

Override default alignment of single item when specified by 'align-items.'

u-flex-align-self-auto

Inherits 'align-items' from parent container. In this case, the parent has align-items: flex-start. Items one and two have align-self: flex-end.

u-flex-align-self-auto
flex item
flex item

u-flex-align-self-center

u-flex-align-self-center
flex item
flex item

u-flex-align-self-end

u-flex-align-self-end
flex item
flex item

u-flex-align-self-start

u-flex-align-self-start
flex item
flex item

u-flex-align-self-stretch

u-flex-align-self-stretch
flex item
flex item
Flex Direction

u-flex-direction-column

item one
item two
item three

u-flex-direction-column-reverse

item one
item two
item three

u-flex-direction-row

item one
item two
item three

u-flex-direction-row-reverse

item one
item two
item three
Flex Display

u-flex

u-flex

u-inline-flex

u-inline-flex
Flex Grow

Specify the flex grow factor, which determines how much the flex item will grow relative to the rest of the flex items in the flex container.

u-flex-grow-size (1-5)

u-flex-grow-1
u-flex-grow-2
u-flex-grow-1
u-flex-grow-3
u-flex-grow-1
u-flex-grow-4
u-flex-grow-1
u-flex-grow-5
Flex Justify

Align items along the main axis of the current line of the flex container.

u-flex-justify-around

flex item
flex item
flex item

u-flex-justify-between

flex item
flex item
flex item

u-flex-justify-center

flex item
flex item
flex item

u-flex-justify-end

flex item
flex item
flex item

u-flex-justify-start

flex item
flex item
flex item
Flex Order

Change order without editing underlying HTML.

u-flex-order-first

item one
item two
item three (u-flex-order-first)

u-flex-order-last

item one (u-flex-order-last)
item two
item three

u-flex-order-none

item one (u-flex-order-none)
item two
item three
Flex Shrink

Specify the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container.

u-flex-shrink-size (0-3)

u-flex-shrink-0
u-flex-shrink-1
u-flex-shrink-2
u-flex-shrink-3
Flex Wrap

u-flex-nowrap

flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item

u-flex-wrap

flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item

u-flex-wrap-reverse

Flex items wrap upwards.

flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item
flex item

Spacing Utilities

Margins

Dark yellow areas represent margin. Use these utility classes to add or remove margin to page elements. We offer four (4) size options: small, default, medium, and large.

u-m-side-auto

Auto margin for a particlar side or sides.

u-m-a-auto
u-m-l-auto
u-m-r-auto
u-m-x-auto

u-m-side-0

Remove margin from a particlar side or sides.

u-m-a-0
u-m-t-0
u-m-r-0
u-m-b-0
u-m-l-0
u-m-x-0
u-m-y-0

u-m-a

Add margin around all sides.

u-m-a-small
u-m-a
u-m-a-large

u-m-t

Add top margin.

u-m-t-small
u-m-t
u-m-t-large

u-m-r

Add right margin.

u-m-r-small
u-m-r
u-m-r-large

u-m-b

Add bottom margin.

u-m-b-small
u-m-b
u-m-b-large

u-m-l

Add left margin.

u-m-l-small
u-m-l
u-m-l-large

u-m-x

Add left and right margin.

u-m-x-small
u-m-x
u-m-x-large

u-m-y

Add top and bottom margin.

u-m-y-small
u-m-y
u-m-y-large
Padding

Dark blue areas represent padding. Use these utility classes to add or remove padding to page elements. We offer four (4) size options: small, default, medium, and large.

u-p-side-0

Remove padding from a particlar side or sides.

 u-p-a-0 
 u-p-t-0 
 u-p-r-0 
 u-p-b-0 
 u-p-l-0 
 u-p-x-0 
 u-p-y-0 

u-p-a

Add padding around all sides.

 u-p-a-small 
 u-p-a 
 u-p-a-large 

u-p-t

Add top padding.

 u-p-t-small 
 u-p-t 
 u-p-t-large 

u-p-r

Add right padding.

 u-p-r-small 
 u-p-r 
 u-p-r-large 

u-p-b

Add bottom padding.

 u-p-b-small 
 u-p-b 
 u-p-b-large 

u-p-l

Add left padding.

 u-p-l-small 
 u-p-l 
 u-p-l-large 

u-p-x

Add left and right padding.

 u-p-x-small 
 u-p-x 
 u-p-x-large 

u-p-y

Add top and bottom padding.

 u-p-y-small 
 u-p-y 
 u-p-y-large 

Inline Grid

Variable-width content; like buttons and/or list items, can wrap at certain widths within our app when placed next to each other. We can use the u-inline-grid class to provide adequate spacing.

Read more about this on the Utility Components page.

List

Create block-level lists that reset default<ul> styles.

Read more about this on the Utility Components page.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5