PostCSS NeoGrid

PostCSS plugin grid. Simple grid is a simple postcss plugin that will help you create a grid system with minimal settings. There is no need to specify every single column any more.

Install

npm i postcss-neogrid -D

Wrapper

You can use a simple shortcode, while all the credits will be taken from the settings

.foo {
    wrapper: "";
}

.foo {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 5px;
    padding-right: 5px
}

or you can pass the width and alignment

.foo {
    wrapper: 1200 right;
}

.foo {
    max-width: 1200px;
    margin-left: auto;
    padding-left: 5px;
    padding-right: 5px
}

If the user writes a compound rule, margin or padding - it will unfold, the same properties will be overwritten in favor of plugin settings

.foo {
    wrapper: 1200 right;
    margin: 10px 20px;
}

.foo {
    max-width: 1200px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    padding-left: 5px;
    padding-right: 5px
}

Row

The plug-in supports 2 kinds of a grid - flex and inline-block, accordingly generates for everyone its rules

Flex

.foo {
    row: "";
}

.foo {
    margin-left: -15px;
    margin-right: -15px;
    display: flex;
    flex-wrap: wrap;
}

Inline-block

.foo {
    row: "";
}

.foo {
    margin-left: -15px;
    margin-right: -15px;
    font-size: 16px;
    word-spacing: 4px;
}

Expanding and deleting a duplicated property also works

Col

With columns as well as with lines, depending on the type of grid, the necessary rules will be generated. Example for flex mesh

.foo {
    col: "";
    col-size: 4;
}

.foo {
    margin-left: 15px;
    margin-right: 15px;
    width: 30.8333%;
}

Columns can use built-in media queries

.foo {
    col: "";
    col-size: 4;
    col-size: 3 500 900;
}

.foo {
    margin-left: 15px;
    margin-right: 15px;
    width: 30.8333%;
}
@media (min-width: 500px) and (max-width: 900px) {

    .foo {
        width: 22.5%
    }
}

Expanding and deleting a duplicated property also works

Media

The plug-in supports built-in media expressions

.foo {
    wrapper: 1200 right;
    margin: 10px 20px;
    media(500) {
        max-width: 600px;
    }
}

.foo {
    max-width: 1200px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    padding-left: 5px;
    padding-right: 5px
}
@media (max-width: 500px) {

    .foo {
        max-width: 600px
    }
}

You can also transfer the required units to a media query

.foo {
    wrapper: 1200 right;
    margin: 10px 20px;
    media(45em) {
        max-width: 600px;
    }
}

.foo {
    max-width: 1200px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    padding-left: 5px;
    padding-right: 5px
}
@media (max-width: 45em) {

    .foo {
        max-width: 600px
    }
}

or entire query string

.foo {
    wrapper: 1200 right;
    margin: 10px 20px;
    media(only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2)) {
        max-width: 600px;
    }
}

.foo {
    max-width: 1200px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    padding-left: 5px;
    padding-right: 5px
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {

    .foo {
        max-width: 600px
    }
}

Settings

The plug-in supports the following kind of settings

wrapper

type: number

default: 1200

units: px

Used to set the width of the wrapper

grid

type: string

default: flex

possible disagreements: flex, inline-block

Grid sistem

fields

type: number

default: 5

units: px

Used to specify the fields of the wrapper

offset

type: number

default: 30

units: px

Used to specify the intercolumn

offsetWithPercent

type: boolean

default: false

Turns the intercolumn in percentages

useCalc

type: boolean

default: false

Whether to use the calc function to calculate the column width

duple

type: string

default: remove

possible disagreements: remove, initial

In duplicate properties, you can ignore plugin settings and use the values entered by the user

roundSize

type: number

default: 4

Leaves the specified number of decimal places in the calculated fractional values

columns

type: number

default: 12

Used to specify the number of columns

Usage

postcss([ require('postcss-neoGrid')(options) ])

See PostCSS docs for examples for your environment.