Home

Getting Started With PostCSS Tidy Columns

Demo page: https://goodguyry.github.io/postcss-tidy-columns/

Install

npm install postcss-tidy-columns

Grid Setup

There are two ways to define the Tidy grid values:

Option 1. 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',
      },
    },
  }),
];

Option 2. Declare @tidy rules in your CSS/Sass file.

/* index.css */

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

Note: Passing JS values directly to the plugin allows for declaring breakpoint configurations.

Finding the config values

Zeplin

1. Click outside the design, in the art board area.
2. Notice the Grid section in the sidebar.
3. The columns value is the # of Columns.
4. The gap value is the dark colored portion of the Grid (20px in the screenshot below).
5. The edge value is the actual width of the design minus the Total Width value here, divided by two. Or by simply measuring with a tool like PixelSnap or Linear.
6. The siteMax value is the edge value multiplied by 2 plus the Total Width field (or simply the full-width of the design).

Invision

1. Click outside the design, in the art board area.
2. Notice the Grid section in the sidebar.
3. The columns value is in the Columns field.
4. The gap value is in the Gutter width field.
5. The edge value is calculated by subtracting the Offset value from the Total Width value, then subtracting the result from the Width value (at the top of the sidebar). Or by simply measuring with a tool like PixelSnap or Linear.
6. The siteMax value is the Width value (at the top of the sidebar).

Sketch

In the View toolbar drop down, notice the Layout Settings... option.

That option opens the Layout settings.

1. The columns value is the Number of Columns field.
2. The gap value is the Gutter Width field.
3. The edge value is the Offset field.
4. The siteMax value is the Offset field multiplied by 2 plus the Total Width field (or simply the full-width of the design).