A simple CSS spacing library for margins, paddings (and more later ...) written in Sass (SCSS)
Many libraries try to do everything: sizes, typography, buttons, grid, helpers. CSS Spaces concentrates on one thing only: some classes to add spaces between elements. Use it with whatever framework or library you like.
$ bower install css-spaces$ npm install css-spacesInclude the spaces.css to your website:
<head>
<!-- other stuff -->
<link rel="stylesheet" href="node_modules/css-spaces/dist/spaces.min.css">
</head>Add classes to create paddings and margins.
The following header has a margin-top with the size of xl:
<body>
<header class="mt-xl">This is the header.</header>
</body>These elements have no padding:
<body>
<h1 class="p-0">Lorem ipsum</h1>
<h2 class="p-0">Dolor sit</h2>
</body>This navigation is centered:
<body>
<!-- Read "margin-vertical-null margin-horizontal-auto" -->
<nav class="mv-0 mh-a">
<a href="/">Home</a>
</nav>
</body>All properties have !important as you should only add those classes, if you definitely want a specific behavior.
Sizes are defined in px.
All classes are composed of some simple parts.
m margin
-OR-
p padding
t top
b bottom
r right
l left
v vertical
h horizontal
(none) No direction specified means *all* directions (like in `margin: 8px;`)
- positive value
-- negative value
Example:
.mt-xs { margin-top: 16px }
.mt--xs { margin-top: -16px }a auto
0 0
xxxs 4px
xxs 8px
xs 16px
s 24px
m 36px
l 48px
xl 72px
xxl 96px
xxxl 144px
The following example just uses one size: s (24px). There is also xxxs - xxxl and 0 and a (which is auto).
Margin classes (they start with m) can have positive and negative values, padding classes (replace the leading m with a p) just have positive values.
mt-s margin-top: 24px
mr-s margin-right: 24px
mb-s margin-bottom: 24px
ml-s margin-left: 24px
mh-s margin-left: 24px; margin-right: 24px
mv-s margin-top: 24px; margin-bottom: 24px
m-s margin: 24px
mt--s margin-top: -24px
mr--s margin-right: -24px
mb--s margin-bottom: -24px
ml--s margin-left: -24px
mh--s margin-left: -24px; margin-right: -24px
mv--s margin-top: -24px; margin-bottom: -24px
m--s margin: -24px
// there is also 'auto'
mt-a margin-top: auto
mr-a margin-right: auto
mb-a margin-bottom: auto
ml-a margin-left: auto
mh-a margin-left: auto; margin-right: auto
mv-a margin-top: auto; margin-bottom: auto
m-a margin: auto
// padding classes would be like this:
pt-s padding-top: 24px;
pr-s padding-right: 24px;
// etc.
m-t-0 margin-top: 0
m-t margin-top: 1rem // no-name means "sm (small)"
m-t-md margin-top: 1.5rem
m-t-lg margin-top: 3rem
m-a-lg margin: 3rem // a means "all"
We added negative margins as well (they are missing in Bootstrap 4). Due to the weird syntax for small (no suffix instead of the logical -sm), the syntax for negative values is as follows.
m-neg margin: -1rem
m-t-xs-neg margin-top: -0.5rem
m-t-neg margin-top: -1.0rem
m-t-md-neg margin-top: -1.5rem
m-t-lg-neg margin-top: -3rem
- Install Sass (google it).
- Run
npm install - Change things in
source/() - Run
gulporgulp deploy