Home

Getting Started With PostCSS Tidy Columns

Install

npm install postcss-tidy-columns

Grid Setup

There are two ways to define the Tidy grid values:

Either pass grid settings in JavaScript via the plugin options*...

/* postcss.config.js */

const tidyColumns = require('postcss-tidy-columns');

plugins: [
  tidyColumns({
    columns: 8,
    gap: '0.625rem',
    edge: '1.25rem',
    breakpoints: {
      '64rem': {
        columns: 12,
        siteMax: '90rem',
        gap: '1.25rem',
        edge: '1.5rem',
      },
    },
  }),
],

or via @tidy rules in your CSS/Sass file.

/* index.css */

@tidy columns 12;
@tidy siteMax 90rem;
@tidy gap 1.25rem;
@tidy edge 1.5rem;

*Note that passing JS values directly to the plugin allows for declaring breakpoint configurations.