CSS spacing utility library
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
docs
src
.gitignore
LICENSE
README.md
gulpfile.js
package.json

README.md

Spacing-CSS

npm version

Spacing CSS is a CSS library for adding responsive margin / padding utility classes. It's sole purpose is to add space between elements.

Usage

Include the spacing.css file in the of your webpage.

<head>
    <link rel="stylesheet" href="/dist/spacing.min.css">
</head>

Then add classes to elements to create margins and padding.

<p class="mt">Top margin of 1rem</p>
<p class="pl-2x">Left padding of 2rem</p>

Spacing classes

Each spacing class is created in the following format:

(property)(direction)-(mediaQuery)-(multiplier)

Only property is required, the rest can be omitted.

Property

This specifies whether the spacing is margin or padding, it's the only required part of the spacing class.

m - margin
p - padding

Direction

This specifies the direction for the space, if you omit this value then space will be applied to all sides.

t - top
r - right
b - bottom
l - left
h - horizontal
v - vertical
*blank* - all directions

Media Query

This specifies the screen size the space should apply to. If you omit this value then the space will apply to all screen sizes.

These are the default media queries, the /dist directory also contains builds for popular libraries. Check the docs for these.

small - 320px -> 480px
medium - 481px -> 767px
large - 768px -> 1024px
xlarge - 1025px -> 1280px
xxlarge - 1281px and up

Multiplier

By default 1rem of space is applied, this multiplier allows you to increase that amount. You can also use a multiplier of 0, which removes space. For margin you can also set a multiplier of a, which sets a margin of auto

0 - no space
a - auto space (margin only)
2x - space of 2rem
3x - space of 3rem
4x - space of 4rem
5x - space of 5rem

Examples

.mt-small-2x <!-- margin-top: 2rem -->
.pb_3x <!-- padding-bottom: 3rem -->
.p-0 <!-- padding: 0 -->
.mh_a <!--  margin-right: auto; margin-left: auto -->