Mesh
A tiny yet powerful grid system.
Overview
Mesh is a 12-column grid system built to help you develop with ease. Key features:
- Mobile-fist and responsive.
- Fluid columns.
- Fixed gutters.
- Infinite nesting.
- ~541 bytes (minified and gzipped).
To all that, add progressive enhancement, since Mesh has width-agnostic columns to support those old browsers that don't know what media-queries are.
Usage
To get started just download the minified file and include it into your project.
<link href="styles/mesh.min.css" rel="stylesheet" />
How it works
It's important to keep in mind that:
- A row contains a given number of columns —up to 12.
- The size of each column can be defined for every breakpoint.
- Rows can only have columns as (first) child.
- Rows or columns should never be styled.
- Rows can be nested.
- The content goes inside the columns.
Examples
Let's see some examples.
-
A row with width-agnostic columns:
<div class="mesh-row"> <div class="mesh-col-4"> ... </div> <div class="mesh-col-4"> ... </div> <div class="mesh-col-4"> ... </div> </div>
-
Columns with different sizes for small and large breakpoints:
<div class="mesh-row"> <div class="mesh-col-s-12 mesh-col-l-3"> ... </div> <div class="mesh-col-s-12 mesh-col-l-9"> ... </div> </div>
-
A nested row:
<div class="mesh-row"> <div class="mesh-col-4"> <div class="mesh-row"> <div class="mesh-col-6"> ... </div> <div class="mesh-col-6"> ... </div> </div> </div> <div class="mesh-col-4"> ... </div> <div class="mesh-col-4"> ... </div> </div>
-
Row without gutter correction:
<div class="mesh-row no-reset"> <div class="mesh-col-6"> ... </div> <div class="mesh-col-6"> ... </div> </div>
You can see it in action on the test page.
Options
Size, keys and class names:
Size | Key | Applies | Class name |
---|---|---|---|
Agnostic | None | Always | mesh-col-* |
Smallest | xxs | ≥ 0px | mesh-col-xxs-* |
Smaller | xs | ≥ 320px | mesh-col-xs-* |
Small | s | ≥ 480px | mesh-col-s-* |
Medium | m | ≥ 768px | mesh-col-m-* |
Large | l | ≥ 1024px | mesh-col-l-* |
Larger | xl | ≥ 1200px | mesh-col-xl-* |
Customization
If you want to customize Mesh, you only need Node ^0.10.0 and Gulp ^3.9.0 up and running.
Since the only thing that you'll probably be modifying is the $mesh
map and
its values, we assume you know how to do it. Knock yourself up!
Browser support
We aim to support the following browsers:
- Chrome latest 5
- Firefox latest 5
- Internet Explorer 8+
- Opera latest 5
- Safari latest 5
- iOS Safari latest 5
- Android Browser 2.1+
While Mesh might work fine in other browsers or older versions, we can only ensure that it will do it seamless in the above.
Contributing
If you find a bug, please report it on the [issue tracker] (https://github.com/mercadolibre/mesh/issues). In case you want to fix an issue or implement a new feature, make sure that you have read the contribution guidelines first.
License
© 2013-2016 MercadoLibre. Licensed under the MIT license.