kayzen-gs

variables

kayzenGS

$kayzenGS: (
    'options' : (
        'columns'           : 12,
        'gutter'            : 3%,
        'col-break'         : 940px,
        'row-namespace'     : 'row',
        'col-namespace'     : 'span',
    ),
    'settings' : (
        'kayzen-gs'         : true,
        '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 keyNamemap keyDescriptionmap keyTypemap keyValue
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

Mapnone
settings.fractions

widths to be used as pre-defined fractions

Mapnone

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$custom

where custom config will be passed

Mapnone

Output

all grid system styles

Example

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

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$namespace

your column namespace e.g. 'span'

Stringnone

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$custom

where custom config will be passed

Mapnone

Output

custom column styles

Requires

Author

row

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

Description

Custom semantic row

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$type

type of columns row should have

Stringnone

Output

custom row styles

Requires

Author

kgs-adaptive-columns

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

Description

Adaptive Columns

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault 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

parameterNameparameterDescriptionparameterTypeparameterDefault 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

parameterNameparameterDescriptionparameterTypeparameterDefault 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

parameterNameparameterDescriptionparameterTypeparameterDefault 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

parameterNameparameterDescriptionparameterTypeparameterDefault 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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$span

the width (in columns) of returned value

Numbernone
$columns

the maxinum number of columns being used

Numbernone

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$span

the width (in columns) of returned value

Numbernone
$columns

the maxinum number of columns being used

Numbernone

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$columns

the maxinum number of columns being used

Numbernone

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$span

the width (in columns) of returned value

Numbernone
$columns

the maxinum number of columns being used

Numbernone

Returns

Number

width of column

Used by

Author

kgs-breakpoint

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

Description

Get a value from the 'breakpoints' configuration group

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$breakpoint

key of desired breakpoint

Stringnone

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$options

arglist of desired option

Arglistnone

Returns

Any type —

desired value

Used by

kgs-fraction

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

Description

Get a value from the 'fractions' configuration group

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$fraction

key of desired fraction

Stringnone

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$option

key of desired option

Stringnone

Returns

Any type —

desired value

Requires

Used by

kgs-option

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

Description

Get a value from the 'options' configuration group

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$option

key of desired option

Stringnone

Returns

Any type —

desired value

Requires

Used by

kgs-setting

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

Description

Get a value from the 'settings' configuration group

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$setting

key of desired setting

Stringnone

Returns

Bool

desired value

Requires

Used by