Section 12 #Utilities
Utilities

Section 12.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 blocks-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 12.2 #Utilities.CloseAction
Close Action

The close action is used to close or hide certain components. It could be used on banners and modals for example. It needs to have a position class associated with it, like right or left. These classes tell it what side of the container it will live on. You can see the Collapse button in the banners below.

Example:

collapse

Your dashboard got an upgrade!

Take a quick video tour to see the new features of your dashboard.

Watch now

collapse

Your dashboard got an upgrade!

Take a quick video tour to see the new features of your dashboard.

Watch now

Markup:

<div class="crm-banner post animated slideInDown fast" style="background-image: linear-gradient(to right, white, 80%, transparent), url('https://freephotos.cc/storage/preview/path/e0TY5dzjfyAcol92eAidR4ublvPlT2dBbmAGcqeN.jpeg'); background-repeat: no-repeat; background-size: cover; background-position: top center;">
  <div class="button button--sm close-action right">
    collapse
    <i class="pi-angle-up" aria-hidden="true"></i>
  </div>
  <h2 class="crm-banner__title mb-2">
    Your dashboard got an upgrade!
  </h2>
  <p class="crm-banner__teaser">
    Take a quick video tour to see the new features of your dashboard.
  </p>
  <a data-modal="video-banner" class="button button--post button--lg pui-modal__open">
    <i class="pi-play-circle" aria-hidden="true"></i>
    Watch now
  </a>
</div>
<div class="crm-banner post animated slideInDown fast" style="background-image: linear-gradient(to right, white, 80%, transparent), url('https://freephotos.cc/storage/preview/path/e0TY5dzjfyAcol92eAidR4ublvPlT2dBbmAGcqeN.jpeg'); background-repeat: no-repeat; background-size: cover; background-position: top center;">
  <div class="button button--sm close-action left">
    collapse
    <i class="pi-angle-up" aria-hidden="true"></i>
  </div>
  <h2 class="crm-banner__title mb-2">
    Your dashboard got an upgrade!
  </h2>
  <p class="crm-banner__teaser">
    Take a quick video tour to see the new features of your dashboard.
  </p>
  <a data-modal="video-banner" class="button button--post button--lg pui-modal__open">
    <i class="pi-play-circle" aria-hidden="true"></i>
    Watch now
  </a>
</div>

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

Section 12.3 #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 12.3.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`

Source: sass/utilities/_colors.scss, line 6

Section 12.3.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 12.3.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 12.4 #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 187

Section 12.5 #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 screen and (min-width: 0px)`
`show-mobile-only`	`display: block;`	`@media screen and (min-width: 0px) and (max-width: 767px)`
`show-mobile-down`	`display: block;`	`@media screen and (max-width: 767px)`
`hide-mobile-up`	`display: none;`	`@media screen and (min-width: 0px)`
`hide-mobile-only`	`display: none;`	`@media screen and (min-width: 0px) and (max-width: 767px)`
`hide-mobile-down`	`display: none;`	`@media screen and (max-width: 767px)`
`show-tablet-up`	`display: block;`	`@media screen and (min-width: 768px)`
`show-tablet-only`	`display: block;`	`@media screen and (min-width: 768px) and (max-width: 990px)`
`show-tablet-down`	`display: block;`	`@media screen and (max-width: 990px)`
`hide-tablet-up`	`display: none;`	`@media screen and (min-width: 768px)`
`hide-tablet-only`	`display: none;`	`@media screen and (min-width: 768px) and (max-width: 990px)`
`hide-tablet-down`	`display: none;`	`@media screen and (max-width: 990px)`
`show-lg-tablet-up`	`display: block;`	`@media screen and (min-width: 991px)`
`show-lg-tablet-only`	`display: block;`	`@media screen and (min-width: 991px) and (max-width: 1239px)`
`show-lg-tablet-down`	`display: block;`	`@media screen and (max-width: 1239px)`
`hide-lg-tablet-up`	`display: none;`	`@media screen and (min-width: 991px)`
`hide-lg-tablet-only`	`display: none;`	`@media screen and (min-width: 991px) and (max-width: 1239px)`
`hide-lg-tablet-down`	`display: none;`	`@media screen and (max-width: 1239px)`
`show-laptop-up`	`display: block;`	`@media screen and (min-width: 1240px)`
`show-laptop-only`	`display: block;`	`@media screen and (min-width: 1240px) and (max-width: 1799px)`
`show-laptop-down`	`display: block;`	`@media screen and (max-width: 1799px)`
`hide-laptop-up`	`display: none;`	`@media screen and (min-width: 1240px)`
`hide-laptop-only`	`display: none;`	`@media screen and (min-width: 1240px) and (max-width: 1799px)`
`hide-laptop-down`	`display: none;`	`@media screen and (max-width: 1799px)`
`show-desktop-up`	`display: block;`	`@media screen and (min-width: 1800px)`
`show-desktop-only`	`display: block;`	`@media screen and (min-width: 1800px) and (max-width: 1799px)`
`hide-desktop-up`	`display: none;`	`@media screen and (min-width: 1800px)`
`hide-desktop-only`	`display: none;`	`@media screen and (min-width: 1800px) and (max-width: 1799px)`

Source: sass/utilities/_display.scss, line 5

Section 12.6 #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 366

Section 12.7 #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`

Source: sass/utilities/_flex.scss, line 4

Section 12.8 #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 266

Section 12.9 #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 147

Section 12.10 #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 296

Section 12.11 #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`
`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 204

Section 12.12 #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 12.13 #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 322

Section 12.14 #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 130

Section 12.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 12.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 12.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:

Commissions

Testing

Downlines

Quotes

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="">
      Commissions
    </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="">
      Testing
    </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="">
      Downlines
    </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="">
      Quotes
    </h5>
  </div>
</div>

Source: sass/utilities/_icons.scss, line 4

Section 12.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 351