Check the demo website for examples

Bourbon Neat Utils

An extension for Bourbon Neat

Installation

Make sure you have installed bourbon-neat.

$ npm install bourbon-neat-utils --save

Import the package into your Sass file.

@import "neat-utils";

Usage

See all the examples on the demo website.

.block {
  @include container;
}
.block__element {
  // use one mxin for all the breakpoints 
  @include columns(8 8 12 12);
}

Settings

The breakpoints are already defined in the $grids-default variable, but of course you can overwrite them. Create a Sass file like settings/grid.scss.

Grid breakpoints
You can overwrite these settings.

$grid-mobile:    (columns: 8,  gutter: 16px, media: 320px,  max-width: 100%,   color: orange);
$grid-portrait:  (columns: 8,  gutter: 20px, media: 560px,  max-width: 100%,   color: lime);
$grid-landscape: (columns: 12, gutter: 30px, media: 1024px, max-width: 100%,   color: tomato);
$grid-desktop:   (columns: 12, gutter: 30px, media: 1280px, max-width: 1280px, color: plum);
 
// don't forget to set the new breakpoints 
$grids-default: ( mobile: $grid-mobile, portrait: $grid-portrait, landscape: $grid-landscape, desktop: $grid-desktop);

Multiple grid sets

// Use the basic breakpoints and overwrite params: color, columns, gutter, media and max-width. 
$grids-special: (
  mobile: map-merge($grid-mobile, (columns: 4, gutter: 20px)),
  portrait: map-merge($grid-portrait, (columns: 4)),
  landscape: map-merge($grid-landscape, (columns: 10, color: olive)),
  desktop: map-merge($grid-desktop, (columns: 10, max-width: 100%))
);
 
// Now you can use the $grids-default (default set) and your $grids-special-breakpoints set. 
.block {
  @include container($grids: $grids-special);
}
.block__element {
  @include columns(2 2 3 3, $grids: $grids-special);
}

Container alignment
options: left, right and center as default

$container-alignment: left;

Setup hotkeys

Put this piece of code into your javascript file.

import { initializeNeatHotkeys } from 'bourbon-neat-utils';
 
// You can get this value from the environment.
const production = false;
 
// You don't want to use this function in your production environment.
if (!production) {
 
  const options = {
    useCookies: true,
    visualizeGrid: true
  }
 
  initializeNeatHotkeys(options);
}

option	type	default	description
useCookies	boolean	false	Enable this parameter if you want to keep your toggle before refreshing the page. It will place a cookie 'visualize-grid' and toggles a "visualize-grid" class on your HTML tag.
visualizeGrid	boolean	false	Visualize the grid for the first time. After that, the cookie (if you enabled the 'useCookies' option) will take over this value.

Use hotkeys

keys	action
ctrl + l	toggle columns

Remove hotkeys

import { removeNeatHotkeys } from 'bourbon-neat-utils';
 
// You can remove the hotkeys. It will delete the cookie if it's set.
removeNeatHotkeys();