Grid System

One-Nexus comes with a custom grid system: Kayzen-GS. Kayzen-GS is built with Sass and is fully responsive, dynamic and customizable.

Some of the core features of Kayzen-GS include:

• Specify any number of columns
• Infinitely nestable rows
• Easily set vertical/horizontal align
• Create semantic rows and columns
• Uses inline-block columns
• Specify global column/row selector names
• Specify gutter width
• Multiple column types
• Reverse column order
• Collapse columns at different breakpoints
• Adaptive column widths
• Push/pull columns
• Works in all browsers

All examples from the Kayzen-GS Examples page come included with One-Nexus.

The grid system exists in One-Nexus as a Utility Module. This module is essentially a wrapper around Kayzen-GS, so accepts the same options as Kayzen-GS.

The following options can be passed to the Grid module:

For default values, see the Kayzen-GS configuration section

Option	Description
options.columns	The number of columns to use when generating the grid system classes
options.gutter	The width of the gutter between each column
options.col-break	The default width at which columns should collapse and stack ontop of each other
options.row-namespace	The namespace for rows; used when generating the CSS classes
options.col-namespace	The namespace for columns; used when generating the CSS classes
settings.old-ie	Enabling this setting will allow default columns to work on Internet Explorer 6 & 7
settings.responsive	If disabled, columns will not stack vertically
settings.mobile-first	Column stacking will work from a mobile-first perspective
settings.custom-stacking	This option generates the code required for the custom breakpoint stacking feature
settings.adaptive-columns	This option generates the code required for adaptive columns
settings.flow-columns	This option generates the code required for flow columns
settings.magic-columns	This option generates the code required for magic columns
settings.block-columns	This option generates the code required for block columns
settings.no-gutter-columns	This option generates the code required for no-gutter columns
settings.reverse	This option generates the code required to reverse columns
settings.pull	This option generates the code required to pull columns
settings.push	This option generates the code required to push columns
breakpoints {}	Keys and values to use for each breakpoint you desire (format: "break-1":"460px")
fractions {}	Keys and values any fractions to use in the grid system (format: "half":[1,2])

Options can be passed to config.json like so:

{
    "app": {
        "grid": {
            "breakpoints": {
                "break-5": "1400px"
            }
        }
    }
}

Read the Grid module documention for more information

Semantic Grid System

You can use Kayzen-GS to build your own grid system using semantic class names whilst retaining complete control over the flexibility of your columns.

View Examples

Creating a Semantic Row

.main {
    @include row;
}

In the above example, main is used as the semantic class name.

Creating a semantic row for Flow Columns:

.portfolio-items {
    @include row('flow');
}

In the above example, the semantic class name for the row of Flow Columns is portfolio-items.

Creating a Semantic Column

Basic Example

.sidebar {
    @include column((
        'width' : (3, 12)
    ));
}

This will create a column that spans 3 out of 12 columns in width, so 1/4 or 25%. Alternatively, you can achieve the same thing with this:

.sidebar {
    @include column((
        'width' : 'quarter'
    ));
}

You can use any fractions defined in the Configuration.

Or even this:

.sidebar {
    @include column((
        'width' : 25%
    ));
}

Note that perhaps surprisingly the above examples do not produce a width value of 25%, but rather a calculated value based off the value of the gutter value. This is so you can easily create columns without having to think about the effect of gutters like so:

.sidebar {
    @include column((
        'width' : 20%
    ));
}

.content {
    @include column(
        'width' : 70%
    ));
}

.promo {
    @include column(
        'width' : 10%
    ));
}

Which will produce the following CSS, assuming the default value of 2.5% for your gutter:

.sidebar {
    width: 18%;
    margin-left: 2.5%;
}

.content {
    width: 69.25%;
    margin-left: 2.5%;
}

.promo {
    width: 7.75%;
    margin-left: 2.5%;
}

Note that the first-child in a row of normal columns has its margin-left removed (this is not the case for Flow Columns).

Column Types

All the column types from the default grid system are also available to use in your semantic grid system.

Flow Columns

Ensure that your semantic row container is also set to flow.

.portfolio-item {
    @include column((
        'type'  : 'flow',
        'width' : (3, 12)
    ));
}

View Demo

Magic Columns

.portfolio-item {
    @include column(
        'type' : 'magic'
    );
} 

View Demo

Block Columns

.portfolio-item {
    @include column((
        'type'  : 'block',
        'width' : (3, 12)
    ));
}

View Demo

No-Gutter Columns

.portfolio-item {
    @include column((
        'type'  : 'no-gutter',
        'width' : (3, 12)
    ));
}

View Demo

Responsiveness

The default width for the stacking of semantic columns is set in the Configuration. You can override the default value like so:

.sidebar {
    @include column((
        'width' : 'quarter',
        'stack' : breakpoint('break-2')
    ));
}

This will cause the columns to stack when the screen size is less than break-2 as opposed to the default value of break-3.

Adaptive Columns

When inside a Flow Columns container and with its type set to flow, you can set the width of your column at specific breakpoints using the respond-to option:

.portfolio-item {
    @include column((
        'type' : 'flow',
        'width': (3, 12),
        'respond-to' : (
            'break-3': (4, 12),
            'break-2': (6, 12),
            'break-1': (12, 12)
        )
    ));
}

View Demo

With mobile-first enabled, a width is not required by default if you are using adaptive responsiveness - the column is 100% width up until break-1 where it becomes 6/12's, then 4/12's at break-2 and 3/12's at break-3.

.portfolio-item {
    @include column((
        'mobile-first': true: 
        'type': 'flow',
        'respond-to' : (
            'break-1': (6, 12),
            'break-2': (4, 12),
            'break-3': (3, 12)
        )
    ));
}

You can set any fraction you want, for example you can write (1, 2) instead of (6, 12).

You can also use numeric values for the width:

.portfolio-item {
    @include column((
        'type' : 'flow',
        'width': 25%,
        'respond-to' : (
            'break-3': 100/3,
            'break-2': 50%,
            'break-1': 100%
        )
    ));
}

Using the fractions from the Configuration you can substitute writing the fraction numbers for the fraction name like so:

.portfolio-item {
    @include column((
        'type' : 'flow',
        'width': 'quarter',
        'respond-to' : (
            'break-3': 'third',
            'break-2': 'half',
            'break-1': 'full'
        )
    ));
}

Read the Kayzen-GS documentation for more information