Base Layout Spacers

Base Layout Spacers is designed in a way where you can add it on top of the Base CSS framework or to your own custom project.

Table of contents

• Overview
• Installation
• Documentation
• Demo
• Support
• Authors
• License

Overview

Base Layout Spacers contains styles for adding spaced rows (.pad-top-5, .pad-bottom-20, etc) and spaced layout (pad-5, pad-20, etc) for all breakpoints.

Installation

If you have an existing project and would like to include the Base layout spacers module, run the following command:

npm install --save @getbase/layout-spacers

Once you have the layout spacers module installed, you can include it in your CSS/LESS/SCSS file with one of the following ways:

CSS Import:

@import url("https://unpkg.com/@getbase/layout-spacers/index.css");

SCSS Import:

/* Import Base Layout Spacers */
@import "~@getbase/layout-spacers/scss/index";
/* Your Other Styles */
@import "main"

LESS Import:

/* Import Base Layout Spacers */
@import "~@getbase/layout-spacers/less/index";
/* Your Other Styles */
@import "main"

Documentation

Base Layout Spacers includes styles for adding spaced rows (.pad-top-5, .pad-bottom-20, etc) and spaced layout (pad-5, pad-20, etc) for all breakpoints.

Helpers (Applies to SCSS/LESS)

| Helper Class | Purpose | Example | Outcome | | ------------ | ------- | ------- | ------- | | .pad-top-5 | Applies top padding 5px | <div class="pad-top-5">This element will have a top padding of 5px</div> | Applies a padding-top of 5px to a div element for all breakpoints | | .pad-top-10 | Applies top padding 10px | <div class="pad-top-10">This element will have a top padding of 10px</div> | Applies a padding-top of 10px to a div element for all breakpoints | | .pad-top-15 | Applies top padding 15px | <div class="pad-top-15">This element will have a top padding of 15px</div> | Applies a padding-top of 15px to a div element for all breakpoints | | .pad-top-20 | Applies top padding 20px | <div class="pad-top-20">This element will have a top padding of 20px</div> | Applies a padding-top of 20px to a div element for all breakpoints | | .pad-top-25 | Applies top padding 25px | <div class="pad-top-25">This element will have a top padding of 25px</div> | Applies a padding-top of 25px to a div element for all breakpoints | | .pad-top-30 | Applies top padding 30px | <div class="pad-top-30">This element will have a top padding of 30px</div> | Applies a padding-top of 30px to a div element for all breakpoints | | .pad-top-35 | Applies top padding 35px | <div class="pad-top-35">This element will have a top padding of 35px</div> | Applies a padding-top of 35px to a div element for all breakpoints | | .pad-top-40 | Applies top padding 40px | <div class="pad-top-40">This element will have a top padding of 40px</div> | Applies a padding-top of 40px to a div element for all breakpoints | | .pad-top-45 | Applies top padding 45px | <div class="pad-top-45">This element will have a top padding of 45px</div> | Applies a padding-top of 45px to a div element for all breakpoints | | .pad-top-50 | Applies top padding 50px | <div class="pad-top-50">This element will have a top padding of 50px</div> | Applies a padding-top of 50px to a div element for all breakpoints | | .pad-top-55 | Applies top padding 55px | <div class="pad-top-55">This element will have a top padding of 55px</div> | Applies a padding-top of 55px to a div element for all breakpoints | | .pad-top-60 | Applies top padding 60px | <div class="pad-top-60">This element will have a top padding of 60px</div> | Applies a padding-top of 60px to a div element for all breakpoints | | .pad-bottom-5 | Applies bottom padding 5px | <div class="pad-bottom-5">This element will have a bottom padding of 5px</div> | Applies a padding-bottom of 5px to a div element for all breakpoints | | .pad-bottom-10 | Applies bottom padding 10px | <div class="pad-bottom-10">This element will have a bottom padding of 10px</div> | Applies a padding-bottom of 10px to a div element for all breakpoints | | .pad-bottom-15 | Applies bottom padding 15px | <div class="pad-bottom-15">This element will have a bottom padding of 15px</div> | Applies a padding-bottom of 15px to a div element for all breakpoints | | .pad-bottom-20 | Applies bottom padding 20px | <div class="pad-bottom-20">This element will have a bottom padding of 20px</div> | Applies a padding-bottom of 20px to a div element for all breakpoints | | .pad-bottom-25 | Applies bottom padding 25px | <div class="pad-bottom-25">This element will have a bottom padding of 25px</div> | Applies a padding-bottom of 25px to a div element for all breakpoints | | .pad-bottom-30 | Applies bottom padding 30px | <div class="pad-bottom-30">This element will have a bottom padding of 30px</div> | Applies a padding-bottom of 30px to a div element for all breakpoints | | .pad-bottom-35 | Applies bottom padding 35px | <div class="pad-bottom-35">This element will have a bottom padding of 35px</div> | Applies a padding-bottom of 35px to a div element for all breakpoints | | .pad-bottom-40 | Applies bottom padding 40px | <div class="pad-bottom-40">This element will have a bottom padding of 40px</div> | Applies a padding-bottom of 40px to a div element for all breakpoints | | .pad-bottom-45 | Applies bottom padding 45px | <div class="pad-bottom-45">This element will have a bottom padding of 45px</div> | Applies a padding-bottom of 45px to a div element for all breakpoints | | .pad-bottom-50 | Applies bottom padding 50px | <div class="pad-bottom-50">This element will have a bottom padding of 50px</div> | Applies a padding-bottom of 50px to a div element for all breakpoints | | .pad-bottom-55 | Applies bottom padding 55px | <div class="pad-bottom-55">This element will have a bottom padding of 55px</div> | Applies a padding-bottom of 55px to a div element for all breakpoints | | .pad-bottom-60 | Applies bottom padding 60px | <div class="pad-bottom-60">This element will have a bottom padding of 60px</div> | Applies a padding-bottom of 60px to a div element for all breakpoints | | .pad-5 | Applies padding 5px | <div class="pad-5">This element will have a padding of 5px</div> | Applies a padding of 5px to a div element for all breakpoints | | .pad-10 | Applies padding 10px | <div class="pad-10">This element will have a padding of 10px</div> | Applies a padding of 10px to a div element for all breakpoints | | .pad-15 | Applies padding 15px | <div class="pad-15">This element will have a padding of 15px</div> | Applies a padding of 15px to a div element for all breakpoints | | .pad-20 | Applies padding 20px | <div class="pad-20">This element will have a padding of 20px</div> | Applies a padding of 20px to a div element for all breakpoints | | .pad-25 | Applies padding 25px | <div class="pad-25">This element will have a padding of 25px</div> | Applies a padding of 25px to a div element for all breakpoints | | .pad-30 | Applies padding 30px | <div class="pad-30">This element will have a padding of 30px</div> | Applies a padding of 30px to a div element for all breakpoints | | .pad-35 | Applies padding 35px | <div class="pad-35">This element will have a padding of 35px</div> | Applies a padding of 35px to a div element for all breakpoints | | .pad-40 | Applies padding 40px | <div class="pad-40">This element will have a padding of 40px</div> | Applies a padding of 40px to a div element for all breakpoints | | .pad-45 | Applies padding 45px | <div class="pad-45">This element will have a padding of 45px</div> | Applies a padding of 45px to a div element for all breakpoints | | .pad-50 | Applies padding 50px | <div class="pad-50">This element will have a padding of 50px</div> | Applies a padding of 50px to a div element for all breakpoints | | .pad-55 | Applies padding 55px | <div class="pad-55">This element will have a padding of 55px</div> | Applies a padding of 55px to a div element for all breakpoints | | .pad-60 | Applies padding 60px | <div class="pad-60">This element will have a padding of 60px</div> | Applies a padding of 60px to a div element for all breakpoints | | .pad-top-0-m | Applies top padding 0px | <div class="pad-top-0-m">This element will have a top padding of 0px</div> | Applies a padding-top of 0px to a div element for medium devices and above | | .pad-top-5-m | Applies top padding 5px | <div class="pad-top-5-m">This element will have a top padding of 5px</div> | Applies a padding-top of 5px to a div element for medium devices and above | | .pad-top-10-m | Applies top padding 10px | <div class="pad-top-10-m">This element will have a top padding of 10px</div> | Applies a padding-top of 10px to a div element for medium devices and above | | .pad-top-15-m | Applies top padding 15px | <div class="pad-top-15-m">This element will have a top padding of 15px</div> | Applies a padding-top of 15px to a div element for medium devices and above | | .pad-top-20-m | Applies top padding 20px | <div class="pad-top-20-m">This element will have a top padding of 20px</div> | Applies a padding-top of 20px to a div element for medium devices and above | | .pad-top-25-m | Applies top padding 25px | <div class="pad-top-25-m">This element will have a top padding of 25px</div> | Applies a padding-top of 25px to a div element for medium devices and above | | .pad-top-30-m | Applies top padding 30px | <div class="pad-top-30-m">This element will have a top padding of 30px</div> | Applies a padding-top of 30px to a div element for medium devices and above | | .pad-top-35-m | Applies top padding 35px | <div class="pad-top-35-m">This element will have a top padding of 35px</div> | Applies a padding-top of 35px to a div element for medium devices and above | | .pad-top-40-m | Applies top padding 40px | <div class="pad-top-40-m">This element will have a top padding of 40px</div> | Applies a padding-top of 40px to a div element for medium devices and above | | .pad-top-45-m | Applies top padding 45px | <div class="pad-top-45-m">This element will have a top padding of 45px</div> | Applies a padding-top of 45px to a div element for medium devices and above | | .pad-top-50-m | Applies top padding 50px | <div class="pad-top-50-m">This element will have a top padding of 50px</div> | Applies a padding-top of 50px to a div element for medium devices and above | | .pad-top-55-m | Applies top padding 55px | <div class="pad-top-55-m">This element will have a top padding of 55px</div> | Applies a padding-top of 55px to a div element for medium devices and above | | .pad-top-60-m | Applies top padding 60px | <div class="pad-top-60-m">This element will have a top padding of 60px</div> | Applies a padding-top of 60px to a div element for medium devices and above | | .pad-bottom-0-m | Applies bottom padding 0px | <div class="pad-bottom-0-m">This element will have a bottom padding of 0px</div> | Applies a padding-bottom of 0px to a div element for medium devices and above | | .pad-bottom-5-m | Applies bottom padding 5px | <div class="pad-bottom-5-m">This element will have a bottom padding of 5px</div> | Applies a padding-bottom of 5px to a div element for medium devices and above | | .pad-bottom-10-m | Applies bottom padding 10px | <div class="pad-bottom-10-m">This element will have a bottom padding of 10px</div> | Applies a padding-bottom of 10px to a div element for medium devices and above | | .pad-bottom-15-m | Applies bottom padding 15px | <div class="pad-bottom-15-m">This element will have a bottom padding of 15px</div> | Applies a padding-bottom of 15px to a div element for medium devices and above | | .pad-bottom-20-m | Applies bottom padding 20px | <div class="pad-bottom-20-m">This element will have a bottom padding of 20px</div> | Applies a padding-bottom of 20px to a div element for medium devices and above | | .pad-bottom-25-m | Applies bottom padding 25px | <div class="pad-bottom-25-m">This element will have a bottom padding of 25px</div> | Applies a padding-bottom of 25px to a div element for medium devices and above | | .pad-bottom-30-m | Applies bottom padding 30px | <div class="pad-bottom-30-m">This element will have a bottom padding of 30px</div> | Applies a padding-bottom of 30px to a div element for medium devices and above | | .pad-bottom-35-m | Applies bottom padding 35px | <div class="pad-bottom-35-m">This element will have a bottom padding of 35px</div> | Applies a padding-bottom of 35px to a div element for medium devices and above | | .pad-bottom-40-m | Applies bottom padding 40px | <div class="pad-bottom-40-m">This element will have a bottom padding of 40px</div> | Applies a padding-bottom of 40px to a div element for medium devices and above | | .pad-bottom-45-m | Applies bottom padding 45px | <div class="pad-bottom-45-m">This element will have a bottom padding of 45px</div> | Applies a padding-bottom of 45px to a div element for medium devices and above | | .pad-bottom-50-m | Applies bottom padding 50px | <div class="pad-bottom-50-m">This element will have a bottom padding of 50px</div> | Applies a padding-bottom of 50px to a div element for medium devices and above | | .pad-bottom-55-m | Applies bottom padding 55px | <div class="pad-bottom-55-m">This element will have a bottom padding of 55px</div> | Applies a padding-bottom of 55px to a div element for medium devices and above | | .pad-bottom-60-m | Applies bottom padding 60px | <div class="pad-bottom-60-m">This element will have a bottom padding of 60px</div> | Applies a padding-bottom of 60px to a div element for medium devices and above | | .pad-0-m | Applies padding 0px | <div class="pad-0-m">This element will have a padding of 0px</div> | Applies a padding of 0px to a div element for medium devices and above | | .pad-5-m | Applies padding 5px | <div class="pad-5-m">This element will have a padding of 5px</div> | Applies a padding of 5px to a div element for medium devices and above | | .pad-10-m | Applies padding 10px | <div class="pad-10-m">This element will have a padding of 10px</div> | Applies a padding of 10px to a div element for medium devices and above | | .pad-15-m | Applies padding 15px | <div class="pad-15-m">This element will have a padding of 15px</div> | Applies a padding of 15px to a div element for medium devices and above | | .pad-20-m | Applies padding 20px | <div class="pad-20-m">This element will have a padding of 20px</div> | Applies a padding of 20px to a div element for medium devices and above | | .pad-25-m | Applies padding 25px | <div class="pad-25-m">This element will have a padding of 25px</div> | Applies a padding of 25px to a div element for medium devices and above | | .pad-30-m | Applies padding 30px | <div class="pad-30-m">This element will have a padding of 30px</div> | Applies a padding of 30px to a div element for medium devices and above | | .pad-35-m | Applies padding 35px | <div class="pad-35-m">This element will have a padding of 35px</div> | Applies a padding of 35px to a div element for medium devices and above | | .pad-40-m | Applies padding 40px | <div class="pad-40-m">This element will have a padding of 40px</div> | Applies a padding of 40px to a div element for medium devices and above | | .pad-45-m | Applies padding 45px | <div class="pad-45-m">This element will have a padding of 45px</div> | Applies a padding of 45px to a div element for medium devices and above | | .pad-50-m | Applies padding 50px | <div class="pad-50-m">This element will have a padding of 50px</div> | Applies a padding of 50px to a div element for medium devices and above | | .pad-55-m | Applies padding 55px | <div class="pad-55-m">This element will have a padding of 55px</div> | Applies a padding of 55px to a div element for medium devices and above | | .pad-60-m | Applies padding 60px | <div class="pad-60-m">This element will have a padding of 60px</div> | Applies a padding of 60px to a div element for medium devices and above | | .pad-top-0-l | Applies top padding 0px | <div class="pad-top-0-l">This element will have a top padding of 0px</div> | Applies a padding-top of 0px to a div element for large devices and above | | .pad-top-5-l | Applies top padding 5px | <div class="pad-top-5-l">This element will have a top padding of 5px</div> | Applies a padding-top of 5px to a div element for large devices and above | | .pad-top-10-l | Applies top padding 10px | <div class="pad-top-10-l">This element will have a top padding of 10px</div> | Applies a padding-top of 10px to a div element for large devices and above | | .pad-top-15-l | Applies top padding 15px | <div class="pad-top-15-l">This element will have a top padding of 15px</div> | Applies a padding-top of 15px to a div element for large devices and above | | .pad-top-20-l | Applies top padding 20px | <div class="pad-top-20-l">This element will have a top padding of 20px</div> | Applies a padding-top of 20px to a div element for large devices and above | | .pad-top-25-l | Applies top padding 25px | <div class="pad-top-25-l">This element will have a top padding of 25px</div> | Applies a padding-top of 25px to a div element for large devices and above | | .pad-top-30-l | Applies top padding 30px | <div class="pad-top-30-l">This element will have a top padding of 30px</div> | Applies a padding-top of 30px to a div element for large devices and above | | .pad-top-35-l | Applies top padding 35px | <div class="pad-top-35-l">This element will have a top padding of 35px</div> | Applies a padding-top of 35px to a div element for large devices and above | | .pad-top-40-l | Applies top padding 40px | <div class="pad-top-40-l">This element will have a top padding of 40px</div> | Applies a padding-top of 40px to a div element for large devices and above | | .pad-top-45-l | Applies top padding 45px | <div class="pad-top-45-l">This element will have a top padding of 45px</div> | Applies a padding-top of 45px to a div element for large devices and above | | .pad-top-50-l | Applies top padding 50px | <div class="pad-top-50-l">This element will have a top padding of 50px</div> | Applies a padding-top of 50px to a div element for large devices and above | | .pad-top-55-l | Applies top padding 55px | <div class="pad-top-55-l">This element will have a top padding of 55px</div> | Applies a padding-top of 55px to a div element for large devices and above | | .pad-top-60-l | Applies top padding 60px | <div class="pad-top-60-l">This element will have a top padding of 60px</div> | Applies a padding-top of 60px to a div element for large devices and above | | .pad-bottom-0-l | Applies bottom padding 0px | <div class="pad-bottom-0-l">This element will have a bottom padding of 0px</div> | Applies a padding-bottom of 0px to a div element for large devices and above | | .pad-bottom-5-l | Applies bottom padding 5px | <div class="pad-bottom-5-l">This element will have a bottom padding of 5px</div> | Applies a padding-bottom of 5px to a div element for large devices and above | | .pad-bottom-10-l | Applies bottom padding 10px | <div class="pad-bottom-10-l">This element will have a bottom padding of 10px</div> | Applies a padding-bottom of 10px to a div element for large devices and above | | .pad-bottom-15-l | Applies bottom padding 15px | <div class="pad-bottom-15-l">This element will have a bottom padding of 15px</div> | Applies a padding-bottom of 15px to a div element for large devices and above | | .pad-bottom-20-l | Applies bottom padding 20px | <div class="pad-bottom-20-l">This element will have a bottom padding of 20px</div> | Applies a padding-bottom of 20px to a div element for large devices and above | | .pad-bottom-25-l | Applies bottom padding 25px | <div class="pad-bottom-25-l">This element will have a bottom padding of 25px</div> | Applies a padding-bottom of 25px to a div element for large devices and above | | .pad-bottom-30-l | Applies bottom padding 30px | <div class="pad-bottom-30-l">This element will have a bottom padding of 30px</div> | Applies a padding-bottom of 30px to a div element for large devices and above | | .pad-bottom-35-l | Applies bottom padding 35px | <div class="pad-bottom-35-l">This element will have a bottom padding of 35px</div> | Applies a padding-bottom of 35px to a div element for large devices and above | | .pad-bottom-40-l | Applies bottom padding 40px | <div class="pad-bottom-40-l">This element will have a bottom padding of 40px</div> | Applies a padding-bottom of 40px to a div element for large devices and above | | .pad-bottom-45-l | Applies bottom padding 45px | <div class="pad-bottom-45-l">This element will have a bottom padding of 45px</div> | Applies a padding-bottom of 45px to a div element for large devices and above | | .pad-bottom-50-l | Applies bottom padding 50px | <div class="pad-bottom-50-l">This element will have a bottom padding of 50px</div> | Applies a padding-bottom of 50px to a div element for large devices and above | | .pad-bottom-55-l | Applies bottom padding 55px | <div class="pad-bottom-55-l">This element will have a bottom padding of 55px</div> | Applies a padding-bottom of 55px to a div element for large devices and above | | .pad-bottom-60-l | Applies bottom padding 60px | <div class="pad-bottom-60-l">This element will have a bottom padding of 60px</div> | Applies a padding-bottom of 60px to a div element for large devices and above | | .pad-0-l | Applies padding 0px | <div class="pad-0-l">This element will have a padding of 0px</div> | Applies a padding of 0px to a div element for large devices and above | | .pad-5-l | Applies padding 5px | <div class="pad-5-l">This element will have a padding of 5px</div> | Applies a padding of 5px to a div element for large devices and above | | .pad-10-l | Applies padding 10px | <div class="pad-10-l">This element will have a padding of 10px</div> | Applies a padding of 10px to a div element for large devices and above | | .pad-15-l | Applies padding 15px | <div class="pad-15-l">This element will have a padding of 15px</div> | Applies a padding of 15px to a div element for large devices and above | | .pad-20-l | Applies padding 20px | <div class="pad-20-l">This element will have a padding of 20px</div> | Applies a padding of 20px to a div element for large devices and above | | .pad-25-l | Applies padding 25px | <div class="pad-25-l">This element will have a padding of 25px</div> | Applies a padding of 25px to a div element for large devices and above | | .pad-30-l | Applies padding 30px | <div class="pad-30-l">This element will have a padding of 30px</div> | Applies a padding of 30px to a div element for large devices and above | | .pad-35-l | Applies padding 35px | <div class="pad-35-l">This element will have a padding of 35px</div> | Applies a padding of 35px to a div element for large devices and above | | .pad-40-l | Applies padding 40px | <div class="pad-40-l">This element will have a padding of 40px</div> | Applies a padding of 40px to a div element for large devices and above | | .pad-45-l | Applies padding 45px | <div class="pad-45-l">This element will have a padding of 45px</div> | Applies a padding of 45px to a div element for large devices and above | | .pad-50-l | Applies padding 50px | <div class="pad-50-l">This element will have a padding of 50px</div> | Applies a padding of 50px to a div element for large devices and above | | .pad-55-l | Applies padding 55px | <div class="pad-55-l">This element will have a padding of 55px</div> | Applies a padding of 55px to a div element for large devices and above | | .pad-60-l | Applies padding 60px | <div class="pad-60-l">This element will have a padding of 60px</div> | Applies a padding of 60px to a div element for large devices and above | | .pad-top-0-xl | Applies top padding 0px | <div class="pad-top-0-xl">This element will have a top padding of 0px</div> | Applies a padding-top of 0px to a div element for extra large devices and above | | .pad-top-5-xl | Applies top padding 5px | <div class="pad-top-5-xl">This element will have a top padding of 5px</div> | Applies a padding-top of 5px to a div element for extra large devices and above | | .pad-top-10-xl | Applies top padding 10px | <div class="pad-top-10-xl">This element will have a top padding of 10px</div> | Applies a padding-top of 10px to a div element for extra large devices and above | | .pad-top-15-xl | Applies top padding 15px | <div class="pad-top-15-xl">This element will have a top padding of 15px</div> | Applies a padding-top of 15px to a div element for extra large devices and above | | .pad-top-20-xl | Applies top padding 20px | <div class="pad-top-20-xl">This element will have a top padding of 20px</div> | Applies a padding-top of 20px to a div element for extra large devices and above | | .pad-top-25-xl | Applies top padding 25px | <div class="pad-top-25-xl">This element will have a top padding of 25px</div> | Applies a padding-top of 25px to a div element for extra large devices and above | | .pad-top-30-xl | Applies top padding 30px | <div class="pad-top-30-xl">This element will have a top padding of 30px</div> | Applies a padding-top of 30px to a div element for extra large devices and above | | .pad-top-35-xl | Applies top padding 35px | <div class="pad-top-35-xl">This element will have a top padding of 35px</div> | Applies a padding-top of 35px to a div element for extra large devices and above | | .pad-top-40-xl | Applies top padding 40px | <div class="pad-top-40-xl">This element will have a top padding of 40px</div> | Applies a padding-top of 40px to a div element for extra large devices and above | | .pad-top-45-xl | Applies top padding 45px | <div class="pad-top-45-xl">This element will have a top padding of 45px</div> | Applies a padding-top of 45px to a div element for extra large devices and above | | .pad-top-50-xl | Applies top padding 50px | <div class="pad-top-50-xl">This element will have a top padding of 50px</div> | Applies a padding-top of 50px to a div element for extra large devices and above | | .pad-top-55-xl | Applies top padding 55px | <div class="pad-top-55-xl">This element will have a top padding of 55px</div> | Applies a padding-top of 55px to a div element for extra large devices and above | | .pad-top-60-xl | Applies top padding 60px | <div class="pad-top-60-xl">This element will have a top padding of 60px</div> | Applies a padding-top of 60px to a div element for extra large devices and above | | .pad-bottom-0-xl | Applies bottom padding 0px | <div class="pad-bottom-0-xl">This element will have a bottom padding of 0px</div> | Applies a padding-bottom of 0px to a div element for extra large devices and above | | .pad-bottom-5-xl | Applies bottom padding 5px | <div class="pad-bottom-5-xl">This element will have a bottom padding of 5px</div> | Applies a padding-bottom of 5px to a div element for extra large devices and above | | .pad-bottom-10-xl | Applies bottom padding 10px | <div class="pad-bottom-10-xl">This element will have a bottom padding of 10px</div> | Applies a padding-bottom of 10px to a div element for extra large devices and above | | .pad-bottom-15-xl | Applies bottom padding 15px | <div class="pad-bottom-15-xl">This element will have a bottom padding of 15px</div> | Applies a padding-bottom of 15px to a div element for extra large devices and above | | .pad-bottom-20-xl | Applies bottom padding 20px | <div class="pad-bottom-20-xl">This element will have a bottom padding of 20px</div> | Applies a padding-bottom of 20px to a div element for extra large devices and above | | .pad-bottom-25-xl | Applies bottom padding 25px | <div class="pad-bottom-25-xl">This element will have a bottom padding of 25px</div> | Applies a padding-bottom of 25px to a div element for extra large devices and above | | .pad-bottom-30-xl | Applies bottom padding 30px | <div class="pad-bottom-30-xl">This element will have a bottom padding of 30px</div> | Applies a padding-bottom of 30px to a div element for extra large devices and above | | .pad-bottom-35-xl | Applies bottom padding 35px | <div class="pad-bottom-35-xl">This element will have a bottom padding of 35px</div> | Applies a padding-bottom of 35px to a div element for extra large devices and above | | .pad-bottom-40-xl | Applies bottom padding 40px | <div class="pad-bottom-40-xl">This element will have a bottom padding of 40px</div> | Applies a padding-bottom of 40px to a div element for extra large devices and above | | .pad-bottom-45-xl | Applies bottom padding 45px | <div class="pad-bottom-45-xl">This element will have a bottom padding of 45px</div> | Applies a padding-bottom of 45px to a div element for extra large devices and above | | .pad-bottom-50-xl | Applies bottom padding 50px | <div class="pad-bottom-50-xl">This element will have a bottom padding of 50px</div> | Applies a padding-bottom of 50px to a div element for extra large devices and above | | .pad-bottom-55-xl | Applies bottom padding 55px | <div class="pad-bottom-55-xl">This element will have a bottom padding of 55px</div> | Applies a padding-bottom of 55px to a div element for extra large devices and above | | .pad-bottom-60-xl | Applies bottom padding 60px | <div class="pad-bottom-60-xl">This element will have a bottom padding of 60px</div> | Applies a padding-bottom of 60px to a div element for extra large devices and above | | .pad-0-xl | Applies padding 0px | <div class="pad-0-xl">This element will have a padding of 0px</div> | Applies a padding of 0px to a div element for extra large devices and above | | .pad-5-xl | Applies padding 5px | <div class="pad-5-xl">This element will have a padding of 5px</div> | Applies a padding of 5px to a div element for extra large devices and above | | .pad-10-xl | Applies padding 10px | <div class="pad-10-xl">This element will have a padding of 10px</div> | Applies a padding of 10px to a div element for extra large devices and above | | .pad-15-xl | Applies padding 15px | <div class="pad-15-xl">This element will have a padding of 15px</div> | Applies a padding of 15px to a div element for extra large devices and above | | .pad-20-xl | Applies padding 20px | <div class="pad-20-xl">This element will have a padding of 20px</div> | Applies a padding of 20px to a div element for extra large devices and above | | .pad-25-xl | Applies padding 25px | <div class="pad-25-xl">This element will have a padding of 25px</div> | Applies a padding of 25px to a div element for extra large devices and above | | .pad-30-xl | Applies padding 30px | <div class="pad-30-xl">This element will have a padding of 30px</div> | Applies a padding of 30px to a div element for extra large devices and above | | .pad-35-xl | Applies padding 35px | <div class="pad-35-xl">This element will have a padding of 35px</div> | Applies a padding of 35px to a div element for extra large devices and above | | .pad-40-xl | Applies padding 40px | <div class="pad-40-xl">This element will have a padding of 40px</div> | Applies a padding of 40px to a div element for extra large devices and above | | .pad-45-xl | Applies padding 45px | <div class="pad-45-xl">This element will have a padding of 45px</div> | Applies a padding of 45px to a div element for extra large devices and above | | .pad-50-xl | Applies padding 50px | <div class="pad-50-xl">This element will have a padding of 50px</div> | Applies a padding of 50px to a div element for extra large devices and above | | .pad-55-xl | Applies padding 55px | <div class="pad-55-xl">This element will have a padding of 55px</div> | Applies a padding of 55px to a div element for extra large devices and above | | .pad-60-xl | Applies padding 60px | <div class="pad-60-xl">This element will have a padding of 60px</div> | Applies a padding of 60px to a div element for extra large devices and above |

Demo

View page example with the layout spacers stylesheet applied.

Support

• IE10+ and all other modern browsers.
• Please specify browsers you need to support in package.json according to browserslist docs.

Authors

Matthew Hartman

• https://twitter.com/matthewhartmans
• https://github.com/matthewhartman

License

Code released under the MIT Open Source license.