Utility First CSS Leads to Rapid Prototyping

Author profile picture

@hrishikeshHrishikesh

Co-founder, Remote Resources & Remote Clan

LinkedIn social iconTwitter social icon

I am the co-founder of Flexiple and Remote Resources. In this post, I describe why I chose to use a utility-first CSS framework to make my website’s UI in a quick, strong and low-routine maintenance way.

Products Briefing

We are creating an distinctive remote do the job focussed community, The Remote Clan. The unexpected remoteness scenario thanks to COVID-19 works strongly in our favour and for this reason, we preponed our start to May possibly 2020.

Over the previous 1.5 decades, we’ve labored tricky to make an audience at Remote Resources and have a stable foundation of 4000 publication subscribers, 20,000 regular visits, 2 seasons of podcast & 25 stories. The community will be built on best of this and for this reason, can not just be a basic MVP.

The specific transient appears like this –

Why Utility-First CSS

1. Rapid prototyping without worrying upfront about abstraction

I figured that utility classes are extremely handy when doing rapid prototyping, especially in the initial stages of app development.

My first priority is always to rapidly build custom UI elements on the page without having to worry about building CSS components from the word go. The latter approach often leads to premature abstraction i.e. building a component for a certain use-case and ending up never using it.

2. Extracting components when I need to

Once I am done adding these utility classes to multiple elements across pages and if I see a common set of utilities used, I can always extract them like this primary button on my website –

.btn-primary  
@apply font-bold py-2 px-4 border rounded border-azure-radiance-500 hover:border-silver-500 bg-azure-radiance-500 hover:bg-silver-500 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105

3. Customization to the core

A couple of days into building the website, I realize that the shades of gray across the pages are a little too dark.

I have an entirely new palette for gray and all I have to do is override the gray default in Tailwind.

theme:  
 extend:   
  colors:   
   'gray':      
    100: '#F9F9F9',     
    200: '#F0F0F0',     
    300: '#E7E7E7',     
    400: '#D6D6D6',     
    500: '#C4C4C4',     
    600: '#B0B0B0',     
    700: '#767676',     
    800: '#585858',     
    900: '#3B3B3B',    
       
    
  

It’s not just colors. I can practically override or extend any default in Tailwind, be it margins, padding, font, you name it.

4. Easily responsive

Tailwind provides four breakpoints (sm, md, lg, xl) and I like the fact that the breakpoints are mobile-first by default. So, unprefixed utility classes take effect on all screens while prefixed ones apply only at specified breakpoints and above.

For example, this code is for pages with a right sidebar –

<div class="w-full sm:w-1/4 sm:order-2">  
 <div class="sm:mt-16 mt-4">    
  <%= render "shared/right_sidebar" %>  
 div>
div>
<div class="w-full sm:w-3/4 sm:order-1">
 ..
div>

So, each and every of the divs occupy complete width on all screens except 640px and earlier mentioned (sm) exactly where the sidebar occupies 25% and the most important information can take up the relaxation.

Desktop Check out –

Cell Check out –

5. No have to have to identify lessons except for extracted elements

Just one thing that often irritates me any time I glimpse back again at the code for Flexiple is the naming of lessons. Names like ‘dont-acquire-our-term_text-content‘ and ‘u-margin-bottom-big‘ should be deemed inventions.

Tailwind’s naming conference is intuitive. More than that, I never have to scratch my head to arrive up with tons of new names.

How’s this distinct from inline models?

This is anything that bothered me at first. Applying inline models is a taboo and I was apprehensive if I am ending up performing the very same in this article.

But there is a stark difference amongst the two. Inline models allow for you to do really a lot anything you want. On the other hand, Tailwind gives you a design and style procedure with constraints and all you are performing is deciding upon models from that constrained design and style procedure.

Atomic lessons, no make a difference how atomic they are, will often remain a finite record.

What is The Remote Clan?

We built The Remote Clan, a community for remote workers to make a robust vocation with the enable of those who are pursuing the very same plans. Really don’t just apply for work opportunities anymore.

Reviews

Tags

The Noonification banner

Subscribe to get your everyday round-up of best tech stories!

Leave a Reply

Your email address will not be published. Required fields are marked *