Skip to content
One grid to rule them all, One grid to find them; One grid to bring them all and in the flexbox bind them.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
scss
styl
test
.editorconfig
.gitignore
.travis.yml
LICENSE
README.md
_onegrid.scss
index.js
onegrid.styl
package.json
yarn.lock

README.md

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;
    }
You can’t perform that action at this time.