The NotSoDailyUI #002 - Credit Card Checkout (CSS GRID Goodness!)
Tags: beginners, webdev, css
Published: 2018-08-24 19:09:52

---
title: The NotSoDailyUI #002 - Credit Card Checkout (CSS GRID Goodness!)
published: true
description: Code a Credit Card UI 
tags: #beginners, #webdev, #css
---

Welcome to the second part of this series. In case you missed the first part, here's the link: [part 1](https://dev.to/fleepgeek/the-notsodailyui-001---signup-ne6)

In this one, we'll be coding the UI for a Credit Card Checkout page. 
Here's a look at the finished product:

{% codepen https://codepen.io/fleepgeek/pen/GXJpJJ %}

Just like i stated in the first part, since this is a code tutorial, i would be focusing on the code and not designing the UI from scratch. I got the inspiration of this design from [this behance post](https://www.behance.net/gallery/30547885/Daily-UI-2-Credit-card-checkout-UI) by Andrea Pilutti.

Ok let's code.

# The Markup

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Credit Card Checkout</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
        crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="checkout-flow">
            <div class="checkout-nav">
                <a href="#">Delivery & Pickup Options</a>
                <a href="#">Shipping Address</a>
                <a href="#" class="active">Payment</a>
            </div>

            <div class="checkout">
                <div class="product">
                    <img src="https://raw.githubusercontent.com/fleepgeek/dailyui/master/002-checkout/images/beats.png" alt="product">
                    <div class="info">
                        <p class="name">Beats by Dr.Dre</p>
                        <p class="type">Studio Wireless</p>
                        <h2 class="price">$375</h2>
                    </div>
                </div>

                <div class="form-wrapper">
                    <h2>Credit Card Checkout</h2>
                    <form class="payment-form">

                        <div class="input-control">
                            <label for="cardholder">Cardholder's Name</label>
                            <input type="text" name="cardholder" id="cardholder">
                        </div>

                        <div class="input-control">
                            <label for="cardholder">Card Number</label>
                            <div class="icon-input">
                                <input type="number" name="cardnumber" id="cardnumber">
                                <i class="fab fa-cc-mastercard"></i>
                            </div>
                        </div>

                        <div class="control-group">
                            <div class="input-control">
                                <label for="cardholder">Expiration Date</label>
                                <div class="icon-input">
                                    <input type="text" name="expiration" id="expiration" placeholder="MM/YY">
                                    <i class="far fa-calendar"></i>
                                </div>
                            </div>
                        
                            <div class="input-control">
                                <label for="cardholder">Cvc code</label>
                                <input type="text" name="cardholder" id="cardholder">
                            </div>
                        </div>

                        <input type="submit" class="btn-order" value="Place Order">
                    </form>
                </div><!-- end form-wrapper -->

            </div><!-- end checkout -->
        </div><!-- end checkout-flow -->
    </div><!-- end container -->
</body>

</html>
```

The html markup is pretty straightforward but there are a few things to note in the structure here. The wrapping `div`'s of all`input` has the class of `input-control` excluding the `input` type of `submit`. This class is used to style our inputs.

# The CSS (style.css)

We are going to style the page using the Mobile-First approach. This simply means that we would first style the page for mobile devices then use media queries to style it for larger screens. Also, we would be using css grid to position our layouts.

## global styles
Just like we did in the first part, we first set our css variables:

```css
/*-- Variables --*/

:root {
    --bg-color: #25263B;
    --light-blue: rgb(53, 98, 220);
    --grey: grey;
    --light-grey:#E9E8ED;
    --green: rgb(19, 170, 70);
}
```

Next, we set our global styles for our elements:

```css
/*---- Global ----*/
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 100%;
    vertical-align: bottom;
    text-decoration: none;
    box-sizing: border-box;
}

html, body { 
    height: 100%;
    width: 100%;
    background-color: var(--bg-color);
}

a {
    color: var(--grey);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
}

a.active {
    color: #ffffff;
}

label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--grey);
    display: block;
    margin-bottom: 5px;
}

input {
    padding: 10px;
    border: 2px solid var(--light-grey);
    width: 100%;
    font-weight: 600;
    border-radius: 3px;
}

input:focus {
    border-color: var(--green);
}
```

Let me explain some parts. We just gave all our `input` a grey border of 2px and when it is focused, we change the border color to green. Also, we gave all elements some defaults using the `*` selector.

## main styles

```css
/* main */

.container {
    display: grid;
    grid-template-columns: .25fr 4fr .25fr;
    grid-template-areas: ". m .";
    width: 100%;
    padding: 40px 0;
}

.checkout-flow {
    grid-area: m;
    width: 100%;
}

