1. Web Design
  2. Stylus

Six Awesome Things You Can Do with Kouto Swiss for Stylus

Read Time:6 minsLanguages:

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: meyer-reset()

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.

Kouto-Swiss includes a font-stack() mixin that gets its font stack information from, by Denis Leblanc, and lets you easily output font stacks based on popular font families.

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:

  • Analogous
  • Monochrome
  • Split Compliments
  • Triad
  • Quad

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

CSS animation, much like CSS shapes, is one of the most useful new tools in our web design arsenal. Elements that previously would have needed Flash or JavaScript can now be brought to life with nothing but pure CSS.

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.

Wrapping Up

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 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.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.