Section 11.1 #Utilities.Borders
Borders

You can add specific borders to elements by using the following classes:

Classes
no-border border--color-{color}
border border-x border-y
border-t border-r border-b border-l
border--width-{1}

The border--color-{color} class combines the brand colors, and secondary colors maps.

Example:

Card Header

Here is some generic content for testing purposes. Don't worry about the actualy content of this card. The idea is to show how cool we can get with making borders.

Card Header

Here is some generic content for testing purposes. Don't worry about the actualy content of this card.

The idea is to show how cool we can get with making borders.

Card Header

Here is some generic content for testing purposes. Don't worry about the actualy content of this card. The idea is to show how cool we can get with making borders.

Markup:

<div class="block-container mobile-up-2 blocks px-2 mb-3">
  <div class="block">
    <div class="pui-card border--color-red">
      <h4 class="border-b border--color-navy pb-2 mb-2">Card Header</h4>
      <div class="pui-card__content">
        <p>Here is some generic content for testing purposes. Don't worry about the actualy content of this card. The idea is to show how cool we can get with making borders.</p>
      </div>
    </div>
  </div>
  <div class="block">
    <div class="pui-card">
      <h4 class="pb-2 mb-2">Card Header</h4>
      <div class="pui-card__content block-container blocks px-3">
        <div class="block block-6 border-r border--color-med-blue">
          <p>Here is some generic content for testing purposes. Don't worry about the actualy content of this card.</p>
        </div>
        <div class="block block-6">
          <p>The idea is to show how cool we can get with making borders.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="block">
    <div class="pui-card">
      <h4 class="border-y border--color-lighter py-2 mb-2">Card Header</h4>
      <div class="pui-card__content">
        <p>Here is some generic content for testing purposes. Don't worry about the actualy content of this card. The idea is to show how cool we can get with making borders.</p>
      </div>
    </div>
  </div>
</div>
Source: sass/utilities/_borders.scss, line 4

Section 11.2 #Utilities.Color
Colors

Find some utility classes that you can use to use along our existing color classes.

Source: sass/utilities/_other.scss, line 32

Section 11.2.1 #Utilities.Color.Background
Background Colors

These classes are to be used to set, or change a background-color on a specific element. Similar to our text-{color} classes. You can view our list of colors greyscale, brand colors, and secondary colors maps.

Greyscale
background-white background-lighter background-light-mid background-light
background-base background-dark background-black
Brand colors
background-navy background-skyblue background-med-blue background-beige
background-peach background-salmon background-brown background-orange
Secondary colors
background-red background-olive background-purple background-yellow
background-pink background-cyan background-violet background-blue
background-green background-teal background-gold
Remove a background color
background-transparent
Source: sass/utilities/_colors.scss, line 6

Section 11.2.2 #Utilities.Color.Inverted
Inverted

The inverted class changes the color of an element to white. It has a transition, so after the class is added, the color will transition to white.

Source: sass/utilities/_other.scss, line 60

Section 11.2.3 #Utilities.Color.Transparent
Transparent

If you want to remove the background color and border color on an element, add the class transparent.

Example:

Markup:

<div class="block-container pui-card background-lighter">
  <div class="block-6">
    <button class="button">Button</button>
  </div>
  <div class="block-6">
    <button class="button transparent">Transparent Button</button>
  </div>
</div>
Source: sass/utilities/_other.scss, line 39

Section 11.3 #Utilities.Cursor
Cursor Pointer

If you want to ensure that the mouse is a pointer on hover add the class pointer.

Example:

Hover over the text below

This is a standard p and doesn't have a pointer, unless you hover.

Markup:

<div class="pui-card">
  <h3>Hover over the text below</h3>
  <p class="pointer">This is a standard p and doesn't have a pointer, unless you hover.</p>
</div>
Source: sass/utilities/_other.scss, line 134

Section 11.4 #Utilities.Display
Display

Our display utilities allow you to show or hide code at specific resolutions.

If you want to simply add display: none to an element you can use the class hidden.

We also have print specific display classes. show-print and hide-print.

The classes are broken down by a display prefix, a breakpoint value, and a directional suffix. The prefixes of show and hide represent the display value. Where show- will equal display: block and hide- equals display: none.

The breakpoint value represents where the style will be used. Think of the breakpoints being within the starting px value and the next breakpoint value. So mobile will be between mobile and tablet.

The suffix represents the direction of the media query. -up generates a min-width media query. -down generates a max-width media query. -only generates a min-width and max-width media query.

