Hudl Uniform

Resources

February 2020 Release

/

Space

d

Design

c

Code

,

Previous Section

.

Next Section

/

Toggle Preview Environment

[

Previous Platform

]

Next Platform

command + ↑

Scroll to Top

command + ↓

Scroll to Bottom

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);
View Source

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 Name	Value	Associated Variable
`uni-margin--eighth`	0.125rem	`$space-eighth`
`uni-margin--quarter`	0.25rem	`$space-quarter`
`uni-margin--half`	0.5rem	`$space-half`
`uni-margin--one`	1rem	`$space-one`
`uni-margin--one-and-half`	1.5rem	`$space-one-and-half`
`uni-margin--two`	2rem	`$space-two`
`uni-margin--three`	3rem	`$space-three`
`uni-margin--four`	4rem	`$space-four`

Vertical

Class Name	Value	Associated Variable
`uni-margin--eighth--vert`	0.125rem	`$space-eighth`
`uni-margin--quarter--vert`	0.25rem	`$space-quarter`
`uni-margin--half--vert`	0.5rem	`$space-half`
`uni-margin--one--vert`	1rem	`$space-one`
`uni-margin--one-and-half--vert`	1.5rem	`$space-one-and-half`
`uni-margin--two--vert`	2rem	`$space-two`
`uni-margin--three--vert`	3rem	`$space-three`
`uni-margin--four--vert`	4rem	`$space-four`

Top

Class Name	Value	Associated Variable
`uni-margin--eighth--top`	0.125rem	`$space-eighth`
`uni-margin--quarter--top`	0.25rem	`$space-quarter`
`uni-margin--half--top`	0.5rem	`$space-half`
`uni-margin--one--top`	1rem	`$space-one`
`uni-margin--one-and-half--top`	1.5rem	`$space-one-and-half`
`uni-margin--two--top`	2rem	`$space-two`
`uni-margin--three--top`	3rem	`$space-three`
`uni-margin--four--top`	4rem	`$space-four`

Bottom

Class Name	Value	Associated Variable
`uni-margin--eighth--btm`	0.125rem	`$space-eighth`
`uni-margin--quarter--btm`	0.25rem	`$space-quarter`
`uni-margin--half--btm`	0.5rem	`$space-half`
`uni-margin--one--btm`	1rem	`$space-one`
`uni-margin--one-and-half--btm`	1.5rem	`$space-one-and-half`
`uni-margin--two--btm`	2rem	`$space-two`
`uni-margin--three--btm`	3rem	`$space-three`
`uni-margin--four--btm`	4rem	`$space-four`

Horizontal

Class Name	Value	Associated Variable
`uni-margin--eighth--horiz`	0.125rem	`$space-eighth`
`uni-margin--quarter--horiz`	0.25rem	`$space-quarter`
`uni-margin--half--horiz`	0.5rem	`$space-half`
`uni-margin--one--horiz`	1rem	`$space-one`
`uni-margin--one-and-half--horiz`	1.5rem	`$space-one-and-half`
`uni-margin--two--horiz`	2rem	`$space-two`
`uni-margin--three--horiz`	3rem	`$space-three`
`uni-margin--four--horiz`	4rem	`$space-four`

Right

Class Name	Value	Associated Variable
`uni-margin--eighth--right`	0.125rem	`$space-eighth`
`uni-margin--quarter--right`	0.25rem	`$space-quarter`
`uni-margin--half--right`	0.5rem	`$space-half`
`uni-margin--one--right`	1rem	`$space-one`
`uni-margin--one-and-half--right`	1.5rem	`$space-one-and-half`
`uni-margin--two--right`	2rem	`$space-two`
`uni-margin--three--right`	3rem	`$space-three`
`uni-margin--four--right`	4rem	`$space-four`

Left

Class Name	Value	Associated Variable
`uni-margin--eighth--left`	0.125rem	`$space-eighth`
`uni-margin--quarter--left`	0.25rem	`$space-quarter`
`uni-margin--half--left`	0.5rem	`$space-half`
`uni-margin--one--left`	1rem	`$space-one`
`uni-margin--one-and-half--left`	1.5rem	`$space-one-and-half`
`uni-margin--two--left`	2rem	`$space-two`
`uni-margin--three--left`	3rem	`$space-three`
`uni-margin--four--left`	4rem	`$space-four`

