trumman-grid v2.0.0

Trumman Grid

Responsive and fraction based grid system.

(https://img.shields.io/badge/Parker CSS-%E2%9C%93-green.svg)

Install

npm npm install --save trumman-grid Bower bower install --save trumman-grid

Usage

1. Install with one of those commands
2. Load the trumman-grid css file into your html.
3. Example

<div class="container">
  <div class="row">
    <div class="column -md-1-3"></div>
    <div class="column -md-1-3"></div>
    <div class="column -md-1-3"></div>
  </div>
</div>

• Add a .container to encapsulate everything and provide ample horizontal gutter space.
• Create your outer row to clear the floated columns with <div class="row">.
• Add your columns with individual <div class="column">s.
• Add your fractional width classes to set the width of the columns (e.g., -sm-1-2).

API

Container

• .container

Row

• .row
• .-noGutter

Column

• .column,
• .columns

Table

• .-table
• .-middle
• .-bottom

Sizes

• .[prefix]-1-3
• .[prefix]-2-3
• .[prefix]-1-4
• .[prefix]-1-2
• .[prefix]-3-4
• .[prefix]-1-5
• .[prefix]-4-5
• .[prefix]-2-5
• .[prefix]-3-5
• .[prefix]-fill

Responsive

Use sizes from above eg: -xs-1-3.

Build

Commands

$ npm run set-up
$ npm run compile
$ npm run test

Thanks

Inspired by Primer and Bootstrap

License

MIT © Filipe Linhares