The NotSoDailyUI #001 - Signup
Tags: beginners, webdev, css
Published: 2018-08-22 18:27:14

---
title: The NotSoDailyUI #001 - Signup
published: true
description: Coding the dailyui challenge
tags: #beginners, #webdev, #css
---

#Introduction
I decided to participate in the #dailyui challenge from [dailyui.co](http://dailyui.co). This journey would be focused on coding the interfaces and not how to design them. To help me with this, i would be referencing works where i gather inspiration for the design. This is would be an avenue for beginners and frontend devs to learn how common interfaces are created.

##What's with the title man?

Errmm... i won't be posting this daily because i know within myself that i wont have the time (i'm not a full-time code instructor but i would really love that career path because i love teaching).

#What are we building
Enough talk, here we go:


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

This design was the first image i got when i googled: "signup form." The original [design](https://www.tutorialrepublic.com/snippets/preview.php?topic=bootstrap&file=simple-sign-up-form-with-blue-background) was created with bootstrap but we are going to be coding this from scratch.

##The Html

```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>Simple SignUp</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <h2>Teebo</h2>
    </header>
    <div class="container">
        <div class="signup-wrapper">

            <div class="signup">
                <div class="heading">
                    <h2>Sign Up</h2>
                    <p>Please fill in this form to create an account!</p>
                </div>
                <div class="divider"></div>
                <form class="signup-form">
                    <div class="form-group">
                        <input type="text" placeholder="First Name" name="firstName" id="firstName">
                        <input type="text" placeholder="Last Name" name="lastName" id="lastName">
                    </div>
    
                    <input type="email" placeholder="Email" name="email" id="email">
                    <input type="password" placeholder="Password" name="password" id="password">
                    <input type="password" placeholder="Confirm Password" name="confirmPassword" id="confirmPassword">
    
                    <div class="form-group">
                        <input type="checkbox" name="privacy" id="privacy">
                        <label for="privacy">I accept the <a href="#">Terms of Use</a> & <a href="#">Privacy Policy</a></label>
                    </div>
    
                    <input type="submit" value="Sign Up">
                </form>
            </div>

            <div class="login-link">
                <p>Already have an account? <a href="#">Login Here</a></p>
            </div>

        </div>
    </div>
</body>

</html>
```
This is a basic html markup of the signup page structure. One of the few things to note is the `form-group` class which is used to group inputs. The `input`s inside the `div` with the `form-group` class would appear on the same line on larger devices. 

##CSS (style.css)

We would be using css flexbox for the positioning of the elements. We would also be using the css variables which is just a way to define values to be used by css rules in our design. One of the major benefits of css variables it that we could easily update values of variables and the corresponding rule would be updated accordingly. We'll see this in practice as we code.

First, let's create these variables:
```css
/*-- Variables --*/

:root {
    --primary-color: #3598DC;
    --grey: grey;
    --grey-light: #f1eded;
    --grey-dark: rgb(48, 47, 47);
}
```
Bro, what's with the double dash? That's how you create a css variable.
How do we use these variables? Chill, i'll show you that now but before that, let's define the global style for our design:

```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;
}

body {
    background: var(--primary-color);
}

h2 {
    font-size: 36px;
    color: var(--grey-dark);
}

p {
    font-size: 16px;
    color: var(--grey);
}

input {
    background-color: var(--grey-light);
    padding: 15px;
    margin-bottom: 25px;
    box-sizing: border-box;
}

::placeholder {
    color: var(--grey);
}
```
Did you notice something? We already used the variables. We use the css variables we declared like so `var(--primary-color)`. We also created generic styles for other elements. You could head over to your browser and see your changes.

Let's style the header and the container `div`:

```css
header h2 {
    font-family: 'Pacifico', cursive;
    color: #ffffff;
    padding: 0 0 20px 20px;
}

.container {
    display: flex;
    justify-content: center;
}
```

###signup form
First, we would style the form's wrapper `div`, the heading and the divider. The divider is just a div that is styled to look like a horizontal line

```css
/*SignUp form*/

.signup-wrapper {
    width: 500px;
}

.signup {
    background-color: #ffffff;
    border-radius: 5px;
}

.signup .heading {
    padding: 30px 30px 0 30px;
}

.signup .heading h2 {
    margin-bottom: 10px;
}

.divider {
    height: 1px;
    background: var(--grey-light);
    margin: 20px 0;
}
```

Now, let's style the form:

```css
.signup-form {
    padding: 0 30px 30px 30px;
}

.signup-form a {
    color: var(--primary-color);
}

.signup-form input {
    display: block;
    width: 100%;
}

.form-group {
    display: flex;
    justify-content: space-between;
}

.form-group input {
    flex: 0 0 48%;
}

.form-group input[type="checkbox"] {
    flex: 0 0 5%;
    margin: 0;
    align-self: center;
}

.form-group label {
    flex: 0 0 94%;
    color: var(--grey);
}

.signup-form input[type="submit"] {
    width: inherit;
    padding: 10px 40px;
    margin: 30px 0;
    background: var(--primary-color);
    color: #ffffff;
    font-weight: 600;
    border-radius: 3px;
}
```

Relax, nothing out of the ordinary is going on here. Let's break it down together:

1. We add some padding to the signup form
2. We make the `input` to be a block element so each `input` is on a new line, then we make its `width` 100% to fill up the horizontal space.
3. Next, we make the form-group a `flex` layout and make its contents to have 
a space in-between them using the `space-between` rule.
4. Then, we set the `input` inside the form-group to have a `flex-grow: 0`, `flex-shrink: 0` and a `flex-basis: 48%`. `flex: 0 0 48%` is a shorthand for the rules. The value of 0 means the `input` should neither grow nor shrink when the screen resizes. The role of `flex-basis: 48%` is pretty obvious. Right?  

###login-link
Let's style that login link below the form:

```css
/*login-link*/

.login-link {
    margin: 20px;
    text-align: center;
}

.login-link p {
    color: #ffffff;
}

.login-link p a {
    text-decoration: underline;
    color: #ffffff;
}
```

###finally
Let's add some media query goodness:

```css
@media (max-width: 650px) {
    .signup-wrapper {
        width: 90%;
    }
    .form-group {
        display: block;
    }
}
```

This media query kicks off when the screen size is below 650px (for smaller screens). We change the width of the `signup-wrapper` from `500px` to `90%`. The `form-group` is now given a display of block (previously had a display of flex) which then makes the items to be laid out horizontally.

#Conclusion
That's it. You're done. You can keep track of my dailyui repo [Here](https://github.com/fleepgeek/dailyui). One more thing, try changing the value of the css variables and see the goodness of css variables. 
Thanks so much for reading. All the best.