Class Name Display Value Generated Media Query
hidden display: none; No specified resolution
show-print display: block; @media print
hide-print display: none; @media print
show-mobile-up display: block; @media (min-width: 0px)
show-mobile-only display: block; @media (min-width: 0px) and (max-width: 767px)
show-mobile-down display: block; @media (max-width: 767px)
hide-mobile-up display: none; @media (min-width: 0px)
hide-mobile-only display: none; @media (min-width: 0px) and (max-width: 767px)
hide-mobile-down display: none; @media (max-width: 767px)
show-tablet-up display: block; @media (min-width: 768px)
show-tablet-only display: block; @media (min-width: 768px) and (max-width: 990px)
show-tablet-down display: block; @media (max-width: 990px)
hide-tablet-up display: none; @media (min-width: 768px)
hide-tablet-only display: none; @media (min-width: 768px) and (max-width: 990px)
hide-tablet-down display: none; @media (max-width: 990px)
show-lg-tablet-up display: block; @media (min-width: 991px)
show-lg-tablet-only display: block; @media (min-width: 991px) and (max-width: 1239px)
show-lg-tablet-down display: block; @media (max-width: 1239px)
hide-lg-tablet-up display: none; @media (min-width: 991px)
hide-lg-tablet-only display: none; @media (min-width: 991px) and (max-width: 1239px)
hide-lg-tablet-down display: none; @media (max-width: 1239px)
show-laptop-up display: block; @media (min-width: 1240px)
show-laptop-only display: block; @media (min-width: 1240px) and (max-width: 1799px)
show-laptop-down display: block; @media (max-width: 1799px)
hide-laptop-up display: none; @media (min-width: 1240px)
hide-laptop-only display: none; @media (min-width: 1240px) and (max-width: 1799px)
hide-laptop-down display: none; @media (max-width: 1799px)
show-desktop-up display: block; @media (min-width: 1800px)
show-desktop-only display: block; @media (min-width: 1800px) and (max-width: 1799px)
hide-desktop-up display: none; @media (min-width: 1800px)
hide-desktop-only display: none; @media (min-width: 1800px) and (max-width: 1799px)
Source: sass/utilities/_display.scss, line 5

Section 11.5 #Utilities.Ellipsis
Truncate with ellipsis

A utility that does what it's name says. It truncates text within an element with ellipsis.

Source: sass/utilities/_other.scss, line 352

Section 11.6 #Utilities.Flex
Flex

Flexbox utilities to use when flexbox is present.

Usage: .flex .flex--align-center

.flex--center-content centers content horizontaly and vertically. it includes display: flex

Class Name
flex--align-center flex--column flex--justify-between flex--justify-end flex--justify-start
flex--justify-center flex--wrap flex--grow flex-inline flex--align-baseline
flex--align-start flex--align-end flex--align-center flex-nowrap flex--justify-between
flex--row-reverse flex--column-reverse flex--align-center flex-nowrap flex--justify-between
flex--align-self-start flex--align-self-end flex--align-self-center flex--align-self-baseline
Source: sass/utilities/_flex.scss, line 4

Section 11.7 #Utilities.HeightWidth
Height and Width

These classes give you a width and height percentage equal to the number in the class.

Height Width
h-100 height: 100% w-100 width: 100%
h-75 height: 75% w-75 width: 75%
h-50 height: 50% w-50 width: 50%
h-25 height: 25% w-25 width: 25%
h-auto height: auto w-auto width: auto
Source: sass/utilities/_other.scss, line 214

Section 11.8 #Utilities.Loader
Loader

The standard loading wheel that is used throughout platform-ui. This class is extended on the loading button.

Example:

Markup:

<div class="block-container blocks-px-3">
  <div class="block block-6 flex--center-content" style="height: 3rem">
    <div class="pui-loader"></div>
  </div>
  <div class="block block-6 background-navy flex--center-content" style="height: 3rem">
    <div class="pui-loader inverted"></div>
  </div>
</div>
Source: sass/utilities/_other.scss, line 94

Section 11.9 #Utilities.Overflow
Overflow

You can add or hide specific overflow on an element with the following classes.

overflow overflow-y overflow-x
overflow-visible overflow-y overflow-x
overflow-hidden overflow-y--scroll overflow-x--scroll
overflow-y--hidden overflow-x--hidden
overflow-auto overflow-y--auto overflow-x--auto
Source: sass/utilities/_other.scss, line 244

Section 11.10 #Utilities.Position
Position

If you need to postion something absolute you can use the following classes.

Remember that when positioning an element absolute, the element will position according to the closest parent element that has position: relative. For this you can use the class pos-rel on the parent element you want to position the absolute element to.

Class Position X-Axis Y-Axis
pos-rel position: relative
pos-abs position: absolute
pos-fix position: fixed
pos-stick position: sticky
pin-top top: 0
pin-right right: 0
pin-bottom bottom: 0
pin-left left: 0
pin-center-top top: 50%; transform: translateY(-50%)
pin-center-right right: 50%; transform: translateX(-50%)
pin-center-bottom bottom: 50%; transform: translateY(-50%)
pin-center-left left: 50%; transform: translateX(-50%)
Source: sass/utilities/_other.scss, line 151

