Griss-gutters NPM

Griss gutters

Gutters module for Griss.

Overview

Extends Griss by adding a set of grid classes to modify the default gutter with three available breakpoints to adjust the size at different screen widths.

Key features:

Responsive and mobile-first.
Lightweight (~287 bytes minified and gzipped).
Extensible using the different available modules or your own code.

Installation

Install it using npm:

npm install griss-gutters

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

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

You will also need to install Griss core module.

Usage

Make sure you have read Griss core documentation first.

Combine the base grid class —gs-Grid— with the class that defines the gutter size that you need for your content —i.e. gs-Grid--gutter(s).

To define the gutter size of each grid you can choose from five different options:

None represented as n for no gutter.
Small represented as s for a gutter of 10px.
Medium represented as m for a gutter of 20px.
Large represented as l for a gutter of 30px.
Extra large represented as xl for a gutter of 40px.

Using only the base grid class the default gutter will be of 20px.

If you need to make adjustments at different screen widths use any of the available breakpoint suffixes: @s, @m and @l —i.e. gs-Grid--gutter(s)@m.

Examples

Some basic examples:

A grid with no gutter:

<div class="gs-Grid gs-Grid--gutter(n)">
  <div class="gs-Grid-cell"> ... </div>
  <div class="gs-Grid-cell"> ... </div>
</div>

A grid using different gutter sizes at different breakpoints:

<div class="gs-Grid gs-Grid--gutter(s)@s gs-Grid--gutter(m)@l">
  <div class="gs-Grid-cell"> ... </div>
  <div class="gs-Grid-cell"> ... </div>
</div>

A grid and a nested grid using different gutter sizes:

<div class="gs-Grid gs-Grid--gutter(m)">
  <div class="gs-Grid-cell"> ... </div>
  <div class="gs-Grid-cell">
    ...
    <div class="gs-Grid gs-Grid--gutter(l)">
      <div class="gs-Grid-cell"> ... </div>
      <div class="gs-Grid-cell"> ... </div>
    </div>
  </div>
</div>

For more examples, please check out the test page.