8 Designing a checkout cart
This chapter covers
- Responsive tables
- Auto positioning using grid
- Formatting numbers
- Conditionally setting CSS based on viewport size via media queries
- nth-of-type() pseudo-class
From food, to books, to entertainment, and everything in between, many of us will regularly buy items online. Common to this experience is the checkout cart. We make our selections by adding them to a virtual cart or basket with which we can review our chosen items before making our final purchase. In this chapter we will look at how to style a checkout cart so that it works on both narrow and wide screens.
In this chapter we will look at how to handle tables in both narrow and wide screens. Tables are incredibly useful for displaying data however, they can be a bit difficult to style for mobile devices. We will therefore look at a CSS solution for narrow screens.
We will first handle some theming. Regardless of the width of our screen, elements such as input fields, links, or buttons will look the same, so we will style these first. Defining a theme early on in putting a UI together can significantly help reduce redundant code and increase our ability to keep our styles consistent, so whether a checkout cart or any other page or application, this process can be translated to any number of designs.