PostCSS plugin that provides a semantic and fluid grid framework.
npm install postcss-neat[![npm-version]][npm] [![travis-ci]][travis]
[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.
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 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 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:
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;
}
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`.
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.
PostCSS-Neat is created and maintained by Alexandr Marinenko. The project is heavily inspired by amazing Sass framework Bourbon Neat. Tweet your questions or suggestions to @jo_asakura.
Copyright © 2015 Alexandr Marinenko. PostCSS-Neat is free software, and may be redistributed under the terms specified in the 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