PicoCSS product page example

Pico CSS is a great tool for building low code interfaces, today we will be going through the process of creating a product page for a ecommerce store. The image below shows what you will have at the end.

Header

The header takes advantage of Pico’s built in styles with a few lines of extra CSS.

 1<!— HTML —>
 2<nav>
 3  <ul>
 4    <li>
 5      <img id="favicon" src="/logo.png" alt="Logo" /><strong class="bold"
 6        >LOW</strong
 7      >
 8    </li>
 9  </ul>
10</nav>

 1/* CSS */
 2nav > ul > li {
 3  margin-left: 30px;
 4  font-size: 30px;
 5  color: black;
 6}
 7#favicon {
 8  height: 25px;
 9  margin-top: -5px;
10  margin-right: 5px;
11}

The container

This is the core of our page, the main element containes all of our content for the page so we can pass style from it to the other element reducing the amount of CSS that is needed.

1<!— HTML —>
2<main>
3 <h1 class="bold">Products</h1>
4 <div id="products”></div>
5</main>

 1/* CSS */
 2main {
 3  margin: auto;
 4  width: 90%;
 5  max-width: 1100px;
 6  margin-top: 100px;
 7  margin-bottom: 100px;
 8}
 9.bold {
10  font-family: "Arial Black", Helvetica, sans-serif;
11  font-weight: 900;
12}
13#products {
14  display: flex;
15  flex-wrap: wrap;
16  justify-content: center;
17}

The cards

The card will contain the actual product information in it, as long with any images we want to add in. We will use the h4 and h6 elements for the label formating and the button element to add the product to the cart. Add these cards into the #products div to add a new product.

1<!— HTML —>
2<div class="card”>
3 <img src="https://i.imgur.com/GIeyjWd.jpg" alt="Product" />
4 <h4>Adobe Photoshop</h4>
5 <h6 class="right">$12.00</h6>
6 <button>Add to Card</button>
7</div>

 1/* CSS */
 2.card {
 3  width: 300px;
 4  padding: 20px;
 5  border-radius: 10px;
 6  box-shadow: 10px 10px 50px -30px #212121;
 7  margin: 20px;
 8}
 9.card > img {
10  border-radius: 10px;
11}
12/* This is optional if you want the text to align left you can remove this */
13.right {
14  text-align: end;
15}

Everything together

 1<!— HTML —>
 2<nav>
 3  <ul>
 4    <li>
 5      <img id="favicon" src="/logo.png" alt="Logo" /><strong class="bold"
 6        >LOW</strong
 7      >
 8    </li>
 9  </ul>
10</nav>
11
12<main>
13  <h1 class="bold">Products</h1>
14  <div id="products">
15    <div class="card">
16      <img src="https://i.imgur.com/GIeyjWd.jpg" alt="Product" />
17      <h4>Adobe Photoshop</h4>
18      <h6 class="right">$12.00</h6>
19      <button>Add to Card</button>
20    </div>
21  </div>
22</main>

 1/* CSS */
 2<style>
 3 nav > ul > li {
 4  margin-left: 30px;
 5  font-size: 30px;
 6  color: black;
 7 }
 8 #favicon {
 9  height: 25px;
10  margin-top: -5px;
11  margin-right: 5px;
12 }
13 main {
14  margin: auto;
15  width: 90%;
16  max-width: 1100px;
17  margin-top: 100px;
18  margin-bottom: 100px;
19 }
20 .bold {
21  font-family: 'Arial Black', Helvetica, sans-serif;
22  font-weight: 900;
23 }
24 #products {
25  display: flex;
26  flex-wrap: wrap;
27  justify-content: center;
28 }
29 .card {
30  width: 300px;
31  padding: 20px;
32  border-radius: 10px;
33  box-shadow: 10px 10px 50px -30px #212121;
34  margin: 20px;
35 }
36 .card > img {
37  border-radius: 10px;
38 }
39 .right {
40  text-align: end;
41 }
42</style>