kayzen-gs

variables

kayzenGS

$kayzenGS: (
    'options' : (
        'columns'           : 12,
        'gutter'            : 3%,
        'col-break'         : 940px,
        'row-namespace'     : 'row',
        'col-namespace'     : 'span',
    ),
    'settings' : (
        'old-ie'            : false,
        'responsive'        : true,
        'mobile-first'      : false,
        'custom-stacking'   : true,
        'adaptive-columns'  : true,
        'flow-columns'      : true,
        'magic-columns'     : true,
        'block-columns'     : true,
        'no-gutter-columns' : true,
        'reverse-columns'   : true,
        'pull-columns'      : true,
        'push-columns'      : true
    ),
    'breakpoints' : (
        'break-0'           : 0px,
        'break-1'           : 460px,
        'break-2'           : 720px,
        'break-3'           : 940px,
        'break-4'           : 1200px
    ),
    'fractions' : (
        'full'              : (1, 1),
        'half'              : (1, 2),
        'third'             : (1, 3),
        'quarter'           : (1, 4),
        'sixth'             : (1, 6)
    )
) !default;

Description

Default grid system configuration

Type

Map

Map structure

map key Namemap key Descriptionmap key Typemap key Value
options.columns

number of columns your grid system should have

Number12
options.gutter

width of gutter between columns

Number3%
options.col-break

default width at which columns should collapse

Number940px
options.row-namespace

namespace for gnerated row classes

String'row'
options.col-namespace

namespace for gnerated col classes

String'col'
settings.kayzen-gs

output Kayzen-GS style when importing the library

Boolfalse
settings.old-ie

