Grid for lintel.

Usage no npm install needed!

<script type="module">
  import lintelContribGrid from '';



Grid for lintel.

npm Bower

Getting Started

This module requires Lintel.

If you haven't used Lintel before, be sure to check out the Getting Started guide, as it explains how to install and use this module. Once you're familiar with that process, you may install this module with this command:

bower install lintel-contrib-grid --save

Once the module has been installed, you will have to load it in your main SASS file:

@import "bower_components/lintel-contrib-grid/sass/grid.scss"

You can use wiredep or grunt-wiredep to automatically inject files in your build process.


Check the vars file in the sass folder to see the full list of variables you can customize.


Default value: 12

Changes the number of columns for the default grid. Note: you can create additional grids using mixins (see below).


Default value: 30px

Change the gutter for the default grid.


Default value: map-merge(("xs": 0), $screen-min-map)

A SASS map of the min-width of each breakpoint.


Default value: $screen-lg-max

Default container max-width.


Check the mixins file in the sass folder to see how you can extend this module.

make-columns($columns, $gutter, $name, $suffix)

Default $columns: $grid-columns
Default $gutter: $grid-gutter
Default $name: col
Default $suffix: null

Creates a new set of columns for each breakpoint.

  • $columns: number of columns
  • $gutter: width between columns
  • $name: column class name prefix
  • $suffix: whether to add -of-* where * is the total number of columns to each class
/* SASS */
@include make-columns(
  $columns: 10,
  $gutter: 20px,
  $name: "colten",
  $suffix: true
/* CSS */
.colten-xs-1-of-10 { ... }
.colten-xs-2-of-10 { ... }



<div class="container">
  <div class="row">
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>

Smaller Container

Use .container-* where * is the name of each breakpoint.

<div class="container container-sm">...</div>


<div class="container">
  <div class="row">
    <div class="col-md-4">...</div>
    <div class="col-md-8">...</div>
  <div class="row">
    <div class="col-md-8 col-md-offset-4">...</div>

Pull / Push

<div class="container">
  <div class="row">
    <div class="col-xs-8 col-xs-push-4"><z>right</z></div>
    <div class="col-xs-4 col-xs-pull-8"><z>left</z></div>


In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.


Copyright (c) 2015 Marius Craciunoiu. Licensed under the MIT license.