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:
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>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.
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 |
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.
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:
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>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:
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>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) |
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.
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 |
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 |
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:
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>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 |
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%) |
sass/utilities/_other.scss, line 151
Section 11.11
#Utilities.Rotate
Rotate
Utility classes to rotate an element.
Example:
Markup:
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>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:
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>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
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:
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>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;
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
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:
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>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}.
sass/utilities/_other.scss, line 337