# postcss-neat

> PostCSS plugin that provides a semantic and fluid grid framework.

Latest version **2.5.3** (published 2017-07-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-neat
pnpm add postcss-neat
yarn add postcss-neat
bun add postcss-neat
```

## 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 | 2.5.3 |
| Published | 2017-07-17 |
| First published | 2015-04-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 88 |
| Author | Alexandr Marinenko |
| Maintainers | jo.asakura |
| Keywords | postcss-plugin, postcss, css, postcssplugin, columns, grid, layout, media, media-queries, neat, queries, semantic |

## Links

- npm: https://www.npmjs.com/package/postcss-neat
- Repository: https://github.com/jo-asakura/postcss-neat
- Homepage: http://jo-asakura.github.io/postcss-neat/
- Issues: https://github.com/jo-asakura/postcss-neat/issues
- npm.io page: https://npm.io/package/postcss-neat

## Dependencies (2)

- [postcss](https://npm.io/package/postcss.md) 5.0.19
- [babel-polyfill](https://npm.io/package/babel-polyfill.md) 6.7.4

## 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

- 2.5.3 (latest) — 2017-07-17
- 2.5.2 — 2016-04-07
- 2.5.1 — 2016-04-07
- 2.5.0 — 2016-04-07
- 2.4.3 — 2016-04-07
- 2.4.2 — 2015-11-18
- 2.4.1 — 2015-10-15
- 2.4.0 — 2015-10-10
- 2.3.0 — 2015-08-03
- 2.2.0 — 2015-07-29
- 2.1.0 — 2015-07-22
- 2.0.0 — 2015-07-22
- 1.1.0 — 2015-07-02
- 1.0.1 — 2015-05-27
- 1.0.0 — 2015-04-20

## README

# PostCSS-Neat

[![npm-version]][npm] [![travis-ci]][travis]

## A semantic and fluid grid framework on top of PostCSS

[PostCSS-Neat][postcss-neat] is a fluid grid framework built with the aim of being easy enough to use out of the box and flexible enough to customize down the road.

## Using PostCSS-Neat

Usage:

```js
postcss([
  require('postcss-neat')(/* { options } */)
])
```

There is a gulp usage:

```js
var gulp = require('gulp');
gulp
  .task('css', function () {
    var processors = [
      require('autoprefixer-core')({ browsers: ['last 1 version'] }),
      require('postcss-neat')(/* { options } */)
    ];
    return gulp.src('./input/*.css')
      .pipe(require('gulp-postcss')(processors))
      .pipe(gulp.dest('./output/'));
  })
  .task('default', ['css']);
```

See the [demo page](http://jo-asakura.github.io/postcss-neat/demo.html) for a full list of features.

Let's walk through a simple example. Include the `outer-container` at-rule in the topmost container (to which the `max-width` setting will be applied):

```css
.container {
  @neat-outer-container;
}
```

Then use `span-columns` on any element to specify the number of columns it should span:

```css
.element {
  @neat-span-columns 6;
}
```

If the element's parent isn't the top-most container, you need to add the number of columns of the parent element to keep the right proportions:

```css
.container {
  @neat-outer-container;

  .parent-element {
    @neat-span-columns 8;

    .element {
      @neat-span-columns 6 8;
    }
  }
}
```

To make your layout responsive, use the [postcss-media-minmax](https://github.com/postcss/postcss-media-minmax) media queries functionality to modify both the grid and the layout:

```css
.container {
  @neat-span-columns 4;

  @media (width >= 768px) {
    @neat-span-columns 2;
  }
}
```

To help debug your layouts there is a `show-grid` at-rule, note that it should be used in conjunction with `outer-container`:

```css
.container {
  @neat-outer-container;
  @neat-show-grid; /* defaults to 1 12 */
}
```

The result you get by using `show-grid` at-rule is shown below:
<img src="/demo/debugging-grid.png" alt="@neat-show-grid" width="75%" />

The third parameter of `show-grid` at-rule controls the location of where the grid will be applied to. The allowed values are `before`, `after` (default value) or `background`:

```css
.container {
  @neat-outer-container;
  @neat-show-grid 4 12 background;
}
```

### Custom settings

If you are planning to override the default grid settings (12 columns, and etc.), set variables you want to override in `options` that you pass to PostCSS-neat call:

```js
postcss([
  require('postcss-neat')({
    neatMaxWidth: '128em'
  })
])
```

There is a list of all available variables:

- `neatDefaultDisplay`, sets the default display mode. Can be `block`, `table` or `block-collapse`. Default is `block`.
- `neatDefaultDirection`, sets the default layout direction of the grid. Can be `LTR` or `RTL`. Default is `LTR`.
- `neatGridColumns`, sets the total number of columns in the grid. Default is `12`.
- `neatColumnWidth`, sets the relative width of a single grid column. Default is `4.235801032000001em`.
- `neatGutterWidth`, sets the relative width of a single grid gutter. Default is `1.618em`.
- `neatMaxWidth`, sets the max-width property of the element that includes `outer-container`. Default is `64em`.
- `debugGridColor`, sets the background color for the debugging grid. Default is `#ecf0f1`.
- `debugGridLocation`, sets the default location of the debugging grid. Default is `after`.

## PostCSS-Neat v1

Second version of PostCSS-Neat introduced breaking changes. [Here][old-doc] is old documentation if you're still using PostCSS-Neat version 1.X.X.

## Credits

PostCSS-Neat is created and maintained by Alexandr Marinenko. The project is heavily inspired by amazing Sass framework [Bourbon Neat](http://neat.bourbon.io). Tweet your questions or suggestions to [@jo_asakura](https://twitter.com/jo_asakura).

## License

Copyright © 2015 Alexandr Marinenko. PostCSS-Neat is free software, and may be redistributed under the terms specified in the [license](LICENSE).


  [npm]: https://www.npmjs.com/package/postcss-neat
  [npm-version]: http://img.shields.io/npm/v/postcss-neat.svg?style=flat-square

  [travis]: https://travis-ci.org/jo-asakura/postcss-neat
  [travis-ci]: https://img.shields.io/travis/jo-asakura/postcss-neat/master.svg?style=flat-square

  [postcss-neat]: http://jo-asakura.github.io/postcss-neat/
  [old-doc]: https://github.com/jo-asakura/postcss-neat/blob/0197c392253b13196e00145f6365b330024a1a5f/README.md

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