Taco

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

or

$ npm install taco-grids

You will then need to @import the taco.styl file into your project.

Taco outputs several types of classes to build your grids:

• wrapper - the container for your grid
• item - contains the common CSS for columns
• widths - are classes with just the width property, setting the item's width
• row - needed only for the float grid, a wrapper for a row of columns
• hidden - this class let's you hide the column. It's primary use is for responsive grids (see below for example usage)

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 min-width and max-width on it to define the acceptable range of the columns stretch.

For an inline-block grid we don't always need the row element:

  taco-generate-grid(type: "inline-block")

<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>

The 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.

taco-generate-grid

Generates a wrapper, item and width classes.

params:

• basename

  string

  The core part of the class name. All prefixes and suffixes will be appended to it.

  default: grid

• itemname

  string

  The string that will be appended to the item class.

  default: -item

• type

  string

  How columns are made - currently supports "float" and "inline-block". Read more in the floats vs inline-block section.

  default: float

• valign

  vertical-align

  This will set the vertical align align property for items.

  default: top

• columns

  integer, list of integers, range

  What widths should be created for items. Each number represents a set of fractions:

  taco-generate-grid(columns: 10)

  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:

  taco-generate-grid(columns: 2..10)

  default: 2..10

• gutter

  integer

  The width of the gutter between columns in pixels.

  default: 24

• widths

  boolean

  Should width classes be generated.

  default: true

• inline-block-hack

  string

  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).

  default: "margin"

taco-generate-widths

Generates only the width classes. This function is used internally by taco-generate-grid

params:

• columns (required)

  integer, list of integers, range

  This works same as for taco-generate-grid.

• name (required)

  string

  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 basename and itemname.

• hidden

  string

  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.