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