CSS HTML JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
test
.gitignore
.stylelintrc
.travis.yml
CHANGELOG.md
LICENSE.md
README.md
index.css
index.js
package.json

README.md

css-utils-margin

Build Status

Immutable, CSS margin utilities.

Naming Convention

Due to the ubiquitous nature of setting margin, these utilities use a shorthand naming convention.

Shorthand Description
m Margin
t Top
r Right
b Bottom
l Left
x XAxis (left and right)
y YAxis (top and bottom)
n Negative
0 0 reset
1 --space-1 (default 0.5rem)
2 --space-2 (default 1rem)
3 --space-3 (default 2rem)
4 --space-4 (default 4rem)

Change or reset default margins using the white space scale. Negative u-xAxis margins are used to offset margins and padding of child elements. Margin auto is used to horizontally center block-level elements with a set width.

.u-m0  { margin:        0 }
.u-mt0 { margin-top:    0 }
.u-mr0 { margin-right:  0 }
.u-mb0 { margin-bottom: 0 }
.u-ml0 { margin-left:   0 }
.u-mx0 { margin-left:   0; margin-right:  0 }
.u-my0 { margin-top:    0; margin-bottom: 0 }

.u-m1  { margin:        var(--space-1) }
.u-mt1 { margin-top:    var(--space-1) }
.u-mr1 { margin-right:  var(--space-1) }
.u-mb1 { margin-bottom: var(--space-1) }
.u-ml1 { margin-left:   var(--space-1) }
.u-mx1 { margin-left:   var(--space-1); margin-right:  var(--space-1) }
.u-my1 { margin-top:    var(--space-1); margin-bottom: var(--space-1) }

.u-m2  { margin:        var(--space-2) }
.u-mt2 { margin-top:    var(--space-2) }
.u-mr2 { margin-right:  var(--space-2) }
.u-mb2 { margin-bottom: var(--space-2) }
.u-ml2 { margin-left:   var(--space-2) }
.u-mx2 { margin-left:   var(--space-2); margin-right:  var(--space-2) }
.u-my2 { margin-top:    var(--space-2); margin-bottom: var(--space-2) }

.u-m3  { margin:        var(--space-3) }
.u-mt3 { margin-top:    var(--space-3) }
.u-mr3 { margin-right:  var(--space-3) }
.u-mb3 { margin-bottom: var(--space-3) }
.u-ml3 { margin-left:   var(--space-3) }
.u-mx3 { margin-left:   var(--space-3); margin-right:  var(--space-3) }
.u-my3 { margin-top:    var(--space-3); margin-bottom: var(--space-3) }

.u-m4  { margin:        var(--space-4) }
.u-mt4 { margin-top:    var(--space-4) }
.u-mr4 { margin-right:  var(--space-4) }
.u-mb4 { margin-bottom: var(--space-4) }
.u-ml4 { margin-left:   var(--space-4) }
.u-mx4 { margin-left:   var(--space-4); margin-right:  var(--space-4) }
.u-my4 { margin-top:    var(--space-4); margin-bottom: var(--space-4) }

.u-mxn1 { margin-left: -var(--space-1); margin-right: -var(--space-1); }
.u-mxn2 { margin-left: -var(--space-2); margin-right: -var(--space-2); }
.u-mxn3 { margin-left: -var(--space-3); margin-right: -var(--space-3); }
.u-mxn4 { margin-left: -var(--space-4); margin-right: -var(--space-4); }

.u-mlAuto { margin-left: auto }
.u-mrAuto { margin-right: auto }
.u-mxAuto { margin-left: auto; margin-right: auto; }

Resetting Margins

To increase information density and to better align elements, remove default margins from typographic elements using the margin utilities.

<h1 class="u-m0">No margin</h1>
<h1 class="u-mt0">No margin top</h1>
<h1 class="u-mb0">No margin bottom</h1>

Add Spacing

Add spacing around elements using a combination of margin utilities.

<div class="u-mxn1">
  <div class="u-m1">Hamburger</div>
  <div class="u-m1">Hamburger</div>
  <div class="u-m1">Hamburger</div>
</div>

The negative margin utilities also work with padded children.

<div class="border">
  <div class="u-mxn2">
    <div class="u-px2 border">Padded div</div>
  </div>
</div>

Center Elements

Block elements with a set width can be centered with .u-mxAuto.

<img src="http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder-square.svg"
  width="96"
  height="96"
  class="block u-mxAuto" />

Credits

This utility is heavily inspired by Basscss and SuitCSS. This repository is merely a combining of great principles championed by each.