Introduction
I decided to participate in the #dailyui challenge from 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:
This design was the first image i got when i googled: "signup form." The original design was created with bootstrap but we are going to be coding this from scratch.
The 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 inputs 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:
/*-- 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:
/*---- 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:
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
/*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:
.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:
- We add some padding to the signup form
- We make the
inputto be a block element so eachinputis on a new line, then we make itswidth100% to fill up the horizontal space. - Next, we make the form-group a
flexlayout and make its contents to have a space in-between them using thespace-betweenrule. - Then, we set the
inputinside the form-group to have aflex-grow: 0,flex-shrink: 0and aflex-basis: 48%.flex: 0 0 48%is a shorthand for the rules. The value of 0 means theinputshould neither grow nor shrink when the screen resizes. The role offlex-basis: 48%is pretty obvious. Right?
login-link
Let's style that login link below the form:
/*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:
@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. 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.
Top comments (0)