# bourbon-neat-utils

> An extension for Bourbon Neat.

Latest version **1.1.4** (published 2019-07-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install bourbon-neat-utils
pnpm add bourbon-neat-utils
yarn add bourbon-neat-utils
bun add bourbon-neat-utils
```

Provides the commands `mixins`, `settings`, `functions`, `_fill.scss`, `_push.scss`, `hotkeys.js`, `neat-utils`, `_bleed.scss`, `_grids.scss`, `_shift.scss`, `_append.scss`, `_animate.scss`, `_columns.scss`, `_collapse.scss`, `_alignment.scss`, `_columnize.scss`, `_container.scss`, `_variables.scss`, `_visualize.scss`, `_neat-utils.scss`, `_breakpoints.scss`, `_neat-utils-columnize.scss`, `_neat-utils-validate-params.scss`, `_neat-utils-merge-media-property.scss`, `_neat-utils-available-params-value.scss`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.4 |
| Published | 2019-07-24 |
| First published | 2019-05-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Maarten Werner |
| Maintainers | kteng |
| Keywords | columns, grid, layout, media-queries, neat, sass |

## Links

- npm: https://www.npmjs.com/package/bourbon-neat-utils
- Repository: https://github.com/kteng-org/bourbon-neat-utils
- Homepage: https://neat-utils.kteng.org
- Issues: https://github.com/kteng-org/bourbon-neat-utils/issues
- npm.io page: https://npm.io/package/bourbon-neat-utils

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.1.4 (latest) — 2019-07-24
- 1.1.3 — 2019-07-23
- 1.1.2 — 2019-05-07
- 1.1.1 — 2019-05-06

## README

[Check the demo website for examples](https://neat-utils.kteng.org)

# Bourbon Neat Utils

> An extension for [Bourbon Neat](https://neat.bourbon.io)


## Installation
Make sure you have installed [bourbon-neat](https://github.com/thoughtbot/neat).

```bash
$ npm install bourbon-neat-utils --save
```

Import the package into your Sass file.
```scss
@import "neat-utils";
```


### Usage
See all the examples on the [demo website](https://neat-utils.kteng.org/#container).

```scss
.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**<br>
You can overwrite these settings.

```scss
$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**


```scss
// 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**<br>
*options: left, right and center as default*

```scss
$container-alignment: left;
```


## Setup hotkeys

Put this piece of code into your javascript file.


```js
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
--|--
<kbd>ctrl + l</kbd> | toggle columns

### Remove hotkeys

```js
import { removeNeatHotkeys } from 'bourbon-neat-utils';

// You can remove the hotkeys. It will delete the cookie if it's set.
removeNeatHotkeys();
```

---
_Source: https://npm.io/package/bourbon-neat-utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._