Section 11.1
#Utilities.Background
Background Images
Note This section leverages javascript and is not pure css.
You can use platform UI to add background images using data attributes and some javascript.
For starters, you'll need to add the class background-image onto the element where you want to use add an image.
From there, use data attributes to change the look of the background image.
See the example below to see it all come together. You may notice a ratio- class on the image container. We talk
more about that here.
| Class | Data Attribute(s) | Scenarios |
|---|---|---|
background-image |
data-background-image |
image path;no-repeat, position center, and size cover all default |
data-background-position |
overrides default | |
data-background-size |
overrides default | |
data-background-repeat |
overrides default |
Example:
Hero Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elit elit, efficitur a purus eget, porttitor aliquam turpis.
Signup Today!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in blandit urna. Phasellus tristique tortor non quam maximus mattis. Sed ullamcorper et dui et pretium. In condimentum magna a vehicula aliquam. Suspendisse potenti. Integer posuere, lectus at viverra vestibulum, urna leo rhoncus massa, quis congue lorem metus et quam.
Signup for a newsletter! We promise we won't spam you.
Power Your World.
Learn More
Markup:
Markup
<!-- Add data attributes for specific background image styles -->
<div
class="block-container background-image p-4 mb-4"
data-background-image="https://picsum.photos/id/1012/1000/400"
data-background-position="center center"
data-background-size="cover"
data-background-repeat="no-repeat">
<div class="block tablet-up-6 background-black-a90 rounded-2 p-4">
<h1 class="mb-3 mt-0 text-white">Hero Heading</h1>
<p class="text-white mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elit elit, efficitur a purus eget, porttitor aliquam turpis.</p>
</div>
</div>
<div
class="background-image block-container flex--justify-around p-4 mb-4"
data-background-image="https://picsum.photos/id/120/1400/600"
data-background-position="center bottom"
data-background-size="cover"
data-background-repeat="no-repeat">
<div class="block tablet-up-5 py-4">
<h1 class="mb-3 mt-0 text-white">Signup Today!</h1>
<p class="text-white mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in blandit urna. Phasellus tristique tortor non quam maximus mattis. Sed ullamcorper et dui et pretium. In condimentum magna a vehicula aliquam. Suspendisse potenti. Integer posuere, lectus at viverra vestibulum, urna leo rhoncus massa, quis congue lorem metus et quam.</p>
</div>
<div class="block tablet-up-4 background-white-a70 border-t border--color-orange border--width-5 p-4">
<p class="text-black">Signup for a newsletter! We promise we won't spam you.</p>
<form action="" class="form form--rounded">
<div class="block form__field mb-3">
<label class="sr-only" for="first-name">First Name</label>
<input id="first-name" class="background-white-a70" type="text" placeholder="First Name" />
</div>
<div class="block form__field mb-3">
<label class="sr-only" for="last-name">Last Name</label>
<input id="last-name" class="background-white-a70" type="text" placeholder="Last Name" />
</div>
<div class="block form__field mb-3">
<label class="sr-only" for="email">Email Address</label>
<input id="email" class="background-white-a70" type="email" placeholder="[email protected]" />
</div>
<div class="block flex flex--justify-center">
<button class="button button--lg button--orange">Submit</button>
</div>
</form>
</div>
</div>
<div
class="background-image mb-4"
data-background-image="https://picsum.photos/id/214/1000/400"
data-background-position="center center"
data-background-size="cover"
data-background-repeat="no-repeat">
<div class="background-black-a80 text--size-xl text--center p-6">
<i class="pi-bolt text--size-lg text-white"></i>
<h1 class="text-white mt-4 mb-6 pb-6 text--size-xxxl text-white">Power Your World.</h1>
<p class="text-white text--size-sm mb-0">Learn More</p>
<i class="pi-angle-down text-white"></i>
</div>
</div>sass/utilities/_background-image.scss, line 3
Section 11.2
#Utilities.BackgroundGradient
Background Gradient
Note This section leverages javascript and is not pure css. This feature will also not work in IE.
You can create your own custom linear gradient. Start by adding the linear-gradient class. From there,
enter the values you like for your direction and color using the appropriate data attributes. See the
example and table below.
| Class | Data Attributes | Scenarios |
|---|---|---|
linear-gradient |
data-gradient-direction |
background-image: linear-gradient(0deg, rgb(2, 0, 36), rgb(0, 212, 255)) |
data-gradient-start |
linear-gradient(0deg, rgb(2, 0, 36), rgb(0, 212, 255)) |
|
data-gradient-stop |
linear-gradient(0deg, rgb(2, 0, 36), rgb(0, 212, 255)) |
|
data-gradient-fallback |
Add a fallback background-color |
You can also change the distance of your colors by adding a perceentage in the data attribute value for data-gradient-start and or
data-gradient-start. Something like data-gradient-start="var(--navy) 20%" would render just fine. See the first example.
Example:
Markup:
Markup
<div class="block-container tablet-up-2 laptop-up-4 blocks my-3 px-2">
<div class="block">
<!-- Add data attributes to create your gradient -->
<div
class="linear-gradient ratio-16_9"
data-gradient-direction="0deg"
data-gradient-start="#020024 20%"
data-gradient-stop="#00d4ff"
data-gradient-fallback="#020024">
</div>
</div>
<div class="block">
<div
class="linear-gradient ratio-16_9"
data-gradient-direction="90deg"
data-gradient-start="var(--navy)"
data-gradient-stop="var(--blue)"
data-gradient-fallback="var(--navy)">
</div>
</div>
<div class="block">
<div
class="linear-gradient ratio-16_9"
data-gradient-direction="to left top"
data-gradient-start="var(--violet)"
data-gradient-stop="var(--purple)"
data-gradient-fallback="var(--purple)">
</div>
</div>
<div class="block">
<div
class="linear-gradient background-image ratio-16_9"
data-gradient-direction="to right"
data-gradient-start="var(--green)"
data-gradient-stop="transparent"
data-gradient-fallback="var(--green)"
data-background-image="http://placeimg.com/640/360/nature" >
</div>
</div>
</div>sass/utilities/_background-image.scss, line 142
Section 11.3
#Utilities.BackgroundImageGradient
Background Image and Gradient
You can get really fancy with your backgrounds by adding a gradient over a background image.
To do this, you will need both classes linear-gradient background-image. From there, add
the appropriate data attributes to get your desired image and gradient.
Example:
Markup:
Markup
<div class="block-container tablet-up-2 laptop-up-4 blocks my-3 px-2">
<div class="block">
<!-- Add data attributes to create your gradient and image -->
<div
class="linear-gradient background-image ratio-16_9"
data-gradient-direction="to right"
data-gradient-start="var(--green)"
data-gradient-stop="transparent"
data-gradient-fallback="var(--green)"
data-background-image="http://placeimg.com/640/360/nature" >
</div>
</div>
</div>sass/utilities/_background-image.scss, line 211
Section 11.4
#Utilities.BackgroundRatio
Background Ratio
Set the size of an element equal to a common ratio with the ratio-{val} class.
| class | ratio |
|---|---|
.ratio-1_1 |
1:1 |
.ratio-2_1 |
2:1 |
.ratio-4_3 |
4:3 |
.ratio-16_9 |
16:9 |
Example:
Markup:
Markup
<div class="block-container tablet-up-2 laptop-up-4 blocks my-3 px-2">
<div class="block">
<div class="background-navy ratio-1_1 flex--center-content">
<strong class="text-white text--size-lg">1:1</strong>
</div>
</div>
<div class="block">
<div class="background-skyblue ratio-2_1 flex--center-content">
<strong class="text--size-lg">2:1</strong>
</div>
</div>
<div class="block">
<div class="background-med-blue ratio-4_3 flex--center-content">
<strong class="text-white text--size-lg">4:3</strong>
</div>
</div>
<div class="block">
<div class="background-lightblue ratio-16_9 flex--center-content">
<strong class="text--size-lg">16:9</strong>
</div>
</div>
</div>sass/utilities/_background-image.scss, line 90
Section 11.5
#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="card border--color-red">
<h4 class="border-b border--color-navy pb-2 mb-2">Card Header</h4>
<div class="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="card">
<h4 class="pb-2 mb-2">Card Header</h4>
<div class="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="card">
<h4 class="border-y border--color-lighter py-2 mb-2">Card Header</h4>
<div class="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.6
#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.6.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. Alpha transparency can also be set for any background color available. Alpha values range from 10% - 90% on the tens, for example background-black-a90 sets the background of the element to black with 90% alpha.
| 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.6.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.6.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 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.7
#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="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 151
Section 11.8
#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.9
#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 392
Section 11.10
#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.11
#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 |
These classes give you a width and height percentage, relative to the viewport, equal to the number in the class.
| Height | Width | ||
|---|---|---|---|
vh-100 |
height: 100vh | vw-100 |
width: 100vw |
vh-75 |
height: 75vh | vw-75 |
width: 75vw |
vh-50 |
height: 50vh | vw-50 |
width: 50vw |
vh-25 |
height: 25vh | vw-25 |
width: 25vw |
sass/utilities/_other.scss, line 231
Section 11.12
#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="loader loader--sm"></div>
<div class="loader mx-4"></div>
<div class="loader loader--lg"></div>
</div>
<div class="block block-6 background-navy flex--center-content" style="height: 3rem">
<div class="loader loader--sm inverted"></div>
<div class="loader inverted mx-4"></div>
<div class="loader loader--lg inverted"></div>
</div>
</div>sass/utilities/_other.scss, line 94
Section 11.13
#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 284
Section 11.14
#Utilities.PageAnchorOffset
Page Anchor Offset
You can use this class in cases when you have a fixed header on your site and you have
anchors within a page. This utility class prevents the top of the anchor target from
being hidden behind the fixed header. Once called, the class adds a top margin offset
equal to the config setting for $menu-height.
Add the class to the target of the anchor.
Example:
Markup:
Markup
<p class="mb-4"><a href="#heading">Click here</a> to jump to the heading below.</p>
<p class="mb-6">This is just a random block.</p>
<div id="heading" class="page-anchor-target">
<h2>Heading</h2>
</div>sass/utilities/_offest-anchor.scss, line 21
Section 11.15
#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 168
Section 11.16
#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.17
#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="card hover-scale">
<h4 class="pb-2 mb-2">Hover over this</h4>
<div class="card__content">
<p>Notice how it scales on hover</p>
</div>
</div>
</div>
</div>
<section>sass/utilities/_other.scss, line 310
Section 11.18
#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.19
#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="card hover-shadow">
<h4 class="pb-2 mb-2">Hover over this</h4>
<div class="card__content">
<p>Notice how it shadows on hover</p>
</div>
</div>
</div>
<div class="block block-4">
<div class="card hover-shadow hover-scale">
<h4 class="pb-2 mb-2">Hover over this</h4>
<div class="card__content">
<p>Notice how it shadows on hover</p>
</div>
</div>
</div>
</div>
<section>sass/utilities/_other.scss, line 339
Section 11.20
#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.20.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.21
#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.22
#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 card to change on a click, you could add the transition class, and toggle the class border--color-{color}.
sass/utilities/_other.scss, line 377