Fluid type and space thanks to Utopia
Responsive design that looks good on desktop, tablet, and mobile with only 2 media queries
CUBE CSS with Tailwind and design tokens
Semantic HTML5 markup
CSS custom properties
Why I built this
I have been taking challenges on Frontend Mentor to get better at translating design mockups into code.
I also wanted to try working with Tailwind in a project, and this design seemed like a good ﬁt.
Why I avoided Tailwind in the past
One concept that stuck to me early on while learning how to code is the separation of concerns. In the context of web development, this means that HTML is responsible for content and giving it structure, while CSS is responsible for styling and layout concerns. In other words, HTML is the skeleton, while CSS is the skin.
So when I ﬁrst encountered Tailwind and its infamous tagline “Best practices” don’t actually work, I was convinced it wasn’t for me.
But later on I realized that separation of concerns is more than just keeping CSS out of HTML. In fact, Adam Wathan, the creator of Tailwind CSS, makes a lot of good points in his his article CSS Utility Classes and “Separation of Concerns”. I think a huge misconception about Tailwind is that you’re just supposed to plug it in your project and you never have to make a CSS ﬁle, just litter your HTML with classes. But that is a utility-only approach, not utility-ﬁrst which is how Tailwind was intended to be used.
When I stumbled upon Andy Bell’s Build Excellent Websites, which mentions and uses Tailwind, that’s when I decided to give it a try. And I realized, hey, this isn’t so bad!
I used Tailwind quite conservatively in conjunction with CUBE CSS, which means I still wrote component-based classes instead of taking a utility-ﬁrst approach. But I deﬁnitely see the beneﬁt of using Tailwind, especially for rapid UI development during the early phases of a project. I especially like how it can process design tokens and convert them into CSS custom properties that I can use in my code.
The source code of Build Excellent Websites is my primary inspiration for this project. I tried my best to practice the principles in that site, which is why I only used 2 media queries for this solution (not counting the ones in resets and conﬁg ﬁles). The rest of the layout are handled by utility classes, such as the Switcher a.k.a. the Flexbox Holy Albatross by Heydon Pickering.
I also gained more conﬁdence working with SVG:
- For the logos, I used inline SVG in the header and footer instead of
- I combined the social media icons into an icon sprite embedded in the page, which avoids extra HTTP requests.