<

Building a website using the ‘utility-first’ Framework- TailwindCSS.

Sep 22, 2020

A strong digital presence is a key in our highly competitive environment and this story is about a 2-week journey redesigning our Company and Product website. We applied the SCRUM framework to the 2-week sprint. our end-goal was to quickly design and get the website up and running. This blog post is all about the entire process from design to implementation.

Consenso Labs is a Blockchain Research and development lab where we confront ourselves to solve some of the most challenging finance, legal and economical use cases by utilizing the cutting edge technology platforms to achieve efficiency and the consensus among the disparate parties.

About Arbchain

DLT based platform that brings all the benefits of the decentralization to solve inefficiencies in the arbitration by providing authentic, privacy preserved dispute resolution with a self enforceable agreements embedded in the blockchain to automate several arbitration procedures and enforce arbitral awards.

Design Process

Since we had a limited period of time, The design process that we followed is the two stages of the design thinking process:

A wireframe is a simplified visual representation of a layout for a website or the screen of an application’s interface. Wireframes are like architectural blueprints. Usually, black and white illustrations, sometimes with bright marks or spots to outline specific areas or points to give a clear vision of the project structure and connections between the different parts.

First, we started off with low Fidelity wireframe then we translated into a High Fidelity mockup using Figma.

Implementation :

Previously, we were using a React UI Library called Antdesign. We wanted to pick a framework that was close to the final design as possible.

After our past experience with Antdesign, we felt we needed something that gave us full control of the look and feel of the website. At one point we considered just writing custom styles for the site, but quickly swayed away from that idea as that would be an extremely inefficient use of development time. We needed something that didn’t require us to write our own CSS in order to customize our look. That’s where we came to the decision to use TailwindCSS, a utility-first CSS framework for rapidly building custom designs.

As described on their website:

Tailwind CSS gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Tailwind is different from frameworks like Bootstrap, Foundation, or Bulma because it is not a UI kit, and it does not have default themes or UI components built-in. It is a very powerful framework in terms of customization because you can make any website you can imagine. this gives developers all of the building blocks they need to build bespoke designs without any annoying opinionated styles.

Another awesome resource we came across is Tailblocks which helped us in a rapid development of the website.  It has a collection of 20+ responsive layouts like a blog, pricing, e-commerce, and many more. It also includes a dark mode which you can include in your project.

Tailblocks

Why we chose TailwindCSS over Bootstrap or Bulma?

Why? Because it means less customization for us and less work. A CSS framework like Bootstrap, Bulma, or Material UI gives you lots of default CSS and JavaScript functionality out of the box including a huge list of components. These predesigned components might help you move quickly at first, but it will turn into a nightmare, later on, to get the exact outcome as design.

Even though Bootstrap is an older and consistent framework, Tailwind CSS is gaining popularity among developers. It was released less than 3 years ago and now the weekly download is hitting more than 438,000 as of 22-09-2020.



Here is the final outcome: you can visit the website here.

Arbchain 
Consenso Labs

Advantages of using TailwindCSS:

Rapid Development

In the past, our development flow looked likes this: tinker in the browser with a few classes, quickly add the rules to the stylesheet keep tinkering until we got it all right.

With Tailwind, we’ve entirely removed the writing CSS step. Additionally, we don’t have to keep selecting elements with the dev-tools to look at the styles panel in order to see what styles they have. Because we are using descriptive utility classes in the HTML, we can just read it and have a clear picture of the styles.

Built-in Design System

Tailwind allows you to configure all these values upfront (or provides the same defaults), as long as you stick to using your Tailwind classes, you have a pretty good start on a design system.

Responsiveness

Each Tailwind utility also comes in responsiveness, making it very easy to build responsive interfaces without ever leaving your HTML.

Tailwind uses {screen}: an intuitive prefix that makes it easy to pay attention to responsive classes in your markup while keeping the original class name recognizable and intact.

The only downside we noticed is, it is not suitable if you have a predesigned component or you have your own design system. There is no JavaScript. And because of that, you can easily bind it with any JavaScript framework of your choice.

Resources and Reference :

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.