Illusion 2.0

In this version of Illusion we added two more time-saving mixins, some powerful mixin options and even more flexibility.

Here is a complete overview what you can expect in this release.

New mixins

Two new mixins are added to save you even more time!

1. row mixin

The row mixin is the mixin for the lazy. This mixin enables you to quickly set the proper styling for the parent element of columns. You can choose between a clearfix or flexbox row.

2. collapse mixin

A small but very powerful mixin to collapse gutters. This guy follows the responsive gutters so you just have to set which side(s) to collapse.

Collapsing left and right gutters

Collapsing left and right gutters

Custom gutter values

Some of our grid mixins got a new powerful option; a custom gutter option. Normally the gutter follows the responsive gutters set in variables, but now you have the option to set a custom gutter at the @include level. Meaning that Illusion will still do the hard column calculations, but it uses your custom gutter which can be anything from pixels to viewportwidth units!

.foo {
  @include span(6, $gutter: 2vw);
.foo {
  width: calc((100% - 2vw) / 2);
  margin-left: calc(2vw);
  float: left;

.foo:first-child {
  margin-left: 0;

.foo:last-child {
  margin-right: -1px;

Improvements & Fixes

We renamed some variables. Some to be shorter, others to be more representative of what they do.

There was a small bug in the svg-background mixing causing some svg’s to not display properly in some browsers. That’s all fixed now.

We also made the $multiplier (used to be $amount) variable less trigger happy.

Lastly we improved the default font stack variable.

Download and get involved

Being open source means that our code is publicly available and free for you to use, study, change and share. There is no license fee. There is no vendor lock-in.

You found a bug? Have a great idea? Go to our issue tracker and create a new issue, then start working on it. Or consider working on an existing issue.