Resources

Space

Add a little space to your interface. (Or a lot, we’re not here to judge.)

Web
React Native
Android
Apple
Other

Mixin

Used to create standard buttons.

@include space(margin, vert, $space-two);

Parameters

$property

string

Default value: margin

Pass one of the following values

  • margin
  • padding

$direction

string

Default value: all

Pass one of the following values

  • all
  • vertical
  • horizontal
  • top
  • right
  • bottom
  • left

$size

number

Default value: $space-one

Pass one of the space variables.

Margin Classes

Add these margin classes to your markup to add space to the outside or between items.

All

Class NameValueAssociated Variable
uni-margin--eighth0.125rem$space-eighth
uni-margin--quarter0.25rem$space-quarter
uni-margin--half0.5rem$space-half
uni-margin--one1rem$space-one
uni-margin--one-and-half1.5rem$space-one-and-half
uni-margin--two2rem$space-two
uni-margin--three3rem$space-three
uni-margin--four4rem$space-four

Vertical

Class NameValueAssociated Variable
uni-margin--eighth--vert0.125rem$space-eighth
uni-margin--quarter--vert0.25rem$space-quarter
uni-margin--half--vert0.5rem$space-half
uni-margin--one--vert1rem$space-one
uni-margin--one-and-half--vert1.5rem$space-one-and-half
uni-margin--two--vert2rem$space-two
uni-margin--three--vert3rem$space-three
uni-margin--four--vert4rem$space-four

Top

Class NameValueAssociated Variable
uni-margin--eighth--top0.125rem$space-eighth
uni-margin--quarter--top0.25rem$space-quarter
uni-margin--half--top0.5rem$space-half
uni-margin--one--top1rem$space-one
uni-margin--one-and-half--top1.5rem$space-one-and-half
uni-margin--two--top2rem$space-two
uni-margin--three--top3rem$space-three
uni-margin--four--top4rem$space-four

Bottom

Class NameValueAssociated Variable
uni-margin--eighth--btm0.125rem$space-eighth
uni-margin--quarter--btm0.25rem$space-quarter
uni-margin--half--btm0.5rem$space-half
uni-margin--one--btm1rem$space-one
uni-margin--one-and-half--btm1.5rem$space-one-and-half
uni-margin--two--btm2rem$space-two
uni-margin--three--btm3rem$space-three
uni-margin--four--btm4rem$space-four

Horizontal

Class NameValueAssociated Variable
uni-margin--eighth--horiz0.125rem$space-eighth
uni-margin--quarter--horiz0.25rem$space-quarter
uni-margin--half--horiz0.5rem$space-half
uni-margin--one--horiz1rem$space-one
uni-margin--one-and-half--horiz1.5rem$space-one-and-half
uni-margin--two--horiz2rem$space-two
uni-margin--three--horiz3rem$space-three
uni-margin--four--horiz4rem$space-four

Right

Class NameValueAssociated Variable
uni-margin--eighth--right0.125rem$space-eighth
uni-margin--quarter--right0.25rem$space-quarter
uni-margin--half--right0.5rem$space-half
uni-margin--one--right1rem$space-one
uni-margin--one-and-half--right1.5rem$space-one-and-half
uni-margin--two--right2rem$space-two
uni-margin--three--right3rem$space-three
uni-margin--four--right4rem$space-four

Left

Class NameValueAssociated Variable
uni-margin--eighth--left0.125rem$space-eighth
uni-margin--quarter--left0.25rem$space-quarter
uni-margin--half--left0.5rem$space-half
uni-margin--one--left1rem$space-one
uni-margin--one-and-half--left1.5rem$space-one-and-half
uni-margin--two--left2rem$space-two
uni-margin--three--left3rem$space-three
uni-margin--four--left4rem$space-four

Padding Classes

Add these padding classes to your markup to add space to the inside of items.

All

Class NameValueAssociated Variable
uni-pad--eighth0.125rem$space-eighth
uni-pad--quarter0.25rem$space-quarter
uni-pad--half0.5rem$space-half
uni-pad--one1rem$space-one
uni-pad--one-and-half1.5rem$space-one-and-half
uni-pad--two2rem$space-two
uni-pad--three3rem$space-three
uni-pad--four4rem$space-four

Vertical

Class NameValueAssociated Variable
uni-pad--eighth--vert0.125rem$space-eighth
uni-pad--quarter--vert0.25rem$space-quarter
uni-pad--half--vert0.5rem$space-half
uni-pad--one--vert1rem$space-one
uni-pad--one-and-half--vert1.5rem$space-one-and-half
uni-pad--two--vert2rem$space-two
uni-pad--three--vert3rem$space-three
uni-pad--four--vert4rem$space-four

Top

Class NameValueAssociated Variable
uni-pad--eighth--top0.125rem$space-eighth
uni-pad--quarter--top0.25rem$space-quarter
uni-pad--half--top0.5rem$space-half
uni-pad--one--top1rem$space-one
uni-pad--one-and-half--top1.5rem$space-one-and-half
uni-pad--two--top2rem$space-two
uni-pad--three--top3rem$space-three
uni-pad--four--top4rem$space-four

Bottom

Class NameValueAssociated Variable
uni-pad--eighth--btm0.125rem$space-eighth
uni-pad--quarter--btm0.25rem$space-quarter
uni-pad--half--btm0.5rem$space-half
uni-pad--one--btm1rem$space-one
uni-pad--one-and-half--btm1.5rem$space-one-and-half
uni-pad--two--btm2rem$space-two
uni-pad--three--btm3rem$space-three
uni-pad--four--btm4rem$space-four

Horizontal

Class NameValueAssociated Variable
uni-pad--eighth--horiz0.125rem$space-eighth
uni-pad--quarter--horiz0.25rem$space-quarter
uni-pad--half--horiz0.5rem$space-half
uni-pad--one--horiz1rem$space-one
uni-pad--one-and-half--horiz1.5rem$space-one-and-half
uni-pad--two--horiz2rem$space-two
uni-pad--three--horiz3rem$space-three
uni-pad--four--horiz4rem$space-four

Right

Class NameValueAssociated Variable
uni-pad--eighth--right0.125rem$space-eighth
uni-pad--quarter--right0.25rem$space-quarter
uni-pad--half--right0.5rem$space-half
uni-pad--one--right1rem$space-one
uni-pad--one-and-half--right1.5rem$space-one-and-half
uni-pad--two--right2rem$space-two
uni-pad--three--right3rem$space-three
uni-pad--four--right4rem$space-four

Left

Class NameValueAssociated Variable
uni-pad--eighth--left0.125rem$space-eighth
uni-pad--quarter--left0.25rem$space-quarter
uni-pad--half--left0.5rem$space-half
uni-pad--one--left1rem$space-one
uni-pad--one-and-half--left1.5rem$space-one-and-half
uni-pad--two--left2rem$space-two
uni-pad--three--left3rem$space-three
uni-pad--four--left4rem$space-four