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();