Design an e-commerce product section using CodyFrame
Tags: css, tutorial, webdev, codyframe
Published: 2020-01-15 11:33:27

In case you've never heard of [CodyFrame](https://codyhouse.co/ds/docs/framework), it's a lightweight CSS framework that comes with [200+ accessible components](https://codyhouse.co/ds/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](https://codyhouse.co/ds/components/app/breadcrumbs)
- 📦 [Rating](https://codyhouse.co/ds/components/app/rating)
- 📦 [Number Input](https://codyhouse.co/ds/components/app/number-input)
- 📦 [Button Group](https://codyhouse.co/ds/components/app/button-group)
- 📦 [Image Zoom](https://codyhouse.co/ds/components/app/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](https://github.com/CodyHouse/codyhouse-framework),  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.

{% youtube YvAVLTg0Bt8 %}

##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:
```html
<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.