support ancient IE versions (pls don't)

Boolfalse
settings.responsive

generate responsive columns by default

Booltrue
settings.mobile-first

use mobile-first when generating responsive columns

Boolfalse
settings.custom-stacking

generate styles for stacking at various widths

Booltrue
settings.adaptive-columns

generate adaptive columns

Booltrue
settings.flow-columns

generate flow columns

Booltrue
settings.magic-columns

generate magic columns

Booltrue
settings.block-columns

generate block columns

Booltrue
settings.no-gutter-columns

generate no-gutter columns

Booltrue
settings.reverse-columns

generate classes to reverse-columns

Booltrue
settings.pull-columns

generate classes to pull-columns

Booltrue
settings.push-columns

generate classes to push-columns

Booltrue
settings.breakpoints

widths to be used as breakpoints

Map none
settings.fractions

widths to be used as pre-defined fractions

Map none

Used by

Author

kgs-scale

$kgs-scale: if(kgs-setting('mobile-first'), 'min', 'max');

Description

Set min/max width for breakpoint creation to determine mobile-first

Type

String

Used by

Author

mixins

kayzen-gs

@mixin kayzen-gs($custom) { ... }

Description

Kayzen-GS core

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$custom

where custom config will be passed

Map none

Example

@include kayzen-gs((
    'options':(
        'max-width' : 90%
    ),
    'breakpoints':(
        'break-3'   : 840px,
        'break-5'   : 1600px
    )
));

Output

all grid system styles

Requires

Author

kgs-column-core

@mixin kgs-column-core() { ... }

Description

Core column styles

Parameters

None.

Output

core styles for a column

Requires

Used by

Author

kgs-row-core

@mixin kgs-row-core() { ... }

Description

Core row styles

Parameters

None.

Output

core styles for a row

Requires

Used by

Author

kgs-block-columns

@mixin kgs-block-columns() { ... }

Description

Core block column styles

Parameters

None.

Output

core styles for a block column

Requires

Used by

Author

kgs-default-columns

@mixin kgs-default-columns() { ... }

Description

Generate each individual column size

Parameters

None.

Output

classes for each column width

Requires

Used by

Author

kgs-flow-columns

@mixin kgs-flow-columns() { ... }

Description

Generate flow columns

Parameters

None.

Output

relevant styles for flow columns

Requires

Used by

Author

kgs-magic-column-core

@mixin kgs-magic-column-core($namespace) { ... }

Description

Core magic column styles

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$namespace

your column namespace e.g. 'span'

String none

Output

relevant selectors for magic columns

Requires

Used by

Author

kgs-magic-columns

@mixin kgs-magic-columns() { ... }

Description

Generate magic columns

Parameters

None.

Output

relevant styles for magic columns

Requires

Used by

Author

kgs-no-gutter-columns

@mixin kgs-no-gutter-columns() { ... }

Description

Generate no-gutter columns

Parameters

None.

Output

relevant styles for no-gutter columns

Requires

Used by

Author

column

@mixin column($custom) { ... }

Description

Custom semantic column

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$custom

where custom config will be passed

Map none

Output

custom column styles

Requires

Author

row

@mixin row($type) { ... }

Description

Custom semantic row

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$type

type of columns row should have

String none

Output

custom row styles

Requires

Author

kgs-adaptive-columns

@mixin kgs-adaptive-columns($col-type: 'default) { ... }

Description

Adaptive Columns

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$col-type

the type of columns to be generated

String'default

Output

styles for adaptive columns

Requires

Used by

Author

kgs-gutter

@mixin kgs-gutter($flush: true) { ... }

Description

Gutter

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$flush

remove margin from first column in row

Booltrue

Output

styles for column gutters

Requires

Used by

Author

kgs-pull

@mixin kgs-pull($col-type: 'default) { ... }

Description

Pull Columns

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$col-type

the type of columns to be generated

String'default

Output

styles for pull columns

Requires

Used by

Author

kgs-push

@mixin kgs-push($col-type: 'default) { ... }

Description

Push Columns

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$col-type

the type of columns to be generated

String'default

Output

styles for push columns

Requires

Used by

Author

kgs-reverse-order

@mixin kgs-reverse-order() { ... }

Description

Reverse order of columns in a row

Parameters

None.

Output

styles to reverse column order

Requires

Used by

Author

kgs-stack-columns

@mixin kgs-stack-columns($col-type: null, $core: false) { ... }

Description

Stack Columns

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$col-type

the type of columns to be generated

Stringnull
$core

Set if mixin is included in column selector as opposed to row

Boolfalse

Output

styles which cause columns to become stacked

Requires

Used by

Author

functions

kgs-default-width

@function kgs-default-width($span, $columns) { ... }

Description

Calculate width for a default column

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$span

the width (in columns) of returned value

Number none
$columns

the maxinum number of columns being used

Number none

Returns

Number

width of column

Requires

Used by

Author

kgs-flow-width

@function kgs-flow-width($span, $columns) { ... }

Description

Calculate width for a flow column

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$span

the width (in columns) of returned value

Number none
$columns

the maxinum number of columns being used

Number none

Returns

Number

width of column

Requires

Used by

Author

kgs-magic-width

@function kgs-magic-width($columns) { ... }

Description

Calculate width for a magic column

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$columns

the maxinum number of columns being used

Number none

Returns

Number

width of column

Requires

Used by

Author

kgs-no-gutter-width

@function kgs-no-gutter-width($span, $columns) { ... }

Description

Calculate width for a no-gutter column

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$span

the width (in columns) of returned value

Number none
$columns

the maxinum number of columns being used

Number none

Returns

Number

width of column

Used by

Author

kgs-breakpoint

@function kgs-breakpoint($breakpoint) { ... }

Description

Get a value from the 'breakpoints' configuration group

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$breakpoint

key of desired breakpoint

String none

Returns

Number

desired breakpoint value

Requires

Used by

kgs-config

@function kgs-config($options...) { ... }

Description

Get a nested value from the Kayzen-GS config

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$options

arglist of desired option

Arglist none

Returns

Any type —

desired value

Used by

kgs-fraction

@function kgs-fraction($fraction) { ... }

Description

Get a value from the 'fractions' configuration group

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$fraction

key of desired fraction

String none

Returns

Number

desired fraction value

Requires

Used by

kayzenGS

@function kayzenGS($option) { ... }

Description

Get a top level value from the default Kayzen-GS config

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$option

key of desired option

String none

Returns

Any type —

desired value

Requires

Used by

kgs-option

@function kgs-option($option) { ... }

Description

Get a value from the 'options' configuration group

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$option

key of desired option

String none

Returns

Any type —

desired value

Requires

Used by

kgs-setting

@function kgs-setting($setting) { ... }

Description

Get a value from the 'settings' configuration group

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$setting

key of desired setting

String none

Returns

Bool

desired value

Requires

Used by