kayzen-gs

mixins

kayzen-gs

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

Description

Kayzen-GS core

Parameters

NameDescriptionTypeDefault value
$custom

where custom config will be passed

Map—

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

NameDescriptionTypeDefault value
$namespace

your column namespace e.g. 'span'

String—

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

NameDescriptionTypeDefault value
$custom

where custom config will be passed

Map—

Output

custom column styles

Requires

Author

row

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

Description

Custom semantic row

Parameters

NameDescriptionTypeDefault value
$type

type of columns row should have

String—

Output

custom row styles

Requires

Author

kgs-adaptive-columns

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

Description

Adaptive Columns

Parameters

NameDescriptionTypeDefault 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

NameDescriptionTypeDefault 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

NameDescriptionTypeDefault 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

NameDescriptionTypeDefault 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

NameDescriptionTypeDefault 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

NameDescriptionTypeDefault value
$span

the width (in columns) of returned value

Number—
$columns

the maxinum number of columns being used

Number—

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

NameDescriptionTypeDefault value
$span

the width (in columns) of returned value

Number—
$columns

the maxinum number of columns being used

Number—

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

NameDescriptionTypeDefault value
$columns

the maxinum number of columns being used

Number—

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

NameDescriptionTypeDefault value
$span

the width (in columns) of returned value

Number—
$columns

the maxinum number of columns being used

Number—

Returns

Number —

width of column

Used by

Author

kgs-breakpoint

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

Description

Get a value from the 'breakpoints' configuration group

Parameters

NameDescriptionTypeDefault value
$breakpoint

key of desired breakpoint

String—

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

NameDescriptionTypeDefault value
$options

arglist of desired option

Arglist—

Returns

Any type —

desired value

Used by

kgs-fraction

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

Description

Get a value from the 'fractions' configuration group

Parameters

NameDescriptionTypeDefault value
$fraction

key of desired fraction

String—

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

NameDescriptionTypeDefault value
$option

key of desired option

String—

Returns

Any type —

desired value

Requires

Used by

kgs-option

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

Description

Get a value from the 'options' configuration group

Parameters

NameDescriptionTypeDefault value
$option

key of desired option

String—

Returns

Any type —

desired value

Requires

Used by

kgs-setting

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

Description

Get a value from the 'settings' configuration group

Parameters

NameDescriptionTypeDefault value
$setting

key of desired setting

String—

Returns

Bool —

desired value

Requires

Used by

General

variables

kayzenGS

$kayzenGS: if(variable-exists('kayzenGS-defaults'), $kayzenGS-defaults, (
    '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

Used by

Author

kgs-scale

$kgs-scale: if(map-get-deep($kayzenGS, 'settings', 'mobile-first'), 'min', 'max');

Description

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

Used by