MM UI Kit

Usage

Please refer to Boostrap / Spacing for detailed explanation.

Increment by 2

For fine spacing within elements or modules, please keep in mind that you should always increment by 2. Very rarely would passing of 3px, 7px or any uneven number make sense.

Name	Pixel	Rem
0.125	2px	0.125rem
0.25	4px	0.25rem
0.375	6px	0.375rem
0.5	8px	0.5rem
0.75	12px	0.75rem
0.875	14px	0.875rem
1	16px	1rem

Increment by 4

For medium spacing (padding, margin ...) between sections and regions.

Name	Pixel	Rem
1.25	20px	1.25rem
1.5	24px	1.5rem
1.75	28px	1.75rem
2	32px	2rem
2.25	36px	2.25rem
2.5	40px	2.5rem
2.75	44px	2.75rem
3	48px	3rem
3.25	52px	3.25rem
3.5	56px	3.5rem
3.75	60px	3.75rem
4	64px	4rem

Increment by 16

For medium spacing (padding, margin ...) between sections and regions.

Name	Pixel	Rem
6	96px	6rem
8	128px	8rem
10	160px	10rem
12	192px	12rem
14	224px	14rem
16	256px	16rem

Configuration

List of all our available spacers.

variables/_spacing.scss

$spacer: 1rem; // 16px
$spacers: (
  // 0px / 0rem
  0: 0,
  // 2px / 0.125rem
  0\.125: $spacer * 0.125,
  // 4px / 0.25rem
  0\.25: $spacer * 0.25,
  // 6px / 0.375rem
  0\.375: $spacer * 0.375,
  // 8px / 0.5rem
  0\.5: $spacer * 0.5,
  // 12px / 0.75rem
  0\.75: $spacer * 0.75,
  // 14px / 0.875rem
  0\.875: $spacer * 0.875,
  // 16px / 1rem
  1: $spacer,
  // 20px / 1.25rem
  1\.25: $spacer * 1.25,
  // 24px / 1.5rem
  1\.5: $spacer * 1.5,
  // 28px / 1.75rem
  1\.75: $spacer * 1.75,
  // 32px / 2rem
  2: $spacer * 2,
  // 36px / 2.25rem
  2\.25: $spacer * 2.25,
  // 40px / 2.5rem
  2\.5: $spacer * 2.5,
  // 44px / 2.75rem
  2\.75: $spacer * 2.75,
  // 48px / 3rem
  3: $spacer * 3,
  // 52px / 3.25rem
  3\.25: $spacer * 3.25,
  // 56px / 3.5rem
  3\.5: $spacer * 3.5,
  // 60px / 3.75rem
  3\.75: $spacer * 3.75,
  // 64px / 4rem
  4: $spacer * 4,
  // 96px / 6rem
  6: $spacer * 6,
  // 128px / 8rem
  8: $spacer * 8,
  // 160px / 10rem
  10: $spacer * 10,
  // 192px / 12rem
  12: $spacer * 12,
  // 224px / 14rem
  14: $spacer * 14,
  // 256px / 16rem
  16: $spacer * 16
);