The Evolution of Nimiq UI

When I started building the Nimiq Developer Center, I realised that I was building the same components over and over again. I was building the same links as in the Nimiq Website, using the same colours as in the Crypto Map, and using the same icons as in every other application on Nimiq. I had had enough. I wanted to build a library that would help me build interfaces faster and more consistently.

This was not a new problem, I had tried to solve it in the past. I created the Nimiq TailwindCSS Theme, but it was not enough. I was building the house from the roof up. So I took a step back and started building the foundation.

The new Nimiq CSS library

At the moment we don’t have a design system for Nimiq, but we have a lot of applications and websites that use the same design rules. So I decided that someone had to lay the first brick and started to build the Nimiq UI library. Hopefully this will lay the foundation for a future design system at Nimiq.

However, I didn’t want to start from scratch. I wanted to learn from our current Nimiq CSS Framework as a starting point. This library was created at the very beginning of Nimiq, and is mainly focused on the Nimiq Wallet interface. Since then, the Nimiq Apps have evolved to create a more versatile and modern interface and it no longer meets the needs of the current Nimiq apps.

The core principles of the library are simplicity and composability.

I wanted to make it stupidly simple. A class should only do one thing. The key here is that you get the power from combining classes.

This is the same philosophy that Tailwind CSS and Vue follow, and I love it. It allows developers to build complex interfaces with simple building blocks.

Let’s look at an example of what I mean. Let’s start with an ordinary pill:

As you can see, the nq-pill-tertiary class just adds the minimal styles to make it look like a pill. We also added the nq-pill-sm class to reduce the padding and font-size, but you are not limited to the defaults provided by the library. You can override them by adding your own styles.

Now let’s have a look at this other component:

At this point you might be thinking that this is just a link with an arrow on it. And you would be right. This is the essence of the library: Simplicity.

But under the hood, I use a few little tricks to make this component simple and powerful:

1. I use the arrow class for both elements and automatically change the orientation of the arrow depending on the href attribute.
2. I use the ::after pseudo-element to add the arrow icon as a background image with a mask.

As you can see, these components are simple in themselves. They only focus on one thing, but the great thing about composability is that we can combine these little utilities to make something more complex:

Wait, wait, wait. Did you see that? Let’s try something else:

This is the power of composability.

This library is not yet ready for production use. We don’t even have proper documentation for it, although we do have a demo where you can see all the components and utilities that are included in the library. I plan to release it soon, but as the saying goes, “eat your own dog food”, and therefore I want to continue testing this library in the Nimiq Developer Center and the Crypto Map to see how it works in a real project. You can track my progress in this PR.

Nonetheless, if you are curious you can start using this library in your project by installing it from npm:

npm install nimiq-css # The library might be renamed in the future

And then import it into your CSS file:

@import 'nimiq-css/css/index.css';

/* Same as */
@import url('colors.css') layer(nq-colors);
@import url('preflight.css') layer(nq-preflight);
@import url('typography.css') layer(nq-typography);
@import url('utilities.css') layer(nq-utilities);

I strongly encourage the use of CSS layers to avoid specificity issues and make the library more flexible.

The library is divided into four parts, each with its own CSS layer to avoid specificity issues.

1. Preflight: Sets a basic Nimiq style. This is not a reset, but a set of basic styles to add the feel of Nimiq. I leave it up to the developer to decide if they want to use a reset library, which I highly recommend anyway.
2. Colours: Provides a vivid Nimiq colour palette, with support for light and dark modes through custom CSS properties and the dark class.
3. Utilities: Provides utility classes for creating UI elements such as buttons, input and links, as we saw earlier.
4. Typography: A set of typographic utilities to improve text styling. The CSS structure is heavily inspired by the Tailwind Typography Plugin. Adding a prose class to a container will automatically style the text inside it.

A fun little easter egg is that Chat GPT made me a story with different typography elements to help me build the typography section of the library. You can go to the demo, click in “Typography”, and read the interesting story.

If you want to know more about the library, you can check the GitHub repository. Any feedback is welcome.

I also wrote about my adventure in building the Nimiq Icons library, which is a continuation of this post. I suggest you read it to get the full picture.

Happy coding!