BEMish grid component
CSS HTML
Latest commit 9d59d0d Jun 12, 2015 @MoOx MoOx Merge pull request #11 from cameronjroe/upgrade-cssnext
upgrade cssnext from 0.4.0 to 1.6.0
Permalink
Failed to load latest commit information.
lib Added: flexbox Grid May 29, 2015
test update org prefix to `r` Nov 8, 2014
.editorconfig init Oct 24, 2014
.gitignore init Oct 24, 2014
CHANGELOG.md 1.0.0 May 29, 2015
LICENSE update org prefix to `cssr` Oct 27, 2014
README.md Added: flexbox Grid May 29, 2015
flex.css Added: flexbox Grid May 29, 2015
index.css Added: flexbox Grid May 29, 2015
package.json upgrade cssnext from 0.4.0 to 1.6.0 Jun 12, 2015

README.md

grid

BEMish grid component

Install

$ npm install cssrecipes-grid

Default grid implementation is using inline-block+font-size 0 method:

@import "./node_modules/cssrecipes-grid/index.css";

If you want, an alternative grid based on flexbox is available in cssrecipes-grid/flex.

@import "./node_modules/cssrecipes-grid/flex.css";

Both rely on same classes, so generic documentation below should works both implementations"

Advice: you can use size utilities from cssrecipes-utils for convenience.
It includes .r-(all|min|max)* classes used in the examples below to define grid cells width.

Recommanded install 👌

$ npm install cssrecipes-utils cssrecipes-grid
@import "./node_modules/cssrecipes-custom-media-queries/index.css";
@import "./node_modules/cssrecipes-grid/index.css";
/* all, max (desktop first), min (mobile first) */
@import "./node_modules/cssrecipes-utils/index.css";

/*
  Refer to cssrecipes-utils install doc to know more.
  https://github.com/cssrecipes/utils#install

  Or check examples below.
*/

Usage

First of all, you can override all these custom properties according to your needs (here are default values):

:root {
  --r-Grid-baseFontSize: 1rem;
  --r-Grid-gutter: 1rem; /* used for .r-Grid--withGutter */
}

Mobile-first

Include deps

@import "./node_modules/cssrecipes-custom-media-queries/index.css";
@import "./node_modules/cssrecipes-grid/index.css";
@import "./node_modules/cssrecipes-utils/lib/all.css";
@import "./node_modules/cssrecipes-utils/lib/min.css";

Define your Grid size

.r-Grid {
  width: auto;
}

@media (--r-minM) {
  .r-Grid {
    width: 30rem;
  }
}

@media (--r-minL) {
  .r-Grid {
    width: 50rem;
  }
}

/** and the rest of it */

Use your grid

<div class="r-Grid">
  <div class="r-Grid-cell r-all--1of2 r-minM--1of3 r-minL--1of4">
    <!-- your content-->
  </div>
  <div class="r-Grid-cell r-all--1of2 r-minM--2of3 r-minL--3of4">
    <!-- your content-->
  </div>
</div>

Desktop-first

Include deps

@import "./node_modules/cssrecipes-custom-media-queries/index.css";
@import "./node_modules/cssrecipes-grid/index.css";
@import "./node_modules/cssrecipes-utils/lib/all.css";
@import "./node_modules/cssrecipes-utils/lib/max.css";

Define your Grid size

.r-Grid {
  width: auto;
}

@media (--r-maxL) {
  .r-Grid {
    width: 50rem;
  }
}

@media (--r-maxM) {
  .r-Grid {
    width: 30rem;
  }
}

/** and the rest of it */

Use your grid

<div class="r-Grid">
  <div class="r-Grid-cell r-all--1of4 r-maxL--1of3 r-maxM--1of2">
    <!-- your content-->
  </div>
  <div class="r-Grid-cell r-all--3of4 r-maxL--2of3 r-maxM--1of2">
    <!-- your content-->
  </div>
</div>

Without responsive

Include deps

@import "./node_modules/cssrecipes-grid/index.css";
@import "./node_modules/cssrecipes-utils/lib/all.css";

Define your Grid size

.r-Grid {
  width: 50rem;
}

Use your grid

<div class="r-Grid">
  <div class="r-Grid-cell r-all--1of4">
    <!-- your content-->
  </div>
  <div class="r-Grid-cell r-all--3of4">
    <!-- your content-->
  </div>
</div>

Testing

To generate a build:

$ npm run build

To generate the testing build.

$ npm run build-test

Basic visual tests are in test/index.html.

Contributing

Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.

$ git clone https://github.com/cssrecipes/grid.git
$ git checkout -b patch-1
$ npm install
$ npm test

Changelog

License


Acknowledgements

This grid module has been inspired by SUIT CSS components-grid & SUIT CSS utilities: size