container

mixins

breakpoint-up

@mixin breakpoint-up($bp) { ... }

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$bp`	The breakpoint to use the minimal width of.	`String`	— none

Requires

[variable] breakpoint

Used by

[mixin] breakpoint-each

Author

Jasper Berghoef

breakpoint-down

@mixin breakpoint-down($bp) { ... }

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$bp`	The breakpoint to use the maximum width of.	`String`	— none

Requires

[variable] breakpoint

Author

Jasper Berghoef

breakpoint-between

@mixin breakpoint-between($bp-min, $bp-max) { ... }

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$bp-min`	The breakpoint to use the minimum width of.	`String`	— none
`$bp-max`	The breakpoint to use the maximum width of.	`String`	— none

Requires

[variable] breakpoint
[variable] breakpoint

Author

Jasper Berghoef

breakpoint-each

@mixin breakpoint-each() { ... }

Parameters

None.

Requires

[mixin] breakpoint-up
[variable] breakpoint

Author

Jasper Berghoef

variables

breakpoint

$breakpoint: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

Description

Container breakpoints.

Used by

[mixin] breakpoint-up
[mixin] breakpoint-down
[mixin] breakpoint-between
[mixin] breakpoint-between
[mixin] breakpoint-each

Author

Jasper Berghoef

container

$container: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

Description

Container widths.

Author

Jasper Berghoef

css

.container

.container { ... }

Example

<div class="container"></div>

Author

Jasper Berghoef

&.-fluid

&.-fluid { ... }

Example

<div class="container -fluid"></div>

Author

Jasper Berghoef

grid

variables

fraction-range

$fraction-range: 4;

Description

The amount of fractions to create.

Author

Jasper Berghoef

col-range

$col-range: 12 !default;

Description

The amount of columns to create.

Author

Jasper Berghoef

col-definition

$col-definition: [col-start] 1fr [col-end] !default;

Description

The default column definition.

Author

Jasper Berghoef

row-range

$row-range: 3 !default;

Description

The amount of rows to create.

Author

Jasper Berghoef

row-definition

$row-definition: [row-start] auto [row-end] !default;

Description

The default row definition.

Author

Jasper Berghoef

gap-range

$gap-range: 5 !default;

Description

The amount of gap modifiers to create.

Author

Jasper Berghoef

col-gap

$col-gap: $spacer * 2 !default;

Description

The default column gap.

Author

Jasper Berghoef

row-gap

$row-gap: 0 !default;

Description

The default row gap.

Author

Jasper Berghoef

css

.grid__item

.grid__item { ... }

Example

<div class="grid__item"></div>

Author

Jasper Berghoef

&.-col

&.-col { ... }

Example

<div class="grid__item -col-2-3 -col-xl-2-6"></div>
<div class="grid__item -col-start-2 -col-lg-start-3 -col-end-3 -col-lg-end-4"></div>

Author

Jasper Berghoef

&.-row

&.-row { ... }

Example

<div class="grid__item -row-1-2 -row-lg-1-4"></div>
<div class="grid__item -row-start-1 -row-xl-start-2 -row-end-2 -row-xl-end-3"></div>

Author

Jasper Berghoef

.grid

.grid { ... }

Example

<div class="grid"></div>

See

[variable] col-range
[variable] col-definition
[variable] col-gap
[variable] row-range
[variable] row-definition
[variable] row-gap

Author

Jasper Berghoef

&.-inline

&.-inline { ... }

Example

<div class="grid -inline"></div>

Author

Jasper Berghoef

&.-blank

&.-blank { ... }

Example

<div class="grid -blank"></div>

Author

Jasper Berghoef

&.-col-gap

&.-col-gap { ... }

See

[variable] gap-range

Author

Jasper Berghoef

&.-row-gap

&.-row-gap { ... }

See

[variable] gap-range

Author

Jasper Berghoef

&.-cols

&.-cols { ... }

See

[variable] col-range

Author

Jasper Berghoef

&.-rows

&.-rows { ... }

See

[variable] row-range

Author

Jasper Berghoef

&.-flow

&.-flow { ... }

See

[variable] auto-flow

Author

Jasper Berghoef

General

variables

justify-items

$justify-items: (start, end, center, stretch);

Author

Jasper Berghoef

align-items

$align-items: $justify-items;

Author

Jasper Berghoef

justify-content

$justify-content: (
  start,
  end,
  center,
  stretch,
  space-around,
  space-between,
  space-evenly
);

Author

Jasper Berghoef

align-content

$align-content: $justify-content;

Author

Jasper Berghoef

auto-flow

$auto-flow: (
  row: row,
  column: column,
  row-dense: row dense,
  column-dense: column dense
);

Author

Jasper Berghoef

display

$display: (
  none,
  inline,
  inline-block,
  block,
  table,
  table-cell,
  table-row,
  flex,
  inline-flex
);

Author

Jasper Berghoef

side

$side: (
  t: top,
  b: bottom,
  l: left,
  r: right
);

Author

Jasper Berghoef

spacer

$spacer: 1rem !default;

Description

Default spacing value.

Author

Jasper Berghoef

spacing

$spacing: (
  0: $spacer * 0,
  1: $spacer * 0.25,
  2: $spacer * 0.5,
  3: $spacer * 1,
  4: $spacer * 1.5,
  5: $spacer * 3
) !default;

Description

Spacing modifiers.

Author

Jasper Berghoef

utils

css

.d

.d { ... }

See

[variable] display

Author

Jasper Berghoef

.j

.j { ... }

See

[variable] justify-items
[variable] justify-content

Author

Jasper Berghoef

.a

.a { ... }

See

[variable] align-items
[variable] align-content

Author

Jasper Berghoef

.m

.m { ... }

See

[variable] spacing
[variable] side

Author

Jasper Berghoef

.p

.p { ... }

See

[variable] spacing
[variable] side

Author

Jasper Berghoef