Illusion just got updated

It’s been almost 9 months since we first started working with Illusion and we never want to go back. In the meantime, some small issues have been fixed but no feature improvements were released… until now that is!

Today I’d like to introduce two exciting new mixins:

  • Fluid-type
  • Svg-background


The fluid-type mixin enables you to use fluid font-sizes on your websites. The great thing about this is that you don’t have to add media-queries for each font-size increase, but rather let the browser do the thinking and heavy calculating for you.

There are a lot of different “fluid typography” solutions out there, but we chose a very elegant and simple one. We wanted a solution with the following features:

  • It should work on old browsers as well as on new browsers
  • The code should be minimal
  • We wanted a minimum font-size until a specific breakpoint
  • We also wanted a maximum font-size from a specific breakpoint

The final code looks like this:

@mixin fluid-type(
  $min-value: $fluid-type-min-value,
  $max-value: $fluid-type-max-value,
  $min-screen: $fluid-type-min-screen,
  $max-screen: $fluid-type-max-screen) {
  font-size: $min-value;

  @media screen and (min-width: $min-screen) {
    font-size: calc-interpolation($min-screen, $min-value, $max-screen, $max-value);

  @media screen and (min-width: $max-screen) {
    font-size: $max-value;

It is using the calc-interpolation function to calculate the actual numbers we need for the fluid font-size. I found the original code on codepen, written by Mike.

The above code generates the following CSS code:

.foo {
  font-size: 16px;

@media screen and (min-width: 560px) {
  .foo {
    font-size: calc(1.724137931vw + 6.3448275862px);

@media screen and (min-width: 1024px) {
  .foo {
    font-size: 24px;

The beauty of this is the triple step progressive enhancement that is being used:

  1. We set a default font-size for old browsers
  2. For modern browsers that support calc() and vw units, we set the fluid font-size
  3. If the browser doesn’t support calc() and vw units, we set the max-value font-size on the max-screen breakpoint. This also ensures that on modern browsers as well, the font-size will stop growing after this breakpoint

More information about the fluid-type mixin.


The second cool mixin in this Illusion update enables you to use SVGs inside CSS while keeping the control over color and size. The main reason this mixin was created is to enable you to overwrite 3rd party generated code where background images or icon fonts are still being used to display graphical elements. Another use-case would be markup that’s being generated by the system you might be using. Simply put, if you can use a “real” SVG element, it’s almost always smarter to do that instead of using this mixin. But since that’s not always the case, we’re very happy to have a tool available to help us solve that problem.

Without further ado, here’s the code:

@mixin svg-background(
  $color: $svg-background-color, 
  $width: $svg-background-width, 
  $height: $svg-background-height, 
  $viewboxWidth: $svg-background-viewboxWidth, 
  $viewboxHeight: $svg-background-viewboxHeight, 
  $background-position: $svg-background-position, 
  $background-repeat: $svg-background-repeat) {
  @if $height == false {
    $height: $width;
  @if $viewboxHeight == false {
    $viewboxHeight: $viewboxWidth;
  background-image: url('data:image/svg+xml;utf-8,<svg style="fill: #{$color};" xmlns="" width="#{$width}" height="#{$height}" viewBox="0 0 #{$viewboxWidth} #{$viewboxHeight}">#{$svg}</svg>');
  background-position: $background-position;
  background-repeat: $background-repeat;
  background-size: #{$width}px #{$height}px;

Which in turn will compile the following CSS:

.foo {
  background-image: url('data:image/svg+xml;utf-8,<svg style="fill: black;" xmlns="" width="16" height="16" viewBox="0 0 24 24"><g transform="matrix(2.18679,0,0,2.18679,5.43964,-0.0421697)"><path d="M5.9 5.3L0.5 0.1C0.4 0 0.2 0 0.1 0.1 0 0.2 0 0.4 0.1 0.5L5.2 5.5 0.1 10.5C0 10.6 0 10.8 0.1 10.9 0.2 11 0.2 11 0.3 11 0.4 11 0.5 11 0.5 10.9L5.9 5.7C6 5.6 6 5.4 5.9 5.3Z"/></g></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;

A word of caution! Vector files with loads of data points can get quite heavy resulting in a “large” CSS file. Always make sure you optimize your vector files as much as possible before exporting them to SVG.

More information about the svg-background mixin.