on_the_rocks

Bourbon On The Rocks

on_the_rocks is a rails plugin which includes a fluid grid system built on top of bourbon. It is based on an opinion: the gutter width (space between columns) of a grid should always be fixed and proportional to the font size. The fancy css3 calc function allows to do that quite easily. What on_the_rocks provides is sass mixins which use this function to place your elements on the grid, and declare fallbacks depending on the viewport size for browsers that don't support the function.

Installing

In your Gemfile:

gem 'on_the_rocks'

At the top of your stylesheet:

@import 'on_the_rocks';

Usage

First, override the default settings if you need to:

$gutter: em(24);
$columns: 12;
$max-width: em(1080);
$fallback-width: em(1000);

Then define your breakpoints:

$small-pc: breakpoint($max-width: 1080px, $fallback-width: em(768))
$tablet: breakpoint($max-width: 768px, $fallback-width: em(480));
$mobile: breakpoint($max-width: 480px, $fallback-width: em(400), $columns: 6)

Keep in mind that the $gutter and the $fallback-widths must be expressed with the same unit. Here I used the em function of bourbon (which converts pixels to ems) but that's just my preference, use the unit you like to use.

Now's time to set your main container:

.container {
  @include container;
}

And finally set up your grid:

.navbar {
  @include columns(4);
  @include media($mobile) {
    @include columns(6);
    @include omega;
  }
}

.content {
  @include columns(8);
  @include omega;
  @include media($mobile) {
    @include columns(6);
    @include omega
  }

  .left {
    @include columns(4 of 8);
    @include media($mobile) {
      @include columns(3);
    }
  }

  .right {
    @include columns(4 of 8);
    @include omega;
    @include media($mobile) {
      @include columns(3);
      @include omega;
    }
  }
}

Contributing

Please create an issue if you encounter a bug. Any pull request is welcome ;)