small-flexgrid.styl

A small flexgrid written in Stylus

Usage

npm install --save small-flexgrid

@import 'small-flexgrid';
/* or, for css: */
@import 'small-flexgrid/.css';
/* or, for prefixed css */
@import 'small-flexgrid/prefixed.css';

import 'small-flexgrid';
// or, for css:
import 'small-flexgrid/.css';
// or, for prefixed css
import 'small-flexgrid/prefixed.css';

OR

<link rel="stylesheet" href="https://unpkg.com/small-flexgrid/min.css">
<!-- OR -->
<link rel="stylesheet" href="https://unpkg.com/small-flexgrid/prefixed.min.css">

You can also import mixins separately:

@import 'small-flexgrid/src/mixins';

THEN (if using stylus only)

in your styles

cols-amount = 12 // basically, any amount you want
sizes = {        // basically, any breakpoints you want
  all: 0rem
  xs: 20rem
  sm: 33.75rem
  md: 48rem
  lg: 63.75rem
  xl: 76.25rem
}
col-suffix = '-my-cool'

cols(cols-amount, sizes, col-suffix) // generate all columns

helpers(cols-amount, sizes, col-suffix)  // generate helpers

cols-with-helpers(cols-amount, sizes, col-suffix) // generate all columns AND helpers