Grid Framework

I woke up the other weekend and thought to myself, “there aren’t enough CSS grids in this world, how can I fix that”. Instead of simply building yet another grid and in case you can’t find what you’re looking for in the existing solutions (Bootstrap, Foundation, Pure, 960 Grid System, Bourbon Neat to name a few), I built a framework so that you can generate the grid you want. Also I wanted to learn more about how grids work so the best way to learn is to dig in and build something. Grid Framework was born.

Most of those grids come with some predefined behavior that can be hard to workaround or with more (or less) features than you need. I started with the grid framework from Bootstrap and modified it until I had a highly customizable and easy to use framework.

Installation

There are more details on the GitHub page of the project but basically on only need to download _grid-framework.scss, import it into a file and define your grid.

@import "grid-framework";

@include make-rows;

@include make-grid(3, "xs");

@media (min-width: 480px) {
  @include make-grid(6, "sm");
}

@media (min-width: 768px) {
  @include make-grid(12, "md");
}

The example above builds a 3-columns grid on smaller devices, a 6-columns grid on slightly bigger devices and a 12-columns grid on everything else. You can go wild and build a 7-columns grid or multiple grids per breakpoint.

Proof-of-concept

To validate the framework, I set out to rebuild some popular grids using the framework. You can see examples for Bootstrap 2’s, Bootstrap 3’s and Pure’s grid in the examples folder.

Planned improvements

The framework is in a good state right now, I might try to make it possible to build semantic grids without generating class names and I will probably refactor the code to make it even easier to work with.

Right now, my focus will be on improving the documentation, making it easier to install (ex: a bower component or an npm package maybe) and adding versions to make it easier to update.