GridsLite

A responsive grid system doesn't have to be complicated or full of unused styles. GridsLite is a lightweight and simple solution to responsive grids where you include the columns that you need and leave out the ones you don't. Also supports gutters for columns.

Add this line to your application's Gemfile:

gem 'grids_lite'

And then execute:

$ bundle

Or install it yourself as:

$ gem install grids_lite

Run this in your console

rails g grids_lite variables

Pick and choose which column stylesheets to include in your asset pipeline. base is not optional.

# app/assets/stylesheets/application.css

*= require "grids_lite/base"
*= require "grids_lite/col-1"
*= require "grids_lite/col-2"
*= require "grids_lite/col-3"
*= require "grids_lite/col-4"
*= require "grids_lite/col-5"
*= require "grids_lite/col-6"
*= require "grids_lite/col-7"
*= require "grids_lite/col-8"
*= require "grids_lite/col-9"
*= require "grids_lite/col-10"
*= require "grids_lite/col-11"
*= require "grids_lite/col-12"
*= require "grids_lite/col-13"
*= require "grids_lite/col-14"

Wrap your col- classes in a columns class. If you are using text inside your col- classes you will also need to set a font-size for the text somewhere inside for the text to appear.

Example 1

<div class="columns">
  <div class="col-1-1 col-1-2-med col-2-8-lrg">
    <div style="font-size: 20px">
      100% wide at mobile width, 50% wide at tablet width, 25% wide at desktop width and above
    </div>
  </div>

  <div class="col-1-1 col-1-2-med col-6-8-lrg">
    <div style="font-size: 20px">
      100% wide at mobile width, 50% wide at tablet width, 75% wide at desktop width and above
    </div>
  </div>
</div>

Example 2

<div class="columns">
  <div class="col-1-1 col-1-5-med">
    <div style="font-size: 20px">
      100% wide at mobile width, 20% wide at tablet width and above
    </div>
  </div>

  <div class="col-1-1 col-4-5-med">
    <div style="font-size: 20px">
      100% wide at mobile width, 80% wide at tablet width and above
    </div>
  </div>
</div>

Example using gutters

<div class="columns gutters">
  <div class="col-1-1">
    <div style="font-size: 20px">
      100% wide at mobile width and above
    </div>
  </div>

  <div class="col-1-1">
    <div style="font-size: 20px">
      100% wide at mobile width and above
    </div>
  </div>
</div>

To change media query breakpoints and gutter widths, change the sass variables in the generated file located at app/assets/stylesheets/grids_lite_variables.scss

which has these variables

$med-width: 768px;
$lrg-width: 1024px;
$gutter-width: 20px;

GridsLite uses display: inline-block to arrange the columns. To account for the default horizontal space between inline-block elements, GridsLite sets font-size: 0 using the columns class. This means that you MUST declare font-sizes for your text elements with classes, id's, inline or however you wish.

When using gutters, be aware a side margin is applied to that class and col- elements have side padding applied to them. It would be advisable when using gutters to not use any side margin/padding directly on those elements and instead use it above or below them in the dom hierarchy so no conflicts occur.

• Be able to nest columns within columns while using gutters and gutters not multiply on each level

Bug reports and pull requests are welcome on GitHub at https://github.com/milesstanfield/grids_lite. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

The gem is available as open source under the terms of the MIT License.