Co-founder, Remote Resources & Remote Clan
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.
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 –
- It is a community site. Emphasis has to be on information posts and consumer profiles.
- UI is essential. No one’s heading to be hooked on to the community unless they like the glimpse and really feel of the site.
- Micro interactions are an complete need to.Typical discussion board UIs are a no-no. Will need to stand out from common discussion board web sites like Tribe.so.
- Will need the site up and functioning in < 2 weeks. Build only that’s most essential.
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?
Subscribe to get your everyday round-up of best tech stories!