onegrid v2.0.1

OneGrid

A simple flexbox grid system based on jeet.gs. Compatible with SCSS and Stylus.

Available via npm:

npm install -D onegrid

Or via yarn:

yarn add onegrid

Usage

Simple example on how to use the grid.

SCSS:

@import 'node_modules/onegrid/onegrid';

ul {
  @include grid(); //Setup the grid;
  li {
    @include column(1/3); //Assign element to use 1 column of 3;
  }
}

Stylus:

@require 'node_modules/onegrid/onegrid';

ul
  grid() //Setup the grid;
  li
    column(1/3) //Assign element to use 1 column of 3;

Default values

The grid have some default values that can be overwritten, right after the mixins are imported or when a mixin is called.

SCSS:

$grid-columns: 12 !global;
$grid-gutter: 20px !global;

Stylus:

gridInfo = {
  columns: 12,
  gutter: 20px
}

Mixins

List of mixins and how to use each of them:

• grid( gutter ): Used to configure the context of the grid, passing the gutter that should be used, or using the default value;

  • gutter: Can be a number unitless or not, if the the value is unitless it defaults to 'px'. Eg: 20, 20px, 20em.

  grid(20) would generate:

  {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
  }

• column( columns ): Should be called on a grid() context, will generate columns on the ratio 1/columns, should be called on each child element of a grid.

  • columns: Can be a fraction or decimal. Eg: 0.5, 2/12.

  column(1/2), with 20px set as gutter on the grid, would generate:

  {
    box-sizing: border-box;
    flex-basis: calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }