A tiny yet powerful grid system
HTML CSS JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
test
.editorconfig
.gitattributes
.gitignore
bower.json
changelog.md
contributing.md
gulpfile.js
license.txt
package.json
readme.md

readme.md

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.

Installation

Install it using npm:

npm install mesh-grid

Or simply download the minified file and include it into your project:

<link href="styles/mesh.min.css" rel="stylesheet" />

Usage

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. 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-2017 Mercado Libre. Licensed under the MIT license.