PostCSS Maze

A fully flexible mobile first grid to suit any design pattern.

Maze is a flexible and semantic mobile first responsive grid built with PostCSS. Maze is fully customisable and removes the reliance on .last-column classes by instead applying the margin to both sides of each element and adjusting the wrapper width accordingly.

Installation

npm install postcss-maze

Creating a grid

Firstly the wrapper is given a property of grid-container with a value of true.

.wrapper {
  grid-container: true;
}

This calculates the wrapper width based on the values assigned to the largest and smallest media queries, and adds a clearfix.

The max width is calculated accounting for the element margins...

.wrapper {
  max-width: 1030.2px;
  min-width: 260px;
  margin: 0 auto;
  box-sizing: border-box;
}

.wrapper::after {
  content: "" ;
  display: table;
  clear: both;
}

Each column is then created as a ratio at a set media query...

.four-elements {
  col-span: mobile(1,1);
  col-span: phablet(1,2);
  col-span: tablet(1,4);
}

.four-elements {
  float: left;
  box-sizing: border-box;
  margin-right: 0.5%;
  margin-left: 0.5%;
  width: 99%;
}

@media only screen and (min-width:30em) {

  .four-elements {
    width: 49%;
  }

}

@media only screen and (min-width:48em) {

  .four-elements {
    width: 24%;
  }

}

The above element will display one per row at mobile, two per row at landscape and 4 per row at tablet. The Mobile declaration is the default value and therefore is not rendered inside a media query.

Examples

.twelve-elements {
  col-span: mobile(1,1);
  col-span: phablet(1,2);
  col-span: tablet(1,4);
  col-span: desktop(1,6);
  col-span: wide(1,12);
}

.six-elements {
  col-span: mobile(1,2);
  col-span: tablet(1,3);
  col-span: desktop(1,6);
}

Settings

By default Maze works with 5 media queries and has a margin of 1%. These settings can be overridden with custom config.

All media query dimensions should be written in EM's, and margins as a percentage...

var processors = [
postcssmaze({
media: {
 mobile:    20,
 phablet:   30,
 tablet:    48,
 desktop:   63.750,
 wide:      80
},
settings: {
 margin: 10
}
}),

An example using Gulp as a task runner...

// CSS TASK
gulp.task('css', function () {
  var concat = require('gulp-concat'),
    postcss = require('gulp-postcss'),
    mqpacker = require('css-mqpacker'),
    postcssmaze = require('postcss-maze'),
    autoprefixer = require('autoprefixer');

  var processors = [
    postcssmaze({
      media: {
        mobile:    20,
        phablet:   30,
        tablet:    48,
        desktop:   63.750,
        wide:      80
      },
      settings: {
        margin: 10
      }
    }),
    mqpacker,
      autoprefixer({
        browsers: ['> 2%', 'IE >= 9', 'iOS >= 7'],
        cascade:  false,
        map:      true,
        remove:   true
    })
  ];

  return gulp.src('src/input.css')
    .pipe(postcss(processors))
    .pipe(concat('dist/output.css'))
    .pipe(gulp.dest('.'));
});

Support