How to get column width values when using Neat

Bourbon and Neat have been my CSS libraries of choice these days and the onslaught of framework lock-in is enough to warrant its own blog post. Instead, I'm going to talk about getting column width values when using Neat.

Getting the column width values used by @include span-columns(3) is pretty trivial and is done with a private function of Neat's grid framework called flex-grid().

Use Case

In my case there is an element on the left edge of the viewport and I wanted it to be "off canvas". Naturally, Neat provides a function that lets you shift() columns left or right by a given positive or negative number of columns. It only uses CSS margin attribute. Because I am using absolute positioning the margin attribute just doesn't make syntactic sense.

Enter flex-grid(). Like shift(), it allows you to enter a positive or negative number of columns.

.some_element {
  @include span-columns(3);
  position: absolute;
  left: flex-grid(-3);
}

It outputs the correct percentage value used by the span-columns() mixin. But what if I'm not using the default number of columns? That's simple, flex-grid() also allows you to pass it a second argument which gives it context. Let's say the parent of .some_element is 10 column grid.

.some_element {
  @include span-columns(3);
  position: absolute;
  left: flex-grid(-3, 10);
}

Easy peasy. These private functions are not defined in their documentation and for good reason. Without diving into Neat's source code on Github, it's difficult to grasp what flex-grid() does. Thus this blog post.

Happy coding.

November 27, 2015