Rebar Grid Framework

Getting Started

Rebar is aimed to make responsive development more efficient and keep CSS organised. The idea is to setup a list of breakpoints and assign container or grid settings for each breakpoint at one time. It uses padding for gutter and works the same way as the Bootstrap 3 grid system does. So if you're already familiar with Bootstrap, you will find Rebar is easy to use and far more flexible.

Rebar requires Sass 3.4 or Stylus and is incompatible with Libsass 3.1.

To start using Rebar, save container and grid settings in $container and $grid Sass maps or Stylus hashes, and then @import "rebar" after them. Rebar will generate the grid CSS code for you. For example:

Sass maps

// Default settings
// $mobile-first: true
// $max-width:    1170px
// $breakpoints:  481px 769px 993px
// $gutters:      20px 20px 26px 30px

$container: (
  ".container": ()
);
$grid: (
  ".third": (
    width: 1 1/2 null 1/3
  )
);

@import "rebar";

Stylus hashes

// Default settings
// $mobile-first: true
// $max-width:    1170px
// $breakpoints:  481px 769px 993px
// $gutters:      20px 20px 26px 30px

$container = {
  ".container": {}
};
$grid = {
  ".third": {
    width: 1 1/2 null 1/3
  }
};

@import "rebar";

you will get:

Please read the Guide to learn more about Rebar, or read the Settings to check out all available settings.