Section 11.11 #Utilities.Rotate
Rotate

Utility classes to rotate an element.

Example:

Markup:

<div class="button-group">
  <button class="rotate-45 button">45 degrees</button>
  <button class="rotate-90 button">180 degrees</button>
  <button class="rotate-180 button">180 degrees</button>
</div>
Source: sass/utilities/_other.scss, line 6

Section 11.12 #Utilities.ScaleHover
Scale Hover

The class hover-scale will scale the element, on hover, to 1.05 the original size.

Example:

Hover over this

Notice how it scales on hover

Markup:

<section>
  <div class="block-container">
    <div class="block block-4">
      <div class="pui-card hover-scale">
        <h4 class="pb-2 mb-2">Hover over this</h4>
        <div class="pui-card__content">
          <p>Notice how it scales on hover</p>
        </div>
      </div>
    </div>
  </div>
<section>
Source: sass/utilities/_other.scss, line 270

Section 11.13 #Utilities.ScreenReader
Screen reader only

This class is to hide text that is important for screen readers and accessibility. sr-only

Source: sass/utilities/_other.scss, line 77

Section 11.14 #Utilities.ShadowHover
Shadow Hover

The class hover-shadow adds a box-shadow on hover of the element you add it to. You can use this along with the hover-scale class as well. See the example below.

Example:

Hover over this

Notice how it shadows on hover

Hover over this

Notice how it shadows on hover

Markup:

<section>
  <div class="block-container blocks px-2">
    <div class="block block-4">
      <div class="pui-card hover-shadow">
        <h4 class="pb-2 mb-2">Hover over this</h4>
        <div class="pui-card__content">
          <p>Notice how it shadows on hover</p>
        </div>
      </div>
    </div>
    <div class="block block-4">
      <div class="pui-card hover-shadow hover-scale">
        <h4 class="pb-2 mb-2">Hover over this</h4>
        <div class="pui-card__content">
          <p>Notice how it shadows on hover</p>
        </div>
      </div>
    </div>
  </div>
<section>
Source: sass/utilities/_other.scss, line 299

Section 11.15 #Utilities.Spacers
Spacers

Platform UI provides padding and margin utilities for most scenarios based on it's spacer map;

Direction
location surrounding top bottom left right x-axis y-axis
padding prefix p- pt- pb- pl- pr- px- py-
margin prefix m- mt- mb- ml- mr- mx- my-
Spacer Number values map
number value 0 1 2 3 4 5 6 7
rem value 0rem .25rem .5rem 1rem 2rem 3rem 4.5rem 6.5rem

Usage: {padding, p or margin, m }{ direction if not surrounding: t, b, l, r, x, y }-{ number }

Example:

.pl-2 // padding-left: .5rem;
.mx-3 // margin: 0 1rem;
Source: sass/utilities/_spacers.scss, line 5

Section 11.15.1 #Utilities.Spacers.Responsive
Responsive

Currently we only have responsive spacers for mobile. We are also only using them for margin-bottom and padding-bottom.

Example:

.mobile-mb-3 // margin-bottom: 1rem
.mobile-pb-3 // padding-bottom: 1rem
Source: sass/utilities/_spacers.scss, line 32

Section 11.16 #Utilities.SVGHeight
SVG Height

Use these classes to change the height of an svg used for an icon.

.icon--svg {
  height: 2rem
}

.icon--svg-small {
  height: 1rem
}

.icon--svg-large {
  height: 3rem
}

.icon--svg-xlarge {
  height: 6.5rem
}

Example:

Maple
Elm
Oak
Cherry

Markup:

<div class="block-container mobile-up-2 tablet-up-4">
  <div class="block">
    <h5 class="flex--center-content my-3">
      <img class="icon--svg mr-2" src="site-assets/stylesheets/svg/getting-started.svg" alt="">
      Maple
    </h5>
  </div>
  <div class="block">
    <h5 class="flex--center-content my-3">
      <img class="icon--svg mr-2" src="site-assets/stylesheets/svg/notes.svg" alt="">
      Elm
    </h5>
  </div>
  <div class="block">
    <h5 class="flex--center-content my-3">
      <img class="icon--svg mr-2" src="site-assets/stylesheets/svg/mixins.svg" alt="">
      Oak
    </h5>
  </div>
  <div class="block">
    <h5 class="flex--center-content my-3">
      <img class="icon--svg mr-2" src="site-assets/stylesheets/svg/print.svg" alt="">
      Cherry
    </h5>
  </div>
</div>
Source: sass/utilities/_icons.scss, line 4

Section 11.17 #Utilities.Transition
Transition

Using the transition class adds transition: .2s; to an element. You could use this to make specific hover effects by toggling a class. For example, if you wanted the border-color on a pui-card to change on a click, you could add the transition class, and toggle the class border--color-{color}.

Source: sass/utilities/_other.scss, line 337