Designing a login form with Ionic Framework is very easy. I wrote this post for two reasons:
- First, I find vertically and horizontally centered login forms in mobile applications beautiful, especially with a nice background image or pattern.
- Secondly, I wanted a responsive login form that looks great on tablets. Many people use Ionic Framework to develop smartphone-only applications, but it is possible to make them look good on tablets with the Ionic responsive grid.
This isn’t a step-by-step tutorial, as there are just a few lines of code to write to achieve the expected login form design.
# The centered login form screenshot
Here is what it looks like. The screenshot was taken from Chrome’s mobile emulator and the mockup was made with Magic Mockups:
# The HTML code
<ion-view id="login" hide-nav-bar="true">
<ion-content padding="true" scroll="false">
<form>
<div class="row responsive-md">
<div class="col col-50 col-offset-25">
<div class="header padding text-center">
<img src="img/logo.png" alt="Your logo here" />
</div>
<div class="list">
<label class="item item-input">
<input type="email" placeholder="Email">
</label>
<label class="item item-input">
<input type="password" placeholder="Password">
</label>
</div>
<button class="button button-block button-positive">
Log In
</button>
<div class="row row-no-padding">
<div class="col">
<button class="button button-clear button-light">
Forgot password?
</button>
</div>
<div class="col text-right">
<button class="button button-clear button-light">
Sign up
</button>
</div>
</div>
</div>
</div>
</form>
</ion-content>
</ion-view>
# The SCSS code
Here, we use the table-cell dispay with vertical-align to center the login form.
#login {
background: #1c2627 url("../img/login_bg.jpg") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.scroll-content {
display: table !important;
width: 100% !important;
height: 100% !important;
form {
display: table-cell;
vertical-align: middle;
.header {
padding-bottom: 20px;
img {
display: block;
width: 80%;
margin: 0 auto;
}
}
.button.button-light.active, .button.button-light.activated {
color: #fff;
opacity: inherit;
}
}
}
}