Base Reset Base Typography Base Forms Base Buttons Base Tables Utility Layout Utility Typography Utility White Space Utility Responsive States UI Utility Button Sizes UI Utility Groups UI Utility Disclosure States Positions Grid Table Object Color Base Color Forms Color Forms Dark Color Tables Color Buttons Colors Color Borders Flex Object Utility Headings Background Images

# basscss-utility-white-space v0.0.3

# Utility White Space

NPM Github

basscss.com

Margin and padding utilities are based on a global white space scale defined with variables. These utilities use a shorthand naming convention.

Shorthand | Description
--- | ---
m | Margin
p | Padding
t | Top
r | Right
b | Bottom
l | Left
x | X-axis (left and right)
y | Y-axis (top and bottom)
n | Negative (margin only)
1 | --space-1 (default .5rem)
2 | --space-2 (default 1rem)
3 | --space-3 (default 2rem)
4 | --space-4 (default 4rem)

## Margins

Change or reset default margins using the global white space scale. Negative x-axis margins are used to offset padding. Margin auto is used to horizontally center block-level elements with a set width.

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

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

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

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

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

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

    .mx-auto { margin-left: auto; margin-right: auto; }

## Padding

Padding utilities are only available in symmetrical orientations. This is to normalize the spacing used around elements.

    .p1  { padding:       var(--space-1) }
    .py1 { padding-top:   var(--space-1); padding-bottom: var(--space-1) }
    .px1 { padding-left:  var(--space-1); padding-right:  var(--space-1) }

    .p2  { padding:       var(--space-2) }
    .py2 { padding-top:   var(--space-2); padding-bottom: var(--space-2) }
    .px2 { padding-left:  var(--space-2); padding-right:  var(--space-2) }

    .p3  { padding:       var(--space-3) }
    .py3 { padding-top:   var(--space-3); padding-bottom: var(--space-3) }
    .px3 { padding-left:  var(--space-3); padding-right:  var(--space-3) }

    .p4  { padding:       var(--space-4) }
    .py4 { padding-top:   var(--space-4); padding-bottom: var(--space-4) }
    .px4 { padding-left:  var(--space-4); padding-right:  var(--space-4) }

Margins and padding should never be declared outside of these utilities. This is meant to help create consistent rhythm and avoid magic numbers. If, for some reason, the default white space scale does not accomodate your design, customize and extend it before implementation.