CSS

OUI contains easy-to-use CSS helper classes to make any project look good with minimal struggle.

Overview of Helper Classes

Using helper CSS classes makes writing new CSS mostly unnecessary, except for brand new patterns. Many helpers utilize a BEM style naming syntax such as: .{property}-{amount}--{direction}

  • Padding: soft or hard
  • Margins:push or flush
  • Borders: border--all or border--none
  • Width and Height: width--1-1 and height--1-1
  • Flexbox allows for easy layout in one direction. Apply flex to the parent and flex--1 all children for equal width columns. For vertical centering flex--align-center the parent and flex the children.

List of Helper Classes

Margin, padding, typography, borders, background colors, layout, sizing, admin

Margin

Both margin and padding properties use a similar pattern of helpers, here we see .push--{direction} used for margin(-top/left/right/bottom):

.push--{direction}
.push--top
.push--bottom
.push--left
.push--right
.push--ends
.push--sides

Or you can extend that beyond a single unit amount of space into -double--, -triple--, and -quad--:

.push-{amount}--{direction}
.push-double--sides
.push-triple--top
.push-quad--ends

Remove margins using the flush set of helper classnames:

.flush--{direction}
...

Use more than one unit of space with modifiers -double--, -triple--, and -quad-- modifiers:

.flush-{amount}--{direction}
...

Padding

Padding works in a similar pattern but with different words soft to add padding and hard to remove:

.soft--{direction}
...
.soft-{amount}--{direction}
...
.hard--{direction}
...
.hard-{amount}--{direction}
...

Typography

weight
style
underline
strike
truncate
word wrap
word break
line-height

Borders

.border--all
.border--none
.border--top
.border--ends
...

Background Colors

.background--faint
.background--light

Layout

float
anchor
text-align
display
faded
vert align
overflow
max-scroll
max-width
cursor
position
visibility
unselectable

Sizing

.width--1-1
.height--1-1
.max-width
.min-width
.min-height
...

Admin

.admin--color
.admin--background
.admin--border