CSS Utilities

Colors

Colors can be applied to three elements: Text, Background, and Border. Setting the border color does not set the border itself.

Brand Colors

Magento Colors

Example: A div with a light primary background and primary text color.      
          
<div class="background-color-primary-light">
  <p class="text-color-primary">Lorem Ipsum</p>
</div>
          
          

[ TOP ]

Padding & Margins

Padding and Margin can be changed by breakpoint. The attribute is set mobile first. The base attribute, without a breakpoint, sets mobile and above unless another breakpoint is specified. There is no "-xs" modifier since it is handled by the base float.

Padding and margins can be removed (-0) or applied to any or all sides in three levels of predetermined amounts (0-3).

.padding-(0-3)
.margin-(0-3)
-sm-
-md-
-lg-
-top-
-right-
-bottom-
-left-
-x-
-y-

Example: A div with the largest padding set on the left side.

<div class="padding-left-3">Lorem Ipsum</div>

[ TOP ]

Type, Lists & Alignment

Inline type elements are set by thier attribute name. Text-weight, letter-spacing and line-height have three levels of predetermined amounts (1-3).

.font-weight-(1-3)
.font-style-normal
.font-style-italic
.letter-spacing-(0-3)
.line-height-(1-3)
.all-caps
.small-caps
.text-decoration-none
.underline
.nowrap
.truncate
.text-hide

Font Families

Three font families are available.

.font-family-primary
.font-family-secondary
.font-family-tertiary

Font Size

Font size can be scaled up and down by preset amounts.

.font-size-xxsmall
.font-size-xsmall
.font-size-small
.font-size-medium  // p size
.font-size-large   // h3 size
.font-size-xlarge  // h2 size
.font-size-xxlarge // h1 Size

Header Overrides

To keep semantic markup header styles can be overridden. For example an <h5> tag can be made to look like and <h2> by adding an h2 class.

.h1
.h2
.h3
.h4
.h5
.h6
        
Example: Override an h5 tag with h3 style
        
<h5 class="h3">This will look like an h3.<h5>
        

Lists

Lists can be reset to remove padding and bullets.

The .list-inline class set on the <ul> tag will set all child <li>s to display: inline.

.list-reset
.list-inline
.list-style-type-none
.list-style-type-disc
.list-style-type-circle
.list-style-type-square
.list-style-type-decimal
.list-style-position-inside
.list-style-position-outside

Example: Strip padding and bullets from a list

<ul class="list-reset"> 
   <li>List Item 1</li> 
   <li>List Item 2</li> 
   <li>List Item 3</li> 
</ul>

Text Alignment

Text alignment has breakpoints. The alignment is set mobile first. The base aligment, without a breakpoint, sets mobile and above unless another breakpoint is specified. There is no "-xs" modifier since it is handled by the base alignment.

.text-left
.text-right
.text-center
.text-justify
-sm-
-md-
-lg-

Example: Centered text on phones, left aligned starting at vetical tablets (-sm).

<h3 class="text-center text-sm-left">Lorem Ipsum</h3>

Vertical Alignment

Vertical alignment can be set on elements that accept it.

.vertical-align-baseline
.vertical-align-sub
.vertical-align-super
.vertical-align-text-top
.vertical-align-text-bottom
.vertical-align-middle
.vertical-align-top
.vertical-align-bottom

[ TOP ]

Borders & Rounding

Borders of increasing weights (1-3) can be added to all sides or removed (0). Thier color is set seperately with .border-color-.

.border-
-top-
-right-
-bottom-
-left-
-0
-1
-2
-3

Example: div with the lightest right border weight using the primary site color.

<div class="border-right-1 border-color-primary">Lorem Ipsum</div>

Rounding

Elements can be rounded on each corner by a set amount. An element can be made into a circle if its height and width are equal.

.rounded
.rounded-top
.rounded-bottom
.rounded-left
.rounded-0
.rounded-circle

Display

Display can be changed by breakpoint. The display is set mobile first. The base display, without a breakpoint, sets mobile and above unless another breakpoint is specified. There is no "-xs" modifier since it is handled by the base display.

.display-none
.display-inline
.display-inline-block
.display-block
.display-table
.display-table-cell
-sm-
-md-
-lg-

[ TOP ]

Box Shadows

Box shadows have three levels of increasing height.

.box-shadow-1
.box-shadow-2
.box-shadow-3

[ TOP ]

Floats & Overflow

Floats can be changed by breakpoint. The float is set mobile first. The base float, without a breakpoint, sets mobile and above unless another breakpoint is specified. There is no "-xs" modifier since it is handled by the base float. Use the .display tag to set floats to display: block.

.float-left
.float-right
-sm-
-md-
-lg-
.overflow-hidden
.overflow-scroll
.overflow-auto
.clearfix

[ TOP ]

Position, Block Centering & Z-index

Position has breakpoints and can be set to absolute, relative, or fixed. The position is set mobile first. The base position, without a breakpoint, sets mobile and above unless another breakpoint is specified. There is no "-xs" modifier since it is handled by the base position.

.position-relative
.position-absolute
.position-fixed
-sm-
-md-
-lg-

.top-0
.right-0
.bottom-0
.left-0

.z-index-1
.z-index-2
.z-index-3

.center-block 

[ TOP ]