Skip to content

topcoat/grid

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
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
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

Stars

Watchers

Forks

Packages

No packages published

Languages

  • HTML 64.7%
  • CSS 32.8%
  • JavaScript 2.5%