helpers

functions

[private] _spsuit-convert-to-rems

@function _spsuit-convert-to-rems($length) { ... }

Description

Converts any number (with unit) to the equivalent length in rems. Spacesuit assumes 1rem == 1em == 16px for the purpose of this conversion.

If the global variable $spsuit-force-rems is false, this function will simply return $length with its original unit.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$length`	The length to be converted to rems	`Number (with unit)`	— none

Returns

Number (with unit) —

The rem equivalent of the parameter $length

Example

$my-length: _spsuit-convert-to-rems(20px); // 1.25rem
$my-other-length: _spsuit-convert-to-rems(3em); // 3rem

Throws

ERROR: Spacesuit tried to convert a unitless number or a non-number into rems - make sure all values in $spsuit-scale and other scales are numbers with units

Author

Cameron Messinides

[private] _spsuit-validate-parameter

@function _spsuit-validate-parameter($given, $valid, $default) { ... }

Description

Checks to see if a given value for a parameter falls within a set of valid values.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$given`	The given value	`Any`	— none
`$valid`	A set of values that you will accept	`List`	— none
`$default`	The value you want to use if the given value is not one of the valid values	`Any`	— none

Returns

Any type —

The given value, if it was one of the valid values, or the default value, if the given was invalid.

Example

$valid: _spsuit-validate-parameter(foo, (foo,bar), bar); // returns foo
$invalid: _spsuit-validate-parameter(0, (1,2,3), 1) // returns 1

Used by

[mixin] space-inline
[mixin] space-stack

Author

Cameron Messinides

mixins

spsuit-media

@mixin spsuit-media($breakpoint, $media: screen) { ... }

Description

Creates a media query, allowing you to change an element's spacing at certain breakpoints.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$breakpoint`	This can be a key in `$spsuit-breakpoints` or, if it is a number with a unit, the minimum screen width you want to set for this query.	`String` or `Number (with unit)`	— none
`$media`	Can be either `screen` or `print`.	`String`	`screen`

Content

This mixin allows extra content to be passed (through the @content directive). Role: The content of this mixin can be any of Spacesuit's spacing mixins, but `spsuit-media` can also contain any style properties you would like - it works as a general-purpose media query mixin.

Requires

[variable] spsuit-breakpoints
[variable] spsuit-breakpoints

Author

Cameron Messinides

space-cushion-horizontal

@mixin space-cushion-horizontal($property: padding) { ... }

Description

Sets equal amounts of space to the left and right of an element

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$property`	Can be either `padding` or `margin`.	`String`	`padding`

Requires

[function] _spsuit-convert-to-rems

space-cushion-vertical

@mixin space-cushion-vertical($property: padding) { ... }

Description

Sets equal amounts of space on the top and bottom of an element

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$property`	Can be either `padding` or `margin`.	`String`	`padding`

Requires

[function] _spsuit-convert-to-rems

space-inline

@mixin space-inline($property: margin, $direction: right) { ... }

Description

Sets space to the right or left of an element, allowing it to be placed in a horizontal row of elements.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$property`	Can be either `padding` or `margin`.	`String`	`margin`
`$direction`	Can be either 'right' or `left`.	`String`	`right`

Requires

[function] _spsuit-convert-to-rems
[function] _spsuit-validate-parameter

space-inset

@mixin space-inset($property: padding) { ... }

Description

Sets equal amounts of space on all four sides of an element

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$property`	Can be either `padding` or `margin`.	`String`	`padding`

Requires

[function] _spsuit-convert-to-rems

space-stack

@mixin space-stack($property: margin, $direction: bottom) { ... }

Description

Sets space to the top or bottom of an element, allowing it to be placed in a vertical column of elements.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$property`	Can be either `padding` or `margin`.	`String`	`margin`
`$direction`	Can be either 'top' or `bottom`.	`String`	`bottom`

Requires

[function] _spsuit-convert-to-rems
[function] _spsuit-validate-parameter

settings

variables

spsuit-scale

$spsuit-scale: (
  xxs: 0.125rem, // 2px
  xs:  0.25rem, // 4px
  sm:  0.5rem, // 8px
  md:  1rem, // 16px
  lg:  2rem, // 32px
  xl:  4rem, // 64px
  xxl: 6rem // 96px
) !default;

Description

The scale of sizes that Spacesuit will use to generate padding and margins. The default properties may be discarded in favor of your own naming system (ex. $spsuit-scale: (micro: 2rem, base: 4rem);).

Type

Map

Map structure

map key Name	map key Description	map key Type	map key Value
`xxs`	— none	`Number (with unit)`	`0.125rem`
`xs`	— none	`Number (with unit)`	`0.25rem`
`sm`	— none	`Number (with unit)`	`0.5rem`
`md`	— none	`Number (with unit)`	`1rem`
`lg`	— none	`Number (with unit)`	`2rem`
`xl`	— none	`Number (with unit)`	`4rem`
`xxl`	— none	`Number (with unit)`	`6rem`

Example

$spsuit-scale: (
  xxs: 2px,
  md: 16px,
  lg: 24px,
  xl: 48px
);

Used by

[function] _spsuit-convert-to-rems

Author

Cameron Messinides

spsuit-custom-scale

$spsuit-custom-scale: () !default;

Description

To use more than one spacing scale in a project, you can define a new map as a variable. You can name this variable whatever you'd like: $spsuit-custom-scale is just an example. You can also name the keys whatever you'd like as long as the values are all numbers with units.

Custom scales come in handy for changing an element's spacing through media queries. Spacesuit's built-in spsuit-media mixin takes an optional scale parameter, which allows you to pass in the variable name of a custom scale to use at a certain breakpoint.

Type

Map

Map structure

map key Name	map key Description	map key Type	map key Value
`*`	A step in the scale; the key can be any string, number, or boolean	`Number (with unit)`	— none

Example

$spsuit-custom-scale: (
  0: 2px,
  1: 8px,
  2: 24px
);

$spsuit-custom-scale-desktop: (
  0: 8px,
  1: 16px,
  2: 48px
);

See

[mixin] spsuit-media

Author

Cameron Messinides

spsuit-breakpoints

$spsuit-breakpoints: (
  sm: screen and (min-width: 28em),
  md: screen and (min-width: 48em),
  lg: screen and (min-width: 64em),
  xl: screen and (min-width: 80em)
) !default;

Description

With the spsuit-media mixin, you can pass in a key from $spsuit-breakpoints to easily reference and reuse a breakpoint. The keys can be anything you like, so long as you can reference them as a parameter in spsuit-media.

Type

Map

Map structure

map key Name	map key Description	map key Type	map key Value
`*`	A valid media query (without @media)	`String`	— none

Example

$spsuit-breakpoints: (
  phone: screen and (min-width: 24em),
  tablet: screen and (min-width: 48em),
  laptop: screen and (min-width: 64em),
  print: print only
)

Used by

[mixin] spsuit-media
[mixin] spsuit-media

See

[mixin] spsuit-media

Author

Cameron Messinides

spsuit-force-rems

$spsuit-force-rems: true !default;

Description

When $spsuit-force-rems is true, Spacesuit's mixins default to rem units. If values in $spsuit-scale (or other custom scales) contain units other than rem, Spacesuit will convert those units to rems using _spsuit-convert-to-rems.

To disable this behavior, set $spsuit-force-rems to false.

Type

Bool

Used by

[function] _spsuit-convert-to-rems

See

[function] _spsuit-convert-to-rems

Author

Cameron Messinides