Spejson
Responsive spacing mixins and utility classes written in Sass.
Hello world!
; .component
Will generate
{} {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}
Don't worry about number of generated @media
. You can easily optimize code by
by merging @media
with clean-css (look at mediaMerging
) or a postcss plugin.
API
Variables
You can easily customise spejson
by overriding variables. You can change almost
everything. Look at default configration with explanation.
// Prefix is used for generate-spacing-* mixins ; // Adjust sizes to your project. If you need only 2 sizes, e.g. // [small, big] - you can set them below ; // Names for breakpoints corresponds to names in $spacing-scales // Names can be changed ; ;
Integration mixins
Variable
$size-name
{string} - one of xs
, sm
, md
, lg
, xl
.
Margin
@include spacing-margin-top($size-name);
@include spacing-margin-right($size-name);
@include spacing-margin-bottom($size-name);
@include spacing-margin-left($size-name);
Padding
@include spacing-padding-top($size-name);
@include spacing-padding-right($size-name);
@include spacing-padding-bottom($size-name);
@include spacing-padding-left($size-name);
All
@include spacing-margin($size-name);
@include spacing-padding($size-name);
Generation mixins
@include generate-spacing-center;
Generates utility .u-mc
class for easy horizontal centering.
@include generate-spacing-reset;
Generates utility classes that reset margins and paddings.
// Margins .u-mt-0.u-mr-0.u-mb-0.u-ml-0 // Paddings .u-pt-0.u-pr-0.u-pb-0.u-pl-0
@include generate-spacing-margin;
Generates responsive utility classes that set margins.
// xs .u-mt-xs.u-mr-xs.u-mb-xs.u-ml-xs // sm .u-mt-sm.u-mr-sm.u-mb-sm.u-ml-sm // md .u-mt-md.u-mr-md.u-mb-md.u-ml-md // lg .u-mt-lg.u-mr-lg.u-mb-lg.u-ml-lg // xl .u-mt-xl.u-mr-xl.u-mb-xl.u-ml-xl
@include generate-spacing-padding;
Generates responsive utility classes that set paddings.
// xs .u-pt-xs.u-pr-xs.u-pb-xs.u-pl-xs // sm .u-pt-sm.u-pr-sm.u-pb-sm.u-pl-sm // md .u-pt-md.u-pr-md.u-pb-md.u-pl-md // lg .u-pt-lg.u-pr-lg.u-pb-lg.u-pl-lg // xl .u-pt-xl.u-pr-xl.u-pb-xl.u-pl-xl
License
MIT