brkyurun / fm-order-summary-card-challenge

Frontend Mentor - Order summary card solution

This is a solution to the Order summary card challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

Users should be able to:

• See hover states for interactive elements

Screenshot

Links

• Solution URL: GitHub Repo
• Live Site URL: GitHub Pages

My process

Built with

• Semantic HTML5 markup
• Flexbox
• Mobile-first workflow
• React - JS library
• TailwindCSS - Utility-first CSS framework
• TypeScript - Static type-checking for JS
• Vite - Fast, no-config module bundler
• ESLint - Code quality checker and linter
• Prettier - Code style enforcer

What I learned

During the development process, I tried to utilize a component-based, mobile-first workflow. For quick styling, I chose to use TailwindCSS as it is one of my favorite ways to write CSS, and I can always incorporate vanilla CSS in places where I need, for example like setting the whole documents font-family like shown belown:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: "Red Hat Display", sans-serif;
  }
}

However, working with TailwindCSS is not always a sunny day walk in the park. A very common pain point many developers utilizing the power of TailwindCSS face is the lack of brevity and cleanliness of their markup. To combat this, for each component that had styling, I created a "styles" object and wrote CSS class names for key and the required TailwindCSS classes as the value, even if I only used a single TailwindCSS class.

Example:

// src/components/CardPlan.tsx
const styles = {
  wrapper: "flex items-center p-5 bg-very-pale-blue rounded-xl",
  image: "mr-6",
  pricing: {
    wrapper: "flex flex-col items-center justify-center",
    title: "font-black",
    price: "text-base text-desaturated-blue",
  },
  link: "ml-auto text-bright-blue hover:text-bright-blue/70 underline hover:no-underline text-sm font-bold",
};

I highly recommend this way of organizing your TailwindCSS classes as it greatly reduces clutter and you can use CSS naming conventions to name your HTML tags (i.e "card", "cardBody", "footer" etc.).

Author

• LinkedIn - Berkay Urun
• Frontend Mentor - @brkyurun
• Twitter - @darkhorizontal