Now, let's style our filtering options. These appear just before the markup for our product items. In small, medium, and large viewports, they appear as a left-hand sidebar.
At the moment, they appear like the following screenshot:
For our final design, we want to transform the Clearance Sale link into an attractive extra-large button and arrange the filtering options into two columns with checkboxes rather than bullets, as shown in the following screenshot:
Let's begin by setting up some basic styles to lay a basic groundwork.
We'll start by adjusting fonts, colors, margins, and padding.
Let's add these rules to a new Sass partial called _grid-options.scss:
.grid-options {
@extend .card;
padding-top: 12px;
padding-bottom: 24px;
> h2 {
margin-top: 0;
font-size: 1.3 * ($font-size-lg);
line-height: 1.2;
color: $gray-dark;
}
}
The preceding code does...