Kouto Swiss is a fantastic new mixin library for the CSS preprocessor Stylus, created by developers Pierre-Antoine Delnatte and Thierry Lagasse of KRKN. It aims to be the standard toolkit that Stylus developers turn to, and after taking a good look through its array of functionality I can say it would certainly be worthy of that role.
New to Stylus?
If you’re unfamiliar with Stylus, or CSS preprocessors, you can get an intro via my article Why I Choose Stylus (And You Should Too).
And while you’re at it, watch the first two videos of my new course Become a CSS Superhero with Stylus. They’re both free, and will walk you through what Stylus is and how you can get yourself setup to work with it easily.
Installing Kouto Swiss
To install Kouto Swiss I recommend first installing Node.js, then running the command
npm install kouto-swiss via a terminal or command prompt inside your project folder. I’ve found this to be the easiest way to ensure dependencies are met.
Then add this line at the top of your Stylus file and you’re ready to go:
“Kouto Swiss” means “Swiss Army Knife”, and in the spirit of that famous little emblem of concentrated usefulness, this mixin library has crammed a whole lot of helpful things into one small package.
There are far too many features in Kouto Swiss for us to cover them all here, so today we’re going to start by looking at a selection of six of its functions in action.
1. Normalize Via One Line
Including Normalize.css in your projects is, I would suggest, a necessity.
When you use a CSS preprocessor that typically means finding an actively maintained version of Normalize.css which has been rewritten into your language of choice, downloading it into your project, importing it, keeping an eye out for updates then reimporting it when required.
When you’re using Kouto-Swiss on the other hand, you don't have to worry about any of those steps. Just add a single line to your Stylus file:
The full code of Normalize.css will be written straight into your stylesheet:
With this approach you need only keep your Kouto-Swiss up to date and Normalize.css will be taken care of right along with it. No extra files, packages or imports to worry about; the whole process is handled via that one line of code.
If you don’t actually like to use Normalize.css and perhaps prefer Eric Meyer's CSS reset, there’s a “one liner” you can use for that too:
2. “Can I Use” Vendor Prefixes & Fallbacks
Unless you stick to older CSS properties, you’re going to have to use vendor specific prefixes and fallbacks on several occasions in order to output cross browser compatible code. However, maintaining your vendor prefixes and fallbacks can be tricky as requirements on where they should be used are always changing.
Kouto-Swiss deftly handles this issue by communicating with the Can I Use website to keep all your vendor prefixes and fallbacks up to date for you. You can add your own settings as to which browsers and versions you want to support, or just go with the defaults coming from the “Can I Use” recommendations.
There are no special steps to have your code automatically made cross browser compatible. Just write your Stylus code as though all its properties were already universally supported:
The resulting CSS will have the correct vendor prefixes and fallback code in place:
Check out the full list of CSS properties supported by the vendor prefixing and fallback functionality.
3. Instant CSS3 Triangles
The relatively new ability to generate shapes with CSS3 has been super useful for adding icons and basic illustrations to sites in a way that loads fast, is easy to color and can be scaled via code edits alone.
CSS3 triangles are one of the shapes that can be created, yet trying to write the code to output them with the size, color and angle you want can be tricky.
Kouto-Swiss includes an incredibly easy to use
triangle() mixin that takes all the trial and error out of triangle generation, as you simply tell it which direction you want the triangle to point, how big it should be, and what its foreground and (optional) background colors should be.
For example, drop a few
triangle() mixins with some predefined color variables like so:
Then your CSS triangle creation becomes a walk in the park:
4. Font Stacks
It’s always good practice to include a font stack against every font-family declaration in your stylesheet so if your preferred font is missing, for whatever reason, you have some alternatives in place. That said, figuring out which fonts are sufficiently similar to one another to form a good stack can be a little laborious and difficult.
For example, the following Stylus code:
generates these complete font stacks:
Take a look at the full list of fonts covered by this mixin.
5. Automated Color Scheme Generation
Kouto Swiss has functions to create five different types of color schemes:
- Split Compliments
You feed the color scheme generating function a seed color and store the information returned against a Stylus variable. Between two to four colors will be returned, which you can then output in the following way:
In the code above I have used a blue color of
#3083bf and passed it through each of the five color scheme generation functions, which has then generated these color schemes:
If the seed color is then changed, a whole new set of color schemes can be generated from the same set of code. For example, changing to
#30bfb3 gives you:
You can read about exactly what each of the color scheme generation functions does in the documentation.
6. Pure CSS Keyframe Animation
At the moment though, cross browser CSS animation code needs a lot of vendor prefixes. By using Kouto Swiss
@keyframe functionality combined with the vendor prefixing we described above it becomes pretty straight forward to code up your animations. For example, these 29 lines of Stylus:
output the required 232 lines of CSS, which I think you'll agree would be a nightmare to write manually:
The resulting animation looks like this:
Again, check out the docs to read more about
@keyframe animation in Kouto Swiss.
Kouto Swiss is an excellent addition to the world of CSS development and I highly recommend taking it out for a test drive.
It has a long list of extra features that we haven't even touched on so head over to http://kouto-swiss.io to get the full rundown.
And remember, if you need a little help kicking off your Stylus development, watch the two free videos from my course to learn how to get started: Become a CSS Superhero with Stylus.