DEV Community

loading...
Cover image for Hugo - sending hugs you really feel - The frontend

Hugo - sending hugs you really feel - The frontend

szhabolcs profile image Nagy Szabolcs ・2 min read

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
design 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"]
      }
    },
  }
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

also very neat!

But there was one problem 🤯

big file size
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"]
    }
  }
Enter fullscreen mode Exit fullscreen mode

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

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

Discussion (0)

pic
Editor guide