Padding Classes

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

All

Class Name	Value	Associated Variable
`uni-pad--eighth`	0.125rem	`$space-eighth`
`uni-pad--quarter`	0.25rem	`$space-quarter`
`uni-pad--half`	0.5rem	`$space-half`
`uni-pad--one`	1rem	`$space-one`
`uni-pad--one-and-half`	1.5rem	`$space-one-and-half`
`uni-pad--two`	2rem	`$space-two`
`uni-pad--three`	3rem	`$space-three`
`uni-pad--four`	4rem	`$space-four`

Vertical

Class Name	Value	Associated Variable
`uni-pad--eighth--vert`	0.125rem	`$space-eighth`
`uni-pad--quarter--vert`	0.25rem	`$space-quarter`
`uni-pad--half--vert`	0.5rem	`$space-half`
`uni-pad--one--vert`	1rem	`$space-one`
`uni-pad--one-and-half--vert`	1.5rem	`$space-one-and-half`
`uni-pad--two--vert`	2rem	`$space-two`
`uni-pad--three--vert`	3rem	`$space-three`
`uni-pad--four--vert`	4rem	`$space-four`

Top

Class Name	Value	Associated Variable
`uni-pad--eighth--top`	0.125rem	`$space-eighth`
`uni-pad--quarter--top`	0.25rem	`$space-quarter`
`uni-pad--half--top`	0.5rem	`$space-half`
`uni-pad--one--top`	1rem	`$space-one`
`uni-pad--one-and-half--top`	1.5rem	`$space-one-and-half`
`uni-pad--two--top`	2rem	`$space-two`
`uni-pad--three--top`	3rem	`$space-three`
`uni-pad--four--top`	4rem	`$space-four`

Bottom

Class Name	Value	Associated Variable
`uni-pad--eighth--btm`	0.125rem	`$space-eighth`
`uni-pad--quarter--btm`	0.25rem	`$space-quarter`
`uni-pad--half--btm`	0.5rem	`$space-half`
`uni-pad--one--btm`	1rem	`$space-one`
`uni-pad--one-and-half--btm`	1.5rem	`$space-one-and-half`
`uni-pad--two--btm`	2rem	`$space-two`
`uni-pad--three--btm`	3rem	`$space-three`
`uni-pad--four--btm`	4rem	`$space-four`

Horizontal

Class Name	Value	Associated Variable
`uni-pad--eighth--horiz`	0.125rem	`$space-eighth`
`uni-pad--quarter--horiz`	0.25rem	`$space-quarter`
`uni-pad--half--horiz`	0.5rem	`$space-half`
`uni-pad--one--horiz`	1rem	`$space-one`
`uni-pad--one-and-half--horiz`	1.5rem	`$space-one-and-half`
`uni-pad--two--horiz`	2rem	`$space-two`
`uni-pad--three--horiz`	3rem	`$space-three`
`uni-pad--four--horiz`	4rem	`$space-four`

Right

Class Name	Value	Associated Variable
`uni-pad--eighth--right`	0.125rem	`$space-eighth`
`uni-pad--quarter--right`	0.25rem	`$space-quarter`
`uni-pad--half--right`	0.5rem	`$space-half`
`uni-pad--one--right`	1rem	`$space-one`
`uni-pad--one-and-half--right`	1.5rem	`$space-one-and-half`
`uni-pad--two--right`	2rem	`$space-two`
`uni-pad--three--right`	3rem	`$space-three`
`uni-pad--four--right`	4rem	`$space-four`

Left

Class Name	Value	Associated Variable
`uni-pad--eighth--left`	0.125rem	`$space-eighth`
`uni-pad--quarter--left`	0.25rem	`$space-quarter`
`uni-pad--half--left`	0.5rem	`$space-half`
`uni-pad--one--left`	1rem	`$space-one`
`uni-pad--one-and-half--left`	1.5rem	`$space-one-and-half`
`uni-pad--two--left`	2rem	`$space-two`
`uni-pad--three--left`	3rem	`$space-three`
`uni-pad--four--left`	4rem	`$space-four`