Griss NPM | npm.io

Griss

Simple and modular grid system.

Overview

Griss is a simple grid system built with modularity in mind to avoid unnecessary bloat and help you develop with ease.

Key features:

Fluid cells.
Fixed gutters.
Infinite nesting.
Lightweight (~187 bytes minified and gzipped).
Extensible using the different available modules or your own code.

Installation

Install it using npm:

npm install griss

Or simply download the minified file and include it into your project:

<link href="griss.min.css" rel="stylesheet" />

Usage

To create either a grid or a cell use whichever element makes sense for your content, it could be a div, span, ul, ol, li, even aside, article or main. If it makes sense, it will —most certainly— work just fine.

To define a grid use the base grid class —gs-Grid— and as many cells as you need using the base cell class —gs-Grid-cell. Keep in mind that Grids can only have cells as direct children.

Cells by default are as wide as the grid. To define a different size combine the base cell class with your own selector, or use the cells module.

Gutters by default have a size of 20px. To define a different size combine the base grid class with your own selector or use the gutters module.

Examples

Some basic examples:

A grid with two cells using div:

<div class="gs-Grid">
  <div class="gs-Grid-cell / Example-size(1/2)"> ... </div>
  <div class="gs-Grid-cell / Example-size(1/2)"> ... </div>
</div>

A grid with three cells using ul and li:

<ul class="gs-Grid">
  <li class="gs-Grid-cell / Example-size(1/3)"> ... </li>
  <li class="gs-Grid-cell / Example-size(1/3)"> ... </li>
  <li class="gs-Grid-cell / Example-size(1/3)"> ... </li>
</ul>

A grid with two cells using div and a nested grid with two cells using span:

<div class="gs-Grid">
  <div class="gs-Grid-cell / Example-size(1/2)"> ... </div>
  <div class="gs-Grid-cell / Example-size(1/2)">
    ...
    <span class="gs-Grid">
      <span class="gs-Grid-cell / Example-size(1/2)"> ... </span>
      <span class="gs-Grid-cell / Example-size(1/2)"> ... </span>
    </span>
  </div>
</div>

Defining your own selectors:
```
.Example-size(1/2) {
  width: 50%;
}

.Example-size(1/3) {
  width: 33.33333%;
}
```
To facilitate readability the CSS escape character is not included.