Hugo - sending hugs you really feel - The frontend

The mockup ✏

After writing down the initial ideas, I started making the mockups in Adobe XD.
First I made my mood board using Dribbble, and looked at some fonts from FontPair. I've also searched for some free graphics and found just the right ones on Storyset.
Here are the final mockups

Making the page 💻

First I set up Tailwind, following the instructions from the official documentation, and everything went smoothly!
Then I set up my custom theme by following the tutorial mentioned in the last post.

theme: {
    extend: {
      colors:{
        background: "#FF979E",
        primary: "#162A40",
        secondary: "#FFFFFF"
      },
      fontFamily:{
        header: ["Pacifico","cursive"],
        body: ["Cabin", "sans-serif"]
      }
    },
  }

And just like that I was ready to start making the webpage.

At first things seemed a bit out of hand, having really long class names like

class="block rounded-full bg-primary text-secondary px-10 py-2 text-base"

But then I remembered I can compress it down to a single class using the @apply directive just like this

.btn{
    @apply block rounded-full bg-primary text-secondary px-10 py-2 text-base;
}

Neat!

The layout is made using CSS grids, which I always found to be a bit complicated but Tailwind really made them simple with classes like grid-cols-1.
Making the whole page responsive was a breeze thanks to the responsive breakpoints, namely sm: md: lg: and so on.
So my responsiveness is driven solely by

class="grid grid-cols-1 md:grid-cols-2"

also very neat!

But there was one problem 🤯

The Tailwind stylesheet was hugee!
I knew I couldn't let this be that big in production, so I started searching again.

It turns out, I haven't read the documentation well enough, and I missed a crucial step: optimizing for production.

I quickly set up PurgeCSS as mentioned, making sure to include a safelist. This is to make sure my dynamically created classes get added to the final file as well.
So my tailwind config file needed the following lines

  purge: {
    content: ['./public/**/*.html'],
    options: {
      safelist: ["grid-cols-3","animate-ping"]
    }
  }

One last command later, everything worked and I can finally call it a day! 🎉

P.S. Take care, here's another hug! 👻