topcoat-grid

simple grid built on css flex

Usage no npm install needed!

<script type="module">
  import topcoatGrid from 'https://cdn.skypack.dev/topcoat-grid';
</script>

README

Topcoat Grid

Grid system built on top of flex.

How to use

<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__column-offset--6">
    2 Columns Offset 6
  </div>
</div>

There are also classes that fill the available space automatically.

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

Inspiration

Development

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