Meet Taco, a CSS grid systems generator

Published 07/01/2015

CSS grid systems are incredibly helpful. They are one of the key components to make your HTML & CSS clearer and more concise, as they get rid of a lot of sizing micro-management. In the past, I've built upon InuitCSS which is a great and simple grid. For all projects though, I always had to diverge a little bit from it - either in naming or outputted CSS. So I decided to wrap it into a simple library - enter Taco.

It goes a few steps further in flexibility: you have more control over naming, type of grid (float or inline-block) and it gives you the ability to output the minimal amount of CSS and classes so you can easily create multiple grid systems that can live next to each other.

I take a bit of a different approach to responsive classes: you get a function to create multiple column classes easily, so you can just put them under any media-query and voilà! Check out the website for examples and API.

I'm currently working on adding Sass & Less support as well as a test suite. I want to try to add flexbox support as well - although I'm not sure the same class structure that I've used for grids makes sense for flexbox as well (it would be really cool though to be able to flip between them as needed!).