Taco is a small library for building CSS grid systems.
It follows a few tried and tested conventions for building grid systems, very similar to great frameworks like InuitCSS and Bootstrap. It outputs a familar grid based on inline-blocks or floats, and gives you a lot of control about how many classes will be output and their naming. It tries to use the minimal and most predictable CSS to achieve a column layout.
Taco uses Stylus which is available as an npm package:
$ npm install -g stylus
If you are unsure what npm is, head on to the npm docs page.
Taco itself is available on bower and npm
$ bower install taco
$ npm install taco-grids
You will then need to
taco.styl file into your project.
Taco outputs several types of classes to build your grids:
With the defaults, you would markup a Taco grid like this:
// Don't forget to actually generate your grid first taco-generate-grid()
<div class="grid"> // wrapper <div class="grid-row"> // row <div class="grid-item grid-item-2-3"> // item + width Main </div> <div class="grid-item grid-item-1-3"> Sidebar </div> </div> </div>
This grid would span the whole width of the container it is within. Normally, you would put a
max-width on it to define the acceptable range of the columns stretch.
inline-block grid we don't always need the row element:
<div class="grid"> <div class="grid-item grid-item-2-3"> Main </div> <div class="grid-item grid-item-1-3"> Sidebar </div> </div>
You can customize the generated grid - from the number of columns to the class names. Check out the API for details. The most important parameter is probably
columns, with lets you specify what width classes you will have available. By default, you will have fractions ranging from one half to one-tenth. Let's say we only want a three column grid. We can do:
taco-generate-grid(type: "inline-block", columns: 3)
Let's say now we want to change the width of the "Sidebar" column when the viewport is smaller then 768px. Taco does not pregenerate any classes for that. Instead, you generate more width classes with a prefix, under a media query:
@media (max-width: 768px) taco-generate-widths(columns: 3, name: "lap-grid-item", hidden: "hidden-")
This will generate similar width classes that
taco-generate-grid would, but now they will be prefixed with "lap-". Now we can make both columns full width on smaller viewports:
<div class="grid"> <div class="grid-item grid-item-2-3 lap-grid-item-full"> Main </div> <div class="grid-item grid-item-1-3 lap-grid-item-full"> Sidebar </div> </div>
We can also hide the sidebar completely with the
hidden-lap-grid-item class which gets generated only if we pass the "hidden" param:
<div class="grid"> <div class="grid-item grid-item-2-3 lap-grid-item-full"> Main </div> <div class="grid-item grid-item-1-3 hidden-lap-grid-item"> Sidebar </div> </div>
display: inline-block property has a couple of problems - if you try to make a grid with them, you will notice that you have extra space between elements. There are many ways to fix that - head on to this excellent CCS Tricks to find out how.
Taco uses the negative margin method - it's the least intrusive, although as well the least precise. I used to prefer the letter-spacing method, but browsers are quite inconsitent with subpixel rendering (especially Webkit) and end up losing a pixel or when using relative values. This means that inline-block grids often end up missing a pixel or two, which the depending on your design might be a problem or not. This is why Taco defaults to a floated columns grid instead.
I am not a big fan of floats - I think they are used in CSS for too many things they were never meant to be used. They create weird layout issues in complex CSS. Inline-block is a lot more predictable, as well as giving you vertical-align, which is a fantastic little property.
Generates a wrapper, item and width classes.params:
The core part of the class name. All prefixes and suffixes will be appended to it.
The string that will be appended to the item class.
How columns are made - currently supports "float" and "inline-block". Read more in the floats vs inline-block section.
This will set the vertical align align property for items.
integer, list of integers, range
What widths should be created for items. Each number represents a set of fractions:
Will create a set of fractions of 10 (1-10, 2-10 etc).
taco-generate-grid(columns: 2 4 7)
A set of fractions of 2, 4 and 7 (1-2, 1-4, 2-4, 1-7 etc). You can also pass in a range:
The width of the gutter between columns in pixels.
Should width classes be generated.
Should the inline-block hack be used. At the moment this suports "margin" which adds a -4px
margin-left. Pass "none" to not use any hack (usefull when you are minifing HTML and don't need it).
Generates only the width classes. This function is used internally by
integer, list of integers, range
This works same as for
The class the name to which the width fraction will be appended ("-1-10" etc). Within
taco-generate-grid this is a combination of the
If given, it will create a class prefixed with the string and with the
display: none property. This is useful for creating classes ("hidden-palm-grid-item") that will hide an element under media queries.