small grid system using CSS flex properties
Switch branches/tags
Clone or download
Pull request Compare This branch is 14 commits ahead, 7 commits behind zemirco:master.
Latest commit a4af252 Oct 23, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Updating grid and example Nov 27, 2013
example Updating grid and example Nov 27, 2013
src Moving to css file from stylus Nov 27, 2013
.gitignore init Oct 21, 2013
Gruntfile.js Moving to css file from stylus Nov 27, 2013
LICENSE Updating grid to work inside topcoat Oct 22, 2013
NOTICE Updating grid to work inside topcoat Oct 22, 2013
README.md Typo in README.md Oct 14, 2015
package.json Initial publish of Topcoat grid Nov 27, 2013

README.md

Topcoat Grid

Grid system built on top of flex.

How to use

<div class="topcoat-grid">
    <div class="topcoat-grid__row">
    <div class="topcoat-grid__column--1">
        1 Column
    </div>
    </div>

    <div class="topcoat-grid__row">
    <div class="topcoat-grid__column--6">
        6 Columns
    </div>
    </div>

    <div class="topcoat-grid__row">
    <div class="topcoat-grid__column--2 topcoat-grid__offset--6">
        2 Columns Offset 6
    </div>
    </div>
</div>

There are also classes that fill the available space automatically.

<div class="topcoat-grid">
    <div class="topcoat-grid__row">
    <div class="topcoat-grid__column--auto">
        Auto Column
    </div>
    <div class="topcoat-grid__column--auto">
        Auto Column
    </div>
    <div class="topcoat-grid__column--auto">
        Auto Column
    </div>
    </div>
</div>

Inspiration

Development

Make your changes in src/grid.styl and run grunt to compile css/grid.css and css/grid.min.css