Cask grid

project, open source, web design

Cask, A lightweight grid system built with calc

As I have worked on the web, I have always been fascinated with grid systems. While I have contributed to Neat and other libraries, they have never quite met my needs. More often than not, these libraries behave unpredictably, use things like nth-child selectors, and dump huge amounts of unnecessary code to your library.

During my work, I realized that a clever application of calc could be used to create a flexible and superior system with:

  • low selector specificity and no nth-child selectors
  • gutters that could be defined in relative values like 2% as well as fixed values like 2rem or 16px
  • simple and understandable codebase with a limited set of well focused features
  • generate as little code as possible maintaining flexibility and not over restricting objects
  • coexist seamlessly with flexbox objects and containers
  • be compatible with both Lib Sass and Ruby Sass

With these core features in mind, I created Cask. It’s available on Rubygems, NPM, and Bower. For installation instructions check out the guides overs at

More at I really love this project and I hope you do too. 😘

section {
  @include grid-column(8);

aside {
  @include grid-column(4);