skip to main content

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

The grid

The flexibility of the grid allows it to be easily modified to suit any layout:

  • The total-grid-columns variable is set to 12 by default but can be edited as a whole or on a row by row basis
  • The gutter variable is set to 2% by default but can be adjusted as a whole or on a row by row basis
  • The fold variable defines the way the columns collapse on smaller devices, It is set to left by default but can be switched to right.
  • The push variable is set to 0 by default but can be edited as a whole or on a row by row basis
  • By default Maze works with 5 media queries and has a margin of 1%. These settings can be overridden by editing the configuration file.

View a demo of Maze

The CSS

Firstly the wrapper is given a property of grid-container with a value of 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 {
grid-container: true;
}
.wrapper {
  max-width: 1030.2px;
  min-width: 260px;
  margin: 0 auto;
  box-sizing: border-box;
}
 
.wrapper::after {
  content: "" ;
  display: table;
  clear: both;
}

Each element 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%;
  }
}

View Maze CSS

The code

Maze comes with default settings that can be overridden in the settings:

// Default Media Config
var mediaConfig = {
    mobile:  20,
    phablet: 30,
    tablet:  48,
    desktop: 63.750,
    wide:    80
};

// Default Settings Config
var settingsConfig = {
    margin: 1
};

The width of each element is calculated in the PosCSS file with the function below:

 // Width Function
    var columnWidth = function (coloumnSpan, totalColoumns) {
        var unitWidth = totalColoumns / coloumnSpan;
        var width = (100 - unitWidth * settingsConfig.margin) / unitWidth;
        return width + '%';
    };
 // Set widths - Add to the max width to compensate for margin
    var maxWidth = mediaConfig.wide + mediaConfig.wide / 100 *
      settingsConfig.margin;
    var minWidth = mediaConfig.mobile; /* Set min width with scroll bar */

View the Maze source code