1.1.4 • Published 5 years ago
bourbon-neat-utils v1.1.4
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();