The Predix UI Spacing module is a collection of helper classes for spacings like margin and padding. This module is a fork of inuitcss' spacing module.
The px-spacing-design module depends on one other Px module:
Install this module and its dependencies using bower:
bower install --save px-spacing-design
Once installed, @import into your project's Sass file in its Trumps layer:
@import "px-spacing-design/_trumps.spacing.scss";
These flags are available and, if needed, should be set to true prior to importing the module:
$inuit-enable-margins
$inuit-enable-margins--tiny
$inuit-enable-margins--small
$inuit-enable-margins--large
$inuit-enable-margins--huge
$inuit-enable-margins--negative
$inuit-enable-margins--negative-tiny
$inuit-enable-margins--negative-small
$inuit-enable-margins--negative-large
$inuit-enable-margins--negative-huge
$inuit-enable-margins--none
$inuit-enable-margins--rtl
$inuit-enable-paddings
$inuit-enable-paddings--tiny
$inuit-enable-paddings--small
$inuit-enable-paddings--large
$inuit-enable-paddings--huge
$inuit-enable-paddings--none
$inuit-enable-paddings--rtl
The conventions used in the classes in the spacing module are as follows:
.u-[negative][type][direction][size] {}
E.g.:
.u--mt+will give you a large (+) negative (-) margin (m) top (t)..u-p--will give you a tiny (--) padding (p)..u-mh++will give you a huge (++) horizontal (h) margin (m)..u-mb0will give you no (0) margin (m) bottom (b)..u-pl-will give you a small (-) padding (p) left (l).
Knowing these conventions means you can compose a huge array of spacing helpers.
These classes are available if the following variable flags are set to true:
$inuit-enable-margins:
u-m: add default margins to all sidesu-mt: add default margin topu-mr: add default margin rightu-mb: add default margin bottomu-ml: add default margin leftu-mh: add default margins right and leftu-mv: add default margins top and bottom
$inuit-enable-margins--tiny:
u-m--: add tiny margins to all sidesu-mt--: add tiny margin topu-mr--: add tiny margin rightu-mb--: add tiny margin bottomu-ml--: add tiny margin leftu-mh--: add tiny margins right and leftu-mv--: add tiny margins top and bottom
$inuit-enable-margins--small:
u-m-: add small margins to all sidesu-mt-: add small margin topu-mr-: add small margin rightu-mb-: add small margin bottomu-ml-: add small margin leftu-mh-: add small margins right and leftu-mv-: add small margins top and bottom
$inuit-enable-margins--large:
u-m+: add large margins to all sidesu-mt+: add large margin topu-mr+: add large margin rightu-mb+: add large margin bottomu-ml+: add large margin leftu-mh+: add large margins right and leftu-mv+: add large margins top and bottom
$inuit-enable-margins--huge:
u-m++: add huge margins to all sidesu-mt++: add huge margin topu-mr++: add huge margin rightu-mb++: add huge margin bottomu-ml++: add huge margin leftu-mh++: add huge margins right and leftu-mv++: add huge margins top and bottom
$inuit-enable-margins--negative:
u--m: add default negative margins to all sidesu--mt: add default negative margin topu--mr: add default negative margin rightu--mb: add default negative margin bottomu--ml: add default negative margin leftu--mh: add default negative margins right and leftu--mv: add default negative margins top and bottom
$inuit-enable-margins--negative-tiny:
u--m--: add tiny negative margins to all sidesu--mt--: add tiny negative margin topu--mr--: add tiny negative margin rightu--mb--: add tiny negative margin bottomu--ml--: add tiny negative margin leftu--mh--: add tiny negative margins right and leftu--mv--: add tiny negative margins top and bottom
$inuit-enable-margins--negative-small:
u--m-: add small negative margins to all sidesu--mt-: add small negative margin topu--mr-: add small negative margin rightu--mb-: add small negative margin bottomu--ml-: add small negative margin leftu--mh-: add small negative margins right and leftu--mv-: add small negative margins top and bottom
$inuit-enable-margins--negative-large:
u--m+: add large negative margins to all sidesu--mt+: add large negative margin topu--mr+: add large negative margin rightu--mb+: add large negative margin bottomu--ml+: add large negative margin leftu--mh+: add large negative margins right and leftu--mv+: add large negative margins top and bottom
$inuit-enable-margins--negative-huge:
u--m++: add huge negative margins to all sidesu--mt++: add huge negative margin topu--mr++: add huge negative margin rightu--mb++: add huge negative margin bottomu--ml++: add huge negative margin leftu--mh++: add huge negative margins right and leftu--mv++: add huge negative margins top and bottom
$inuit-enable-margins--none:
u-m0: remove marginsu-mt0: remove margin topu-mr0: remove margin rightu-mb0: remove margin bottomu-ml0: remove margin leftu-mh0: remove margins right and leftu-mv0: remove margins top and bottom
$inuit-enable-paddings:
u-p: add default padding to all sidesu-pt: add default padding topu-pr: add default padding rightu-pb: add default padding bottomu-pl: add default padding leftu-ph: add default padding right and leftu-pv: add default padding top and bottom
$inuit-enable-paddings--tiny:
u-p--: add tiny padding to all sidesu-pt--: add tiny padding topu-pr--: add tiny padding rightu-pb--: add tiny padding bottomu-pl--: add tiny padding leftu-ph--: add tiny padding right and leftu-pv--: add tiny padding top and bottom
$inuit-enable-paddings--small:
u-p-: add small padding to all sidesu-pt-: add small padding topu-pr-: add small padding rightu-pb-: add small padding bottomu-pl-: add small padding leftu-ph-: add small padding right and leftu-pv-: add small padding top and bottom
$inuit-enable-paddings--large:
u-p+: add large padding to all sidesu-pt+: add large padding topu-pr+: add large padding rightu-pb+: add large padding bottomu-pl+: add large padding leftu-ph+: add large padding right and leftu-pv+: add large padding top and bottom
$inuit-enable-paddings--huge:
u-p++: add huge padding to all sidesu-pt++: add huge padding topu-pr++: add huge padding rightu-pb++: add huge padding bottomu-pl++: add huge padding leftu-ph++: add huge padding right and leftu-pv++: add huge padding top and bottom
$inuit-enable-paddings--none:
u-p0: remove paddingu-pt0: remove padding topu-pr0: remove padding rightu-pb0: remove padding bottomu-pl0: remove padding leftu-ph0: remove padding right and leftu-pv0: remove padding top and bottom
View the full API here.