Design an e-commerce product section using CodyFrame

In case you've never heard of CodyFrame, it's a lightweight CSS framework that comes with 200+ accessible components.

In this tutorial, I'm going to show you how to quickly combine a few components to create a product section for your online store, using CodyFrame's utility classes.

All the components used in this tutorial are free:

• 📦 Breadcrumbs
• 📦 Rating
• 📦 Number Input
• 📦 Button Group
• 📦 Image Zoom

Final result:

• 🕹 https://codyhouse.co/ds/components/app/product

You don't need a CodyHouse account to follow along. Download CodyFrame on Github, follow the instructions to launch it using Gulp and copy/paste the components using the links above.

Video tutorial

Here's a video where I go through the process of creating a product section using CodyFrame's utility classes.

Highlights

Utility classes are particularly helpful when dealing with template components.

A template component contains layout rules. It manages spacing and responsive behavior. Because a template is an abstract entity, it's not easy to label it with a class identifier (i.e., .template-name).

The Product section we build in the video tutorial is a good example of a template component. It glues together other components, each one with its own logic and style.

What kind of utility classes help you build a template component?

1. Margin/Padding for managing spacing;
2. Flexbox/Grid for managing layout changes;
3. Text size for editing the component's size (if the component is built using em units).

Here's a skeleton of the Product component:

<section>
  <div class="margin-bottom-sm">
    <nav class="breadcrumbs text-sm"><!-- ... --></nav>
  </div>

  <div class="grid grid-gap-md">
    <div class="col-6@md col-7@lg">
      <figure class="image-zoom"></figure>
    </div>

    <div class="col-6@md col-5@lg">
      <h1 class="margin-bottom-xs">Product Name</h1>

      <div class="flex">
        <div class="rating text-xs"></div>
        <p class="margin-left-xxs"><!-- ... --></p>
      </div>

      <div class="text-component v-space-md margin-y-md">
        <!-- ... -->
      </div>

      <div class="margin-bottom-md">
        <p class="sr-only">Select size:</p>

        <div class="btns btns--radio"><!-- ... --></div>
      </div>

      <div class="flex flex-gap-xs">
        <label class="sr-only">Quantity:</label>

        <div class="number-input"><!-- ... --></div>

        <button class="btn btn--primary flex-grow">Add to Cart</button>
      </div>
    </div>
  </div>
</section>

In the snippet above:

• The margin utility classes are used to create vertical spacing (along with the .v-space-md class applied to the .text-component).
• The .sr-only accessibility class is used to hide content while keeping it accessible to screen readers.
• The text size utility classes are used on multiple components to modify their size (with the help of the em units).
• The .grid and col classes are used for the responsive layout
• .flex is used to distribute items on the same row, while .flex-grow is used on the main button so that it takes all the available space.

The final result is that the Product component itself doesn't contain any custom CSS. Although this was not the goal when I started developing this component, having a good arsenal of utility classes can help you reduce the size of your CSS and create component variations by switching a class.