Trumman Grid
Responsive and fraction based grid system.
Install
npm npm install --save trumman-grid
Bower bower install --save trumman-grid
Usage
- Install with one of those commands
- Load the trumman-grid css file into your html.
- Example
- 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
Prefix | Sizes | Container size |
---|---|---|
-xs[sizes] |
<768px | auto |
-sm[sizes] |
>768px | 750px |
-md[sizes] |
>992px | 970px |
-lg[sizes] |
>1200px | 1170px |
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