spacing

Simple, class based CSS margin and padding quantities.

Inspired by Bootstrap 4.

---

Usage

Include one of these in your HTML:

• Full size

  <link rel="stylesheet" 
        href="https://cdn.rawgit.com/kdbanman/spacing/d12844ed/spacing.css"
        integrity="sha384-ah9V9uMwTlNJy465+gA7rluMqx8htBIWbynD17zQ4m8lwHYaQad6lTYk7J434ZoT"
        crossorigin="anonymous" />

• Minified

  <link rel="stylesheet"
        href="https://cdn.rawgit.com/kdbanman/spacing/d12844ed/spacing.min.css"
        integrity="sha384-/eo+BBZV8lo5xAeG7Zg4ubcSrzQyciyKecD8DPzS5WWKxbrlICmmGIRpjWcS6SgN"
        crossorigin="anonymous" />

There are six levels of spacing, each labelled with an integer in the classname. The same spacing is defined for both margin and padding.

For example, to give a tag a small bottom margin, give it the class marginBottom-1. To give a tag zero right padding, give it the class paddingRight-0. The HTML might look like this:

<h3 class="marginBottom-1">Spacing is simple</h3>

<p class="paddingRight-0 marginLeft-4">Just read the class names and know the spacing. No digging.</p>

Notice the p tag - classes are composable. Padding and margins can be applied to top, left, bottom, and right. Spacing levels 0 to 5 are valid.

Level	Spacing
0	0
1	0.25 rem
2	0.5 rem
3	1 rem
4	2 rem
5	3 rem

Customization

spacing.css is generated by the python in this gist.

• Change the size of spacing for a level: change any quantity in the spacings list.
• Change the labels from integers to something else, like xs, md, etc: change the labels in the spacings list.
• Change the units from rem to px or something else: change the value of space_units
• Add more levels to the spacing: add an entry to the spacings list.

For example, say you would rather use classes that look like marginLeft-md and give px spacing instead of rem. The following changes would change to px units with four levels labelled sm, md, lg, and xl with sizes 10px, 20px, 30px, and 40px:

spacings = [
  ("sm", 10),
  ("md", 20),
  ("lg", 30),
  ("xl", 40),
];

space_units = "px"

Get the output of that code into a usable css file with something like this:

$ python spacing.py > spacing.css