Project

grids_lite

0.0
No commit activity in last 3 years
No release in over 3 years
A lightweight use-it-as-you-need-it responsive grid system.
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Development

Runtime

>= 0
 Project Readme

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.

Installation

Add this line to your application's Gemfile:

gem 'grids_lite'

And then execute:

$ bundle

Or install it yourself as:

$ gem install grids_lite

Setup

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"

Usage

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>

Customize

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;

Notes

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.

Future releases

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

Contributing

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.

License

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