Margin

Margin classes follow the following syntax:

[negative] - size - type - [direction] - [media-query]

neg - Add this flag to make values negative, leave blank to remain positive (optional)
size - Seven options definied in variables: xxl, xl, lg, md, sm, xs, xxs or no for none
type - For margin this is mar
direction - Direction the margin should be applied: t, r, b, l (optional)
media-query - Breakpoint below which the class is active: lg, md, sm, xs (optional)

Examples

.lg-mar
.sm-mar

.lg-mar-l
.lg-mar-r
.lg-mar-l .lg-mar-r .lg-mar-b

.xl-mar .lg-mar-on-md .md-mar-on-sm