Package Exports

postcss-neat

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-neat) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PostCSS-Neat

A semantic and fluid grid framework on top of PostCSS

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

Note, that you must use this plugin in conjunction with postcss-mixins and postcss-nested:

postcss([
  require('postcss-mixins')({
    mixins: require('postcss-neat')()
  }),
  require('postcss-nested')
])

See the demo page for a full list of features.

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

.container {
  @mixin outer-container;
}

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

.element {
  @mixin 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:

.container {
  @mixin outer-container;

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

    .element {
      @mixin 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:

.container {
  @mixin span-columns 4;

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

Credits

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.

postcss-neat