esr360 / kayzen-gs Goto Github PK

A powerful framework for building responsive grid systems for the web

Installation | Documentation | Demos

View SassDoc Documentation

Some of the core features of Kayzen-GS include:

• New in 2.5 - render rows and columns with React
• 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

The simple answer is; flexibility. By definition, columns are just inline blocks - it's the way CSS columns are supposed to work. Creating CSS columns by applying inline-block opens up a whole world of flexibility for your columns - the most useful benefit being the ability to set their horizontal and vertical alignment, just by setting the text-align and vertical-align properties respectively.

By default, using inline-block for columns causes a natural whitespace to appear between each column, which can vary in width from font to font and browser to browser. This has caused many people many problems, and there are plenty of go-to hacky and impractical work arounds, none of which are really suitble for a production environment. Kayzen-GS allows for the use of completely usable and functional columns which use inline-block and have no white-space. Kayzen-GS works in all browsers, including Internet Explorer 6 (not that anyone uses it anymore...).

• Default Kayzen Grid system
  • Responsiveness
  • Flow Columns
  • Adaptive Columns
  • Magic Columns
  • Block Columns
  • No Gutter Columns
  • Reverse Column Order
  • Push/Pull Columns
• Configuration
  • Options
  • Settings
  • Breakpoints
  • Fractions
• Semantic Grid System
  • Creating a Semantic Row
  • Creating a Semantic Column
• Column Aligning
• Solving the Whitespace Issue

The below examples are based off the default configuration values.

<Row>
    ...
</Row>

<div class="row">
    ...
</div>

Change the class name row to whatever you want in the Configuration.

Create a Column with no specified width:

<Column>Column</Column>

<div class="span">Column</div>

Change the class name span to whatever you want in the Configuration.

By default, Kayzen-GS comes with reusable classes which can be used to create your column widths. The most basic example of a row of Kayzen columns using the default settings would look something like this:

HTML

<div class="row">                    
    <div class="span-4">span-4</div>
    <div class="span-4">span-4</div>
    <div class="span-4">span-4</div>
</div>

<Row>
    <Column width={4}>span-4</Column>
    <Column width={4}>span-4</Column>
    <Column width={4}>span-4</Column>
</Row>

View Demo

Based off the default number of columns (12), the above code would produce 3 columns, each 4/12's (or 1/3) of the total width of the row.

<div class="row">                    
    <div class="span-3">Sidebar</div>
    <div class="span-9">Article</div>
</div>

Likewise, the above code would produce 2 columns; one with a width of 3/12's (or 1/4) and one with a width of 9/12's (or 3/4).

Using these normal columns, the total span of the columns in a given row may not exceed the number of columns the framework has (12 by default) - for such usage, see Flow Columns.

The issue itself is outlined in great detail in this blog post from the Pure CSS blog. Indeed, this issue is what caused Pure to move away from inline-block columns and towards flexbox. In the Github issue, amongst some interesting proposed fixes included hard-coding the font-family of your row to Arial so the letter-spacing hack would work consistently. However, this, along with all the other hacky fixes were deemed unsuitable for productional use, so thus the decision to leave inline-block was made.

And it isn't only Yahoo's Pure who have experienced this issue; other great frameworks like csswizardry-grids also suffer the same problem.

There is actually a simple way to ignore the whitespace in Webkit based browsers, and that is by adding these two CSS properties to your row element:

display: table;
width: 100%;

With this CSS, you can get inline-block columns to behave exactly as desired in Webkit browsers.

The problem is only really an issue in Webkit based browsers - the letter-spacing fix actually works just fine in Firefox and Internet Explorer without having to hard code any typeface. With these combined, our row mixin looks like this:

@mixin kgs-row-core {
    // Firefox/IE collapse white-space
    letter-spacing: -1em;
    // Webkit collapse white-space
    display: table;
    width: 100%;

    // Opera collapse white-space
    @at-root {
        .opera-only :-o-prefocus, & {
            word-spacing: -0.43em;
        }
    }

    // IE < 8 collapse white-space
    @if kgs-setting('old-ie') {
        *letter-spacing: normal;
        *word-spacing: -0.43em;
    }
} // row()

This mixin allows you to create column rows using the inline-block CSS property for your columns without having to worry about the whitespace that is naturally caused.

For all issues, bugs, suggestions and feature requests, please use the issues page.

Follow @esr360 on Twitter!

Released: 4th July 2018 🇺🇸 🦅

• Fixes incorrect externals in webppack config

Released: 14th April 2018

• Render Rows and Columns with React
• Updating build tools from Grunt to NPM Scripts
• Deprecating Bower Support
• Renaming NPM package from Kayzen-GS to kayzen-gs

Released: 1st June 2017

• dependencies are now node modules instead of git submodules
• slight change in how grid system is imported/included
• scss files linted