Centered login form with Ionic Framework

This post was originally published in 2015 and may contain outdated information.

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.

Here is what it looks like. The screenshot was taken from Chrome’s mobile emulator and the mockup was made with Magic Mockups:

Centered login form with Ionic Framework

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

The centered login form screenshot

The HTML code

The SCSS code