Find file History
Latest commit f2ba8de Feb 13, 2016 @jxnblk jxnblk Add prepublish script
Failed to load latest commit information.
lib Rename files Feb 7, 2016
.gitignore Add prepublish script Feb 13, 2016
package.json Add prepublish script Feb 13, 2016

Basscss Responsive Margin

Responsive margin utilities module for Basscss -

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

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
1 --space-1 (default .5rem)
2 --space-2 (default 1rem)
3 --space-3 (default 2rem)
4 --space-4 (default 4rem)

Prefix Naming Convention

These styles follow the same breakpoint prefix convention as other Basscss modules.

Prefix Description
(no prefix) Not scoped to a breakpoint
sm- --breakpoint-sm (default: min-width 40em)
md- --breakpoint-md (default: min-width 52em)
lg- --breakpoint-lg (default: min-width 64em)

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.

Larger margins at wider breakpoints

<div class="m1 sm-m2 md-m3 lg-m4">Hamburger</div>

Larger grid gutters at wider breakpoints

When combined with basscss-grid and basscss-responsive-padding, grid gutters can be changed at different breakpoints.

<div class="clearfix mxn2 md-mxn3">
  <div class="col col-6 px2 md-px3">Column</div>
  <div class="col col-6 px2 md-px3">Column</div>