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.
npm i postcss-neogrid -D
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
}
The plug-in supports 2 kinds of a grid - flex and inline-block, accordingly generates for everyone its rules
.foo {
row: "";
}
.foo {
margin-left: -15px;
margin-right: -15px;
display: flex;
flex-wrap: wrap;
}
.foo {
row: "";
}
.foo {
margin-left: -15px;
margin-right: -15px;
font-size: 16px;
word-spacing: 4px;
}
Expanding and deleting a duplicated property also works
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
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
}
}
The plug-in supports the following kind of settings
type: number
default: 1200
units: px
Used to set the width of the wrapper
type: string
default: flex
possible disagreements: flex, inline-block
Grid sistem
type: number
default: 5
units: px
Used to specify the fields of the wrapper
type: number
default: 30
units: px
Used to specify the intercolumn
type: boolean
default: false
Turns the intercolumn in percentages
type: boolean
default: false
Whether to use the calc function to calculate the column width
type: string
default: remove
possible disagreements: remove, initial
In duplicate properties, you can ignore plugin settings and use the values entered by the user
type: number
default: 4
Leaves the specified number of decimal places in the calculated fractional values
type: number
default: 12
Used to specify the number of columns
postcss([ require('postcss-neoGrid')(options) ])
See PostCSS docs for examples for your environment.