Responsive margin utilities module for Basscss - http://basscss.com
Margin 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 |
| 1 | --space-1 (default .5rem) |
| 2 | --space-2 (default 1rem) |
| 3 | --space-3 (default 2rem) |
| 4 | --space-4 (default 4rem) |
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.
<div class="m1 sm-m2 md-m3 lg-m4">Hamburger</div>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>
</div>