visual representation of your postcss-mesh setup
npm i mesh-helper
import MeshHelper from 'mesh-helper';
...
const meshHelper = new MeshHelper( parameters : {} );
Your helper's base selector. This class is used to nest helper-relevant styles and toggle the visibility.
const meshHelper = new MeshHelper({
mainClass: "", // default "js-grid-helper"
});
Selector of your grid's container, void or columns. These selectors are used to compile helper-relevant styles.
const meshHelper = new MeshHelper({
containerClass: "", // default "mesh-container"
voidClass: "", // default "mesh-void"
columnClass: "", // default "mesh-column"
});
isHidden type: Boolean
Sets the helper's initial visibility.
const meshHelper = new MeshHelper({
isHidden: false, // default true
});
Remembers the visibility state in a session cookie
const meshHelper = new MeshHelper({
useCookie: false, // default true
});
Generated the DOM for you
const meshHelper = new MeshHelper({
generateDOM: false, // default true
});
Set the number of columns.
Only required when DOM gets generated.
const meshHelper = new MeshHelper({
columns: 12, // default 12
});
Define the viewports your grid use.
Only required when DOM gets generated.
const meshHelper = new MeshHelper({
viewports: ["sm", "md", "lg"], // default ["sm", "md", "lg", "xl"]
});
Sets the colors for gutter and column
const meshHelper = new MeshHelper({
columnColor:"#ff000022", // default "#24a2d824"
gutterColor:"#ff00ff22", // default "#24a2d824"
});
Key char to toggle the helper's visibility.
const meshHelper = new MeshHelper({
key: 'x', // default "h"
});
In case you don't want to let the script generate the DOM for you.
<div class="js-grid-helper">
<div class="container">
<div class="row">
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1"></div>
</div>
</div>
</div>
import MeshHelper from 'mesh-helper';
...
const meshHelper = new MeshHelper({
isHidden: false,
trigger: 'b',
target: 'js-grid-helper',
containerClass: '.container',
voidClass: 'row',
columnClass: 'col'
});