grid-box

A grid system for SASS based on flexbox that allows you to quickly set the number of elements per row on a given node.

Features

• Create a horizontal grid by applying one simple mixin to the parent node
• Control child element width individually with the +span mixin
• Relative gutters

Getting Started

npm install -S grid-box or yarn add grid-box

Then just import it at the top of your stylesheet. @import ../../node_modules/grid-box/gridbox.sass

Usage

Example #1

<parent>
  <child>...</child>
  <child>...</child>
  <child>...</child>
</parent>

parent
    +gridbox

Example #2

<section class="parent">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</parent>

.parent
    +gridbox(center, 6, 3, 2)

Example #3

<section class="gridbox">
  <div class="child">...</div>
  <div class="child">...</div>
  <div class="child">...</div>
</parent>

.child
    +span(12)

Settings

Variable	Default	Description
$container-max-width	1180px	Container width
$columns	12	Number of columns you wanna base the grid system on
$gutter-width	20px	Gutter width. Becomes relative when =< $bp-xl
$bp-xxs	320px	small phone portrait
$bp-xs	480px	phone portrait
$bp-sm	600px	phablets
$bp-md	768px	tablet portrait
$bp-lg	959px	tablet landscape
$bp-xl	1180px (Container width)	desktop
$bp-full	1440px

Gotchas & limitations

The default +gridbox mixin (i.e. w/ gutters option) will not work on an element that has a set width. Otherwise (with no-gutters argument), it will work on any element e.g. +gridbox(left, 4, 4, 2, no-gutters).

Grid-Box might be disruptive if used in conjunction with other grid libraries (i.e. some keywords tend to be the same as others). I recommend sticking to only one of them.

Browser Support

This package uses Flexbox. So expect poor support on IE9 and older as well as older Android devices.