topcoat-grid

0.1.0 • Public • Published

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 topcaot-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

Readme

Keywords

none

Package Sidebar

Install

npm i topcoat-grid

Weekly Downloads

5

Version

0.1.0

License

MIT, Apache2

Last publish

Collaborators

  • brianleroux
  • dam
  • garthdb
  • zemirco