Illusion, our SCSS base kit

One of our team mantras is: “If we are copy-pasting code, we are doing something wrong”. Essentially, DRY.

We found ourselves copy-pasting CSS (SCSS) from project to project even though we already used several libraries.

Our solution? We’ve created our own library: Illusion!

What is Illusion?

Illusion is an opinionated, mobile-first, progressive enhanced, accessible, SCSS base kit to kickstart your projects. It combines modern web-design philosophies to write consistent, maintainable and clean SCSS code in less time.

Illusion is built to be used on top of Modernizr and Normalize. When included, Illusion does nothing. Enable its base styling features by setting SCSS variables or use the mixins or functions library.

8 pixel responsive grid

One of the most important aspects of a website is the grid it’s based on. It can make a page feel balanced and in harmony when used right, but when used wrong a page may appear untrustworthy.

Intro to The 8-Point Grid System

Intro to The 8-Point Grid System

Illusion uses a grid that:

  1. Is based on an 8 pixel system
  2. Has responsive gutters ranging from 16px to 32px (can be overwritten)
  3. Is using calc() and pixels so vertical gutters follow horizontal ones
  4. Comes with an optional fallback for the <body> element to have a set-width

By placing everything on an 8 pixel grid you ensure that your design looks crisp on all screens. Even screens with a 1.5 device pixel ratio.

Intro to The 8-Point Grid System

Intro to The 8-Point Grid System


Illusion is very opinionated. We believe in certain values and philosophies. Illusion could be very useful to you if you share the same ideas:

  • Mobile first philosophy and design
  • Progressive enhancement
  • Accessibility
  • Maintainable CSS
  • Harmonized design

Not a believer? No hard feelings! Maybe Bootstrap, Foundation or UIkit fits you more.

Wanna give it a try? Check our documentation.