core

variables

type-scale

$type-scale: (
  12: 12px,
  14: 14px,
  16: 16px,
  18: 18px,
  20: 20px,
  22: 22px,
  24: 24px,
  28: 28px,
  32: 32px,
  44: 44px,
  48: 48px,
  56: 56px,
  64: 64px,
  72: 72px,
  88: 88px,
  96: 96px
);

Description

$type-scale

Used by

[function] font-size
[mixin] font-size

line-height-scale

$line-height-scale: (
  none: 1,
  tight: 1.25,
  snug: 1.375,
  normal: 1.5,
  relaxed: 1.625,
  loose: 2
);

Description

$line-height-scale

Used by

[function] line-height

space-scale

$space-scale: (
  0: 0,
  0-5N: 4px,
  1N: 8px,
  1-5N: 12px,
  2N: 16px,
  3N: 24px,
  4N: 32px,
  5N: 40px,
  6N: 48px,
  7N: 56px,
  8N: 64px,
  9N: 72px,
  13N: 96px,
  15N: 120px
);

Description

$space-scale

Used by

[function] space
[mixin] space

functions

clean-unit

@function clean-unit($value) { ... }

Description

Return numeric value that doesn't have the unit.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	Sized unit to be cleaned	`String`	— none

Example

clean-unit(12px);

Used by

[function] px-rem

map-deep-get

@function map-deep-get($map, $keys...) { ... }

Description

Map deep get

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$map`	Map	`Map`	— none
`$keys`	Key chain	`Arglist`	— none

Returns

Any type —

Desired value

Author

Hugo Giraudel

px-rem

@function px-rem($px, $root-font-size: $base-font-size-px) { ... }

Description

Return rem from px

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$px`	Font size in pixels	`String`	— none
`$root-font-size`	Pixel font size for conversion	`String`	`$base-font-size-px`

Example

Get 1rem conversion from 16px, using $base-font-size-px

.foo {
  font-size: px-rem(12px);
}

Requires

[function] clean-unit

Used by

[function] font-size
[function] space
[mixin] space
[function] icon-size
[mixin] icons-size
[mixin] icons-size
[mixin] icons-size
[mixin] icons-size

font-size

@function font-size($size: 16) { ... }

Description

Return font-size value from type map and convert to rem.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	Type scale value from `$type-scale` (Default to 16 = 16px)	`Number`	`16`

Example

Set font-size to 1.5rem (24px)

.foo {
  font-size: font-size(24);
}

Requires

[function] px-rem
[variable] type-scale

Used by

[mixin] font-size
[mixin] text-styles
[mixin] text-styles
[mixin] text-styles
[mixin] text-styles
[mixin] text-styles
[mixin] text-styles
[mixin] text-styles
[mixin] text-styles
[mixin] text-styles
[mixin] text-styles
[mixin] text-styles
[mixin] text-styles
[mixin] text-styles

line-height

@function line-height($scale: "normal") { ... }

Description

Return line-height value from line-height map.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$scale`	Type scale value from `$line-height-scale` (Default to "normal" = 1.5)	`String`	`"normal"`

Example

Set line-height to loose (2)

.foo {
  line-height: line-height("loose");
}

Requires

[variable] line-height-scale

Used by

[mixin] line-height
[mixin] text-styles
[mixin] text-styles
[mixin] text-styles
[mixin] text-styles
[mixin] text-styles
[mixin] text-styles

font-weight

@function font-weight($scale: "regular") { ... }

Description

Return font-weight value from font-weight map.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$scale`	Type scale value from `$weight-scale` (Default to "regular" = 400)	`String`	`"regular"`

Example

Set font-weight to bold (700)

.foo {
  font-weight: font-weight("bold");
}

space

@function space($scale: 2) { ... }

Description

Return space value from type map and convert to rem.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$scale`	Space scale value from `$space-scale` (Default to 1N = 8px)	`Number`	`2`

Example

Set margin-bottom to 24px

.foo {
  margin-bottom: space(3N);
}

Requires

[function] px-rem
[variable] space-scale

mixins

font-size

@mixin font-size($size: 16) { ... }

Description

Set font size

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	Type scale value from `$type-scale` (Default to 16 = 16px)	`Number`	`16`

Example

Set font-size to 1.5rem (24px)

.foo {
  @include font-size(24);
}

Requires

[function] font-size
[variable] type-scale

line-height

@mixin line-height($scale: "normal") { ... }

Description

Set line-height

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$scale`	Type scale value from `$line-height-scale` (Default to "normal" = 1.5)	`String`	`"normal"`

Example

Set line-height to loose (2)

.foo {
  @include line-height(2);
}

Requires

[function] line-height

space

@mixin space($property: "margin", $scale: 2, $direction) { ... }

Description

