spacing
Version:
CSS spacing classes
148 lines (135 loc) • 8.37 kB
HTML
<html lang="en-US" class="scheme-0">
<meta charset="utf-8">
<title>Opensource functional CSS spacing for modern web development</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="CSS margin and padding utility classes">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="module.css">
<style>
html { font: 1em/2 sans-serif; font-size: calc(.9em + .5vw + .5vh) }
body { margin: 0 auto; padding: 1rem }
code { font-family: inherit; display: inline-block }
* { box-sizing: border-box }
.line-compact { line-height: 1.3333 }
:focus { outline: 3px dotted currentColor }
:link { text-decoration-skip: ink }
:link, :visited { color: #777 }
.scheme-0 { background: #efefef; color: #111 }
.scheme-1 { background: #111; color: #efefef }
.scheme-2 { background: HotPink; color: #111 }
.scheme-3 { background: Pink; color: #111 }
.inline-block { display: inline-block }
.block { display: block }
.natural { display: table }
.flex { display: -webkit-box; display: -ms-flexbox; display: flex }
.inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex }
</style>
<header class="natural m0 mb2 p2 scheme-2">
<h1 class="block m0 line-compact"><a href="" class="inline-block scheme-2">spacing</a></h1>
<a class="inline-block scheme-2 mr1" href="https://github.com/ryanve/spacing">github</a>
<a class="inline-block scheme-2 mr1" href="https://www.npmjs.com/package/spacing">npm</a>
<a class="inline-block scheme-2 mr1" href="https://unpkg.com/spacing@latest">unpkg</a>
</header>
<section id="padding">
<h2 class="line-compact"><a href="#padding"><code>padding</code></a></h2>
<figure class="inline-flex m0 mb2"><code class="scheme-1 p0">p0</code></figure>
<figure class="inline-flex m0 mb2"><code class="scheme-1 p1">p1</code></figure>
<figure class="inline-flex m0 mb2"><code class="scheme-1 p2">p2</code></figure>
<figure class="inline-flex m0 mb2"><code class="scheme-1 p3">p3</code></figure>
<figure class="inline-flex m0 mb2"><code class="scheme-1 p4">p4</code></figure>
</section>
<section id="padding-top">
<h2 class="line-compact"><a href="#padding-top"><code>padding-top</code></a></h2>
<figure class="inline-flex m0 mb2"><code class="scheme-1 pt0">pt0</code></figure>
<figure class="inline-flex m0 mb2"><code class="scheme-1 pt1">pt1</code></figure>
<figure class="inline-flex m0 mb2"><code class="scheme-1 pt2">pt2</code></figure>
<figure class="inline-flex m0 mb2"><code class="scheme-1 pt3">pt3</code></figure>
<figure class="inline-flex m0 mb2"><code class="scheme-1 pt4">pt4</code></figure>
</section>
<section id="padding-left">
<h2 class="line-compact"><a href="#padding-left"><code>padding-left</code></a></h2>
<figure class="inline-flex m0 mb2"><code class="scheme-1 pl0">pl0</code></figure>
<figure class="inline-flex m0 mb2"><code class="scheme-1 pl1">pl1</code></figure>
<figure class="inline-flex m0 mb2"><code class="scheme-1 pl2">pl2</code></figure>
<figure class="inline-flex m0 mb2"><code class="scheme-1 pl3">pl3</code></figure>
<figure class="inline-flex m0 mb2"><code class="scheme-1 pl4">pl4</code></figure>
</section>
<section id="padding-right">
<h2 class="line-compact"><a href="#padding-right"><code>padding-right</code></a></h2>
<figure class="inline-flex m0 mb2"><code class="scheme-1 pr0">pr0</code></figure>
<figure class="inline-flex m0 mb2"><code class="scheme-1 pr1">pr1</code></figure>
<figure class="inline-flex m0 mb2"><code class="scheme-1 pr2">pr2</code></figure>
<figure class="inline-flex m0 mb2"><code class="scheme-1 pr3">pr3</code></figure>
<figure class="inline-flex m0 mb2"><code class="scheme-1 pr4">pr4</code></figure>
</section>
<section id="margin">
<h2 class="line-compact"><a href="#margin"><code>margin</code></a></h2>
<figure class="flex m0 mb3 scheme-2"><code class="scheme-1 -m2">-m2</code></figure>
<figure class="flex m0 mb3 scheme-2"><code class="scheme-1 -m1">-m1</code></figure>
<figure class="flex m0 mb3 scheme-2"><code class="scheme-1 m0">m0</code></figure>
<figure class="flex m0 mb3 scheme-2"><code class="scheme-1 m1">m1</code></figure>
<figure class="flex m0 mb3 scheme-2"><code class="scheme-1 m2">m2</code></figure>
<figure class="flex m0 mb3 scheme-2"><code class="scheme-1 m3">m3</code></figure>
<figure class="flex m0 mb3 scheme-2"><code class="scheme-1 m4">m4</code></figure>
<figure class="flex m0 mb3 scheme-2"><code class="scheme-1 m-auto">m-auto</code></figure>
</section>
<section id="margin-top">
<h2 class="line-compact"><a href="#margin-top"><code>margin-top</code></a></h2>
<figure class="flex m0 mb1 scheme-2"><code class="scheme-1 mt0">mt0</code></figure>
<figure class="flex m0 mb1 scheme-2"><code class="scheme-1 mt1">mt1</code></figure>
<figure class="flex m0 mb1 scheme-2"><code class="scheme-1 mt2">mt2</code></figure>
<figure class="flex m0 mb1 scheme-2"><code class="scheme-1 mt3">mt3</code></figure>
<figure class="flex m0 mb1 scheme-2"><code class="scheme-1 mt4">mt4</code></figure>
<figure class="flex m0 mb1 scheme-2"><code class="scheme-1 mt-auto">mt-auto</code></figure>
</section>
<section id="margin-left">
<h2 class="line-compact"><a href="#margin-left"><code>margin-left</code></a></h2>
<figure class="flex m0 mb1 scheme-2"><code class="scheme-1 ml0">ml0</code></figure>
<figure class="flex m0 mb1 scheme-2"><code class="scheme-1 ml1">ml1</code></figure>
<figure class="flex m0 mb1 scheme-2"><code class="scheme-1 ml2">ml2</code></figure>
<figure class="flex m0 mb1 scheme-2"><code class="scheme-1 ml3">ml3</code></figure>
<figure class="flex m0 mb1 scheme-2"><code class="scheme-1 ml4">ml4</code></figure>
<figure class="flex m0 mb1 scheme-2"><code class="scheme-1 ml-auto">ml-auto</code></figure>
</section>
<section id="margin-right">
<h2 class="line-compact"><a href="#margin-right"><code>margin-right</code></a></h2>
<figure class="flex m0 mb1 scheme-2"><code class="scheme-1 mr0">mr0</code></figure>
<figure class="flex m0 mb1 scheme-2"><code class="scheme-1 mr1">mr1</code></figure>
<figure class="flex m0 mb1 scheme-2"><code class="scheme-1 mr2">mr2</code></figure>
<figure class="flex m0 mb1 scheme-2"><code class="scheme-1 mr3">mr3</code></figure>
<figure class="flex m0 mb1 scheme-2"><code class="scheme-1 mr4">mr4</code></figure>
<figure class="flex m0 mb1 scheme-2"><code class="scheme-1 mr-auto">mr-auto</code></figure>
</section>
<section id="margin-bottom">
<h2 class="line-compact"><a href="#margin-bottom"><code>margin-bottom</code></a></h2>
<figure class="flex m0 mb1 scheme-2"><code class="scheme-1 mb0">mb0</code></figure>
<figure class="flex m0 mb1 scheme-2"><code class="scheme-1 mb1">mb1</code></figure>
<figure class="flex m0 mb1 scheme-2"><code class="scheme-1 mb2">mb2</code></figure>
<figure class="flex m0 mb1 scheme-2"><code class="scheme-1 mb3">mb3</code></figure>
<figure class="flex m0 mb1 scheme-2"><code class="scheme-1 mb4">mb4</code></figure>
<figure class="flex m0 mb1 scheme-2"><code class="scheme-1 mb-auto">mb-auto</code></figure>
</section>
<section id="intramargin">
<h2 class="line-compact"><a href="#intramargin">intramargin</a></h2>
<figure class="block m0 mb2 scheme-3">
<code class="block scheme-2 mb1 mb0-last">mb1 mb0-last</code>
<code class="block scheme-2 mb1 mb0-last">mb1 mb0-last</code>
<code class="block scheme-2 mb1 mb0-last">mb1 mb0-last</code>
</figure>
<figure class="block m0 mb2 scheme-3">
<code class="block scheme-2 mt1 mt0-first">mt1 mt0-first</code>
<code class="block scheme-2 mt1 mt0-first">mt1 mt0-first</code>
<code class="block scheme-2 mt1 mt0-first">mt1 mt0-first</code>
</figure>
<figure class="natural m0 mb2 scheme-3">
<code class="inline-block scheme-2 pl1 pr1 ml1 ml0-first">ml1 ml0-first</code>
<code class="inline-block scheme-2 pl1 pr1 ml1 ml0-first">ml1 ml0-first</code>
<code class="inline-block scheme-2 pl1 pr1 ml1 ml0-first">ml1 ml0-first</code>
</figure>
<figure class="natural m0 mb2 scheme-3">
<code class="inline-block scheme-2 pl1 pr1 mr1 mr0-last">mr1 mr0-last</code>
<code class="inline-block scheme-2 pl1 pr1 mr1 mr0-last">mr1 mr0-last</code>
<code class="inline-block scheme-2 pl1 pr1 mr1 mr0-last">mr1 mr0-last</code>
</figure>
</section>