Includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.

AXA classes are built from a default Sass map ranging from 0.5rem to 5rem.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl.

Where size is one of:

• 0 - for classes that eliminate the margin or padding by setting it to 0
• 1 - (by default) for classes that set the margin or padding to $spacer * .5
• 2 - (by default) for classes that set the margin or padding to $spacer * .75
• 3 - (by default) for classes that set the margin or padding to $spacer
• 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
• 5 - (by default) for classes that set the margin or padding to $spacer * 2
• 6 - (by default) for classes that set the margin or padding to $spacer * 2.5
• 7 - (by default) for classes that set the margin or padding to $spacer * 3
• 8 - (by default) for classes that set the margin or padding to $spacer * 3.5
• 9 - (by default) for classes that set the margin or padding to $spacer * 4
• 10 - (by default) for classes that set the margin or padding to $spacer * 4.5
• 11 - (by default) for classes that set the margin or padding to $spacer * 5
• auto - for classes that set the margin to auto

Here are some representative examples of these classes:

.mt-0 { margin-top: 0 !important; } 
.ms-1 { margin-left: ($spacer * .5) !important; } 
.px-2 { padding-left: ($spacer * .75) !important; padding-right: ($spacer * .75) !important; } 
.pe-11 { padding-right: ($spacer * 5) !important; } 
.p-3 { padding: $spacer !important; } 

<p class="ps-11">
  Sample test with new AXA spacer ps-11 / padding left = ($spacer * 5) = 80px
</p>