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:
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:
The above code generates the following CSS code:
The beauty of this is the triple step progressive enhancement that is being used:
- We set a default font-size for old browsers
- For modern browsers that support
vwunits, we set the fluid font-size
- If the browser doesn’t support
vwunits, we set the
max-valuefont-size on the
max-screenbreakpoint. This also ensures that on modern browsers as well, the font-size will stop growing after this breakpoint
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:
Which in turn will compile the following CSS:
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.