General

variables

gutter

$gutter: 2rem !default;

Description

Sets the relative width of a single grid gutter to wrap all yoga-column imports. Set with the !global flag.

Type

Number (unit)

grid-columns

$grid-columns: 12 !default;

Description

Sets the total number of columns in the grid. Its value can be overridden inside a media query using the media() mixin. Set with the !global flag.

Type

Number (unitless)

max-width

$max-width: 1040px !default;

Description

Sets the max-width property of the element that includes outer-container(). Set with the !global flag.

Type

Number (unit)

mixins

yoga-column

@mixin yoga-column($num_col: 1, $grid_width: $grid-columns, $gutter_size: $gutter) { ... }

Description

Makes a flex item for evenly spaced grid items. Must be direct child of a Flex Container (recommened to use yoga-container or yoga-outer-container)

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$num_col`	Number of columns wide to span.	`Number [unitless]`	`1`
`$grid_width`	Number of columns per row.	`Number [unitless]`	`$grid-columns`
`$gutter_size`	Gutter for margin left and right around item.	`Number [unit]`	`$gutter`

Example

Usage

.element {
  @include yoga-column(6, 12, 10px);
}

CSS Output

.element {
  flex: 0;
  margin-left: 10px;
  margin-right: 10px;

  flex-basis: calc(50% - 20px);
}

Used by

[mixin] yoga-prototype

yoga-container

@mixin yoga-container($align_vert: stretch) { ... }

Description

Makes a flex container element setting display:flex, setting up flex-wrap: wrap, and clears floats.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$align_vert`	How to align child elements across main axis	`String`	`stretch`

Example

Usage

.element {
  @include yoga-container(1040px);
}

CSS Output

.element {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  *zoom: 1;
}

.element:before, .element:after {
  content: " ";
  display: table;
}

.element:after {
  clear: both;
}

Used by

[mixin] yoga-outer-container
[mixin] yoga-prototype

yoga-even-column

@mixin yoga-even-column() { ... }

Description

Makes a flex item for evenly spaced grid items. Must be direct child of a Flex Container (recommened to use yoga-container or yoga-outer-container)

Parameters

None.

Example

Usage

.element {
  @include yoga-even-column;
}

CSS Output

.element {
  flex: 1;
}

Used by

[mixin] yoga-prototype

yoga-outer-container

@mixin yoga-outer-container($local-max-width: $max-width, $align_vert: stretch) { ... }

Description

Makes a flex container element setting display:flex, setting up flex-wrap: wrap, clearing floats, setting its max-width, and uses margin: auto to center.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$local-max-width`	Max width to be applied to the element. Can be a percentage or a measure.	`Number [unit]`	`$max-width`
`$align_vert`	How to align child elements across main axis	`String`	`stretch`

Example

Usage

.element {
  @include yoga-outer-container(1040px);
}

CSS Output

.element {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
  *zoom: 1;
}

.element:before, .element:after {
  content: " ";
  display: table;
}

.element:after {
  clear: both;
}

Requires

[mixin] yoga-container

Used by

[mixin] yoga-prototype

yoga-prototype

@mixin yoga-prototype() { ... }

Description

.yg-col-6 { flex: 0; margin-left: 10px; margin-right: 10px; flex-basis: calc(100% - 20px); }

Parameters

None.

Requires

[mixin] yoga-outer-container
[mixin] yoga-container
[mixin] yoga-even-column
[mixin] yoga-column