lintel-contrib-grid

Grid for lintel.

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.

Variables

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

$grid-columns

Default value: 12

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

$grid-gutter

Default value: 30px

Change the gutter for the default grid.

$grid-breakpoint-min-map

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

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

$grid-container-base-max-width

Default value: $screen-lg-max

Default container max-width.

Mixins

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 { ... }
...

Examples

Base

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

Smaller Container

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

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

Offset

<div class="container">
  <div class="row">
    <div class="col-md-4">...</div>
    <div class="col-md-8">...</div>
  </div>
  <div class="row">
    <div class="col-md-8 col-md-offset-4">...</div>
  </div>
</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>
  </div>
</div>

Contributing

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.

License

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