www.postcss-mesh.org Open in urlscan Pro
2a01:238:20a:202:1157::  Public Scan

Form analysis
0 forms found in the DOM

Text Content

v1.1.8 2402
 * About Mesh
 * Getting Started
 * Unique Selling Points
 * Components
 * Nesting
 * Ordering
 * Properties
 * Source



Mesh
v1.1.8

The powerful Grid System for PostCSS

Documentation Source


DOCUMENTATION


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-mesh


GRID SETUP

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.

 * SCSS
 * HTML

 * @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;
   
   }
   
   }

 * <!--
   
   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.

 * SCSS

 * // 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;
   
   }

REGULAR



RESPONSIVE




GUTTER ON OUTSIDE

Allows you to toggle the container's padding which is based on the gutter size.

 * SCSS

 * // default is 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.

 * SCSS

 * // min-width || max-width
   
   // default is 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.

 * SCSS

 * // 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.

 * SCSS

 * // default is 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.

 * SCSS

 * // 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.

 * SCSS

 * // 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.

 * HTML

 * <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.

 * HTML

 * <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.

 * HTML

 * <!--
   
   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.

 * HTML

 * <!--
   
   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.

 * HTML

 * <!--
   
   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.

 * HTML

 * <!--
   
   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.

 * HTML

 * <!--
   
   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.

 * HTML

 * <!--
   
   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.

Property Description Options Overwrite column-align Aligns all columns at the
top, middle or bottom of a void. top || middle || bottom

column-count Defines how many columns fit in one void. number

compile If set to false Mesh won't compile classes of the current grid. true ||
false

container-base-width-unit Defines the container's width unit. % or vw

container-width Defines the container's max-width property for current viewport.
px or %

debug If set to true Mesh generates excluded classes and extends the style with
debug-property of debug-value true || false

debug-property A valid CSS Property for debug style extension. e.g. border

debug-value A value for the given debug-property e.g. 1px dotted red

display-type Defines if the grid is inline-block, float or flex based.
inline-block || float || flex

exclude-columns Given integers define spans to exclude from column classes. int,
int

exclude-offsets Given integers define spans to exclude from offset classes. int,
int

exclude-pulls Given integers define spans to exclude from pull classes. int, int

exclude-pushes Given integers define spans to exclude from push classes. int,
int

gutter Sets the gap between columns. px

gutter-on-outside If set to false the container won't have a padding. true ||
false

name Sets the grid's name and adjusts the component's class prefix. string

naming-column Given string replaces column in all generated selectors. string

naming-container Given string replaces container in all generated selectors.
string

naming-offset Given string replaces offset in all generated selectors. string

naming-pull Given string replaces pull in all generated selectors. string

naming-push Given string replaces push in all generated selectors. string

naming-void Given string replaces void in all generated selectors. string

query-condition Using this property you can decide if you want the compiled
styles to be mobile first or desktop first. min-width || max-width

responsive-gutter If set to true the gutter scales as the container grows. true
|| false

use-name-prefix If set to false Mesh won't use the grid's name as a class
prefix. true || false

viewport Defines the screen's width at which a new media-query should be
initiated. px


column-align only works using inline-block or flex as display-type.

If you set display-type to inline-block the void component gets font-size: 0; to
remove the little default gap between inline-block elements.

 * About Mesh
 * Getting Started
 * Unique Selling Points
 * Components
 * Nesting
 * Ordering
 * Properties

Developed by Marten Zander © 2019