```

This where the css grid goodness comes in. We give `.container` a `display: grid` which tells the browser that this container is going to be a grid (Yeah Yeah, i know that's very obvious). Unlike the flex system which focuses on arranging items in one dimension (either row or column depending on the `flex-direction` property), the grid layout comes with the power of controlling the arrangement of items in two dimensions (rows and columns).  

We define the columns using `grid-template-columns`. Here we define three columns of `.25fr`, `4fr` and `.25fr`. `fr` simple means a fractional unit of the available space. Using `fr` divides the available space into fractions (Lol!! at those of you that skipped maths class in high school). So, `4fr` means: take up 4 parts of the available space. `.25fr` means: take up 1/4 part of the available space. 
Next, we define the areas we want these columns to take up using `grid-template-areas: ". m ."`. Here `m` is a name (we could use any word or letter). `m` signifies the middle coulumn which is `4fr`. The dots signifies unnamed columns (you'll understand this soon).

To make everything we just explained useful, we have to assign elements to these defined areas. We do that for `.checkout-flow` by giving the rule: `grid-area: m`. This tells the grid system that this element should take up the area of m in the grid system. The remaining areas marked with dots would serve as empty spaces or if you prefer you could call them margins. 

**All this stress just to position a div in the center with equal margins?
Just calm down. We could do something like this: `margin: 0 auto` (auto margin on its left and right) on `.container`. Now, what if we want to make `.checkout-flow` cover the whole width (that is 100%). We would have to give `checkout-flow` negative margins to force it cover the width but with css grid we just do: `grid-area: m m m` and that's it. This is just a new option and could be beneficial in some design scenarios. Just use the one that best works for you in your given scenario.

> I know, that was a lot, right? I could do a full tutorial on css grid if this looks overwhelming for beginners. Let me know in the comments section.

### checkout-nav
This style applies to the steps navigation at the top of the screen:

```css
.checkout-nav  {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin: 30px 0;
    height: 70px;
}
```

### checkout
These are the styles for the main checkout container that contains the product and the form-wrapper.

```css

.checkout {
    background-color: #fff;
    border-radius: 3px;
    width: 100%;
    min-height: 550px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: "p p p p p p p p p p p p"
                         "f f f f f f f f f f f f";
}

.product {
    grid-area: p;
    position: relative;
    min-height: 350px;
}

.form-wrapper {
    grid-area: f;
    padding: 40px;
    background-color: var(--light-grey);
}
```
Using the same principle as we just learned, we define columns and areas on the parent `div` which has the class of `checkout`.
Instead of defining our columns manually, we make use of the `repeat` function which create 12 columns with each column taking up one part of the available space. In simpler terms, we just created a 12 column grid. 
Next, we assign the areas we just created to `.product` and `.form-wrapper`. Remember, css grid has the power of two dimensions so just defined a grid of 12 columns and 2 rows.

The product would be on the top of the form wrapper in the mobile view (later, we would control the area for larger screen using media queries).
Head over to your browser and see your progress.

### product
Let's continue styling our product section.

```css
.product img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding-bottom: 40px;
}

.product .info {
    position: absolute;
    bottom: 0;
    padding: 30px;
}

.product .info .name {
    color: var(--grey);
    font-weight: 700;
    font-size: 20px;
}

.product .info .type {
    font-size: 25px;
}

.product .info .price {
    font-size: 36px;
    font-weight: 300;
    margin-top: 10px;
}

```

### form

```css
.form-wrapper {
    grid-area: f;
    padding: 40px;
    background-color: var(--light-grey);
}

.form-wrapper h2 {
    font-size: 24px;
    font-weight: 300;
    color: var(--light-blue);
    margin-bottom: 40px;
}

.input-control {
    margin-bottom: 20px;
}

.icon-input {
    position: relative;
}

.icon-input input {
    padding-right: 40px;
}

.icon-input > i {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 15px;
    font-size: 20px;
    color: var(--grey);
}

.btn-order {
    border: none;
    background-color: var(--green);
    color: #ffffff;
    text-transform: uppercase;
    margin-top: 20px;
}
```
If you read part 1 of this series, you'll see that nothing is new here in my approach to styling form elements. Errmmm except for the lovely font-awesome icons placed on some form inputs. OK, let's break that down but first let's take a look at one of the html markup for that element as a quick reminder:

```html
<div class="input-control">
    <label for="cardholder">Card Number</label>
    <div class="icon-input">
        <input type="number" name="cardnumber" id="cardnumber">
        <i class="fab fa-cc-mastercard"></i>
    </div>
</div>
```
We had a special class for inputs with icons called `icon-input`. In this style, we set `position: relative` so that we can give the icon element: `position: absolute` and place it at the right corner of the input. Also, we give the `input` a right padding so that its text wont cover the icon.

Your page should be looking great now. Go ahead and check it. We just need to add media queries for larger screens and that's what we'll do next.

### media queries for larger screens

```css
@media (min-width: 1024px) {
    .container {
        display: grid;
        grid-template-columns: .5fr 2fr .5fr;
        grid-template-areas: ". m .";
    }
    .checkout {
        grid-template-areas: "p p p p p f f f f f f f";
    }
    .checkout-nav {
        flex-direction: row;
        justify-content: space-evenly;
        height: 20px;
    }
    .control-group {
        display: flex;
        justify-content: space-between;
    }
    .control-group .input-control {
        flex: 0 0 48%;
    }
}
```
For the `.checkout` class, we rearranged the `grid-template-areas` to layout the p and f side by side. With this rearrangement, the product and the form-wrapper would be side by side on large screens.
Next, we changed the flex direction of the `.checkout-nav` to `row` and spaced it evenly so that the links appear on one horizontal line.
We gave the `.control-group` a display of `flex` so the inputs(expiration date and cvc code) would be positioned on the same horizontal line.

# Conclusion

That's it people. Here's the [link](https://github.com/fleepgeek/dailyui) to my dailyui github repo.
Stayed tuned for the next part!!