Skip to content
master
Switch branches/tags
Go to file
Code
This branch is 14 commits ahead, 7 commits behind zemirco:master.

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

small grid system using CSS flex properties

Resources

License

Packages

No packages published