Set space property

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$property`	Property to apply spacing `["margin", "padding"]`	`String`	`"margin"`
`$scale`	Space scale value from `$space-scale` (Default to 2 = 8px)	`Number`	`2`
`$direction`	Direction of the spacing `["top", "right", "bottom", "left"]`	`String`	— none

Example

Set margin-bottom to 24px

.foo {
  @include space("margin", 3N, "bottom");
}

Requires

[function] px-rem
[variable] space-scale

respond-from

@mixin respond-from($media: md) { ... }

Description

Set media query styles

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$media`	Layout size `["xs", "sm", "md", "lg", "xl"]`	`String`	`md`

Example

.foo {
  @include respond-from(md) {
  }
}

Used by

[mixin] text-styles
[mixin] text-styles

text-styles

@mixin text-styles($type: md) { ... }

Description

Set text style

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$type`	text types `["xs, "sm", "md", "lg", "chapo"]` - (Default to "md")	`String`	`md`

Example

.foo {
  @include text-styles(lg);
}

Requires

[mixin] respond-from
[mixin] respond-from
[function] font-size
[function] line-height
[function] font-size
[function] line-height
[function] font-size
[function] font-size
[function] font-size
[function] font-size
[function] line-height
[function] font-size
[function] font-size
[function] line-height
[function] font-size
[function] font-size
[function] line-height
[function] font-size
[function] line-height
[function] font-size
[function] font-size

ie-hack

@mixin ie-hack() { ... }

Description

Set special styles for IE10 and above

Parameters

None.

Example

.foo {
  @include ie-hack() {
  }
}

grid

variables

grid-columns

$grid-columns: 12 !default;

Description

$grid-columns

Used by

[mixin] rf-col
[mixin] rf-col-offset
[mixin] grid-generator
[mixin] grid-offset-generator

grid-gutter-width

$grid-gutter-width: (
  xs: space(2N),
  md: space(3N),
  lg: space(4N)
) !default;

Description

$grid-gutter-width

Used by

[mixin] grid-generator
[mixin] grid-offset-generator

container-max-width

$container-max-width: 1136px !default;

Description

$container-max-width

mixins

rf-col

@mixin rf-col($size, $columns: $grid-columns) { ... }

Description

Set grid column width

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	Column size between 0 and `$grid-columns`	`Number`	— none
`$columns`	Number of columns in the grid (Default to `$grid-columns` = 12)	`Number`	`$grid-columns`

Example

Set column width to 50%

.foo {
  @include rf-col(6);
}

Requires

[variable] grid-columns

Used by

[mixin] grid-generator
[mixin] grid-generator

rf-col-offset

@mixin rf-col-offset($size, $columns: $grid-columns) { ... }

Description

Set grid offset

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	Column size between 0 and `$grid-columns`	`Number`	— none
`$columns`	Number of columns in the grid (Default to `$grid-columns` = 12)	`Number`	`$grid-columns`

Example

Set column offset to 2 columns

.foo {
  @include rf-col-offset(2);
}

Requires

[variable] grid-columns

grid-generator

@mixin grid-generator($size: null, $columns: $grid-columns) { ... }

Description

Generate grid sized columns classes for specific media query

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	Media query size from `$grid-gutter-width`	`String` or `Null`	`null`
`$columns`	Number of columns in the grid (Default to `$grid-columns` = 12)	`Number`	`$grid-columns`

Example

Generate xs columns

@include grid-generator(xs);

Requires

[mixin] rf-col
[mixin] rf-col
[variable] grid-gutter-width
[variable] grid-columns

grid-offset-generator

@mixin grid-offset-generator($size: null, $columns: $grid-columns) { ... }

Description

Generate grid offset for specific media query

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	Media query size from `$grid-gutter-width`	`String` or `Null`	`null`
`$columns`	Number of columns in the grid (Default to `$grid-columns` = 12)	`Number`	`$grid-columns`

Example

Generate xs offsets

@include grid-offset-generator(xs);

Requires

[mixin] rf-col-offset
[mixin] rf-col-offset
[variable] grid-gutter-width
[variable] grid-columns

icons

variables

icon-size-map

$icon-size-map: (
  xs: 12px,
  sm: 16px,
  md: 24px,
  lg: 32px,
  xl: 48px
);

Description

$icon-size-map

Used by

[function] icon-size
[mixin] icons-size

sprite-path

$sprite-path: 'assets/sprite/' !default;

Description

$sprite-path

functions

icon-size

@function icon-size($size: "md") { ... }

Description

Return icon size from map

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	Icon size from `$icon-size-map` (Default to "md" = 24px)	`String`	`"md"`

Example

Set icon size to SM (16px)

.foo {
  width: icons-size(sm);
  height: icons-size(sm);
}

Requires

[function] px-rem
[variable] icon-size-map

mixins

icons-size

@mixin icons-size() { ... }

Description

Set icon dimensions for each size

Parameters

None.

Example

.foo {
  @include icons-size();
}

Requires

[function] px-rem
[function] px-rem
[function] px-rem
[function] px-rem
[variable] icon-size-map