postcss-mesh v1.1.8
About Mesh
There are a lot of different grid systems already out there and most of them are pretty good. But ☝️ none of them is offering the whole bandwidth of possible options. E.g. I wanted to switch between a flex, inline-block or float based grid as well as I wanted to be able to overwrite certain parameters like gutter or column-count breakpoint wise. That is how I came up with the idea to create my very own grid compiler and Mesh was born 🎉🎉🎉.
Getting Started
Installation
$ npm i postcss-meshGrid Setup
SCSS
Mesh is based on @-rules. To initiate a new grid use @mesh-grid. All breakpoints for a grid should be nested within the respective grid declaration. See the example below for a simple grid setup with bootstrap standards.
@mesh-grid {
column-count: 12;
compile: true;
container-width: 100%;
display-type: float;
gutter-on-outside: true;
gutter: 30px;
name: mesh;
query-condition: min-width;
responsive-gutter: false;
@mesh-viewport-sm {
container-width: 540px;
viewport: 576px;
}
@mesh-viewport-md {
container-width: 720px;
viewport: 768px;
}
@mesh-viewport-lg {
container-width: 960px;
viewport: 992px;
}
@mesh-viewport-xl {
container-width: 1140px;
viewport: 1200px;
}
}HTML
// This markup is a two column grid with equal widths // for all defined breakpoints.
<div class="mesh-container">
<div class="mesh-void">
<div class="mesh-column-6 mesh-column-sm-6 mesh-column-md-6 mesh-column-lg-6 mesh-column-xl-6"></div>
<div class="mesh-column-6 mesh-column-sm-6 mesh-column-md-6 mesh-column-lg-6 mesh-column-xl-6"></div>
</div>
</div>Unique Selling Points
Responsive Gutter
Set the responsive-gutter property to true to scale the gutter as your container grows. This makes your grid less static and more fluid. To make this feature work you have to set a viewport context even in your default settings of the grid.
This feature inherits the gutter size for the first nested level only.
// This set up uses 375px as context.
// If your screen is 375px wide the gap
// between your columns should be exact 30px.
// If your screen gets bigger, the gap scales up.
// If your screen gets smaller, the gap scales down.
@mesh-grid {
viewport: 375px;
gutter: 30px;
responsive-gutter: true;
}Gutter On Outside
Allows you to toggle the container's padding which is based on the gutter size.
// true || false
// default: true
@mesh-grid {
gutter-on-outside: true;
}Mobile First || Desktop First
You can decide if your default viewport is a desktop one or a mobile one using the query-condition property. This property takes min-width or max-width as an argument. If set to min-width your default viewport will be a mobile one. As soon as your screen's width hits the next bigger width defined in all of your breakpoints, it snaps to the related breakpoint.
// min-width || max-width
// default: min-width
@mesh-grid {
query-condition: min-width;
}Unlimited Breakpoints
Bootstrap comes with five predefined breakpoints (Extra small <576px, Small ≥576px, Medium ≥768px, Large ≥992px, Extra Large ≥1200px). These breakpoints have proved its worth over time. But nevertheless, sometimes your design requires more individual breakpoints. In this case Mesh is your best friend. With Mesh you can define as many or as less custom breakpoints as you want using the @mesh-viewport-VIEWPORTNAME-@-rule where VIEWPORTNAME is the viewport's ID. The ID is used in the viewport specific classes. E.g. @mesh-viewport-lg results in .mesh-column-lg-classes.
// this is how you would define a standard large bootstrap breakpoint
// properties "container-width" & "viewport" are required
@mesh-viewport-lg {
container-width: 960px;
viewport: 992px;
}Property Overwrite
Property Overwrite allows you to overwrite some properties breakpoint wise, e.g. gutter. Learn more about properties here.
// default: 30px
@mesh-viewport-lg {
gutter: 30px;
}Custom Class Names
Overwrite the default classNames to keep them unique, short or both. See the properties list for the whole range of naming properties.
// this changes all selectors containing "column"
// e.g. ".mesh-column-1" to ".mesh-col-1"
@mesh-grid{
naming-column: col;
}Excluding
It's a fact: Most projects don't use the whole bandwith of available column-spans. This leads to many lines of unused CSS in the final bundle. Thanks to this feature it is possible to exclude certain column-spans for certain components viewport wise.
// this how you would exclude ".mesh-column-1" & ".mesh-column-2"
@mesh-grid{
exclude-columns: 1,2;
}You can also exclude-pushes, exclude-pulls & exclude-offsets. See the properties list for the whole range of excluding properties.
Components
Mesh's compiled Grid is made of three basic components and three transform components. The basic components describe the .mesh-container, .mesh-void & .mesh-column classes. These components are necessary to set up a very basic grid. The transform components describe the .mesh-offset, .mesh-pull & .mesh-push classes. These components are necessary to transform a column within your grid and should be added to a column component only. Using transform components you can reorder your columns.
Container
The container is the most outer component of a grid instance. It sets up the maximum width of the grid and should not be nested.
<div class="mesh-container"></div>Void
The void component is the equivalent to Bootstrap's row component and voids its parent's gutter. The only immediate child of a void component should be a column.
<div class="mesh-void"></div>Column
The column component is where you can put your content. All columns should be an immediate child of a void component. Replace x with a number between 1 and your given column-count.
<!--
For breakpoint specific column widths include your
breakpoint's ID in the class, e.g. 'mesh-column-lg-6'.
-->
<div class="mesh-column-x"></div>Offset
The offset component will add a margin to the respective column to create an even bigger gap between two columns. Using the component like below will offset the column about the width of a single column.
<!--
For breakpoint specific column offsets include your
breakpoint's ID in the class, e.g. 'mesh-offset-lg-1'.
-->
<div class="mesh-offset-1"></div>Pull
The pull component will reposition the respective column from the right. Using the component like below will pull the column about the width of a single column to the left.
<!--
For breakpoint specific column pulls include your
breakpoint's ID in the class, e.g. 'mesh-pull-lg-1'.
-->
<div class="mesh-pull-1"></div>Push
The push component will reposition the respective column from the left. Using the component like below will push the column about the width of a single column to the right.
<!--
For breakpoint specific column pushes include your
breakpoint's ID in the class, e.g. 'mesh-push-lg-1'.
-->
<div class="mesh-push-1"></div>Nesting
Of course you can also nest your columns.
<!--
This is how you can nest columns within columns.
If using "responsive-gutter" you can only go one
level deep keeping the roots gutter size.
-->
<div class="mesh-container">
<div class="mesh-void">
<div class="mesh-column-6"></div>
<div class="mesh-column-6">
<div class="mesh-void">
<div class="mesh-column-6"></div>
<div class="mesh-column-6"></div>
</div>
</div>
</div>
</div>Ordering
Sometimes you have to switch position of certain columns breakpoint wise. Using push and pull components you can shift your columns.
<!--
This markup moves the first column by the width of
three columns to the right and the second column
by the width of nine columns to the left.
-->
<div class="mesh-container">
<div class="mesh-void">
<div class="mesh-column-9 mesh-push-3"></div>
<div class="mesh-column-3 mesh-pull-9"></div>
</div>
</div>Properties
Mesh is based on a bunch of properties you can adjust to your needs. Some of them are overwriteable in each defined breakpoint. See the table below to get an overview of what Mesh is offering.