A Polymer.js Login Page

If it is a login page I need it vertically and horizontally centered. I have done that quite few times but when ever I try to do it on another project, I get into problems again. But, making such a beautiful login page with polymer was easy than what I thought.

Library that helps us to center-center everything is iron-flex-layout-classes. We can import the same on to app by

import '@polymer/iron-flex-layout/iron-flex-layout-classes.js';

Once we have got this imported onto app, we need to add these classes on to our custom styles, we do it by

<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning"></style>

we also need to set height of app to 100vh, you can either do it on :host css selector or in the content class.

<div style="height:100vh;" class="layout horizontal center-center">
  <div class="layout vertical center-center">
    <paper-input label="User Name"></paper-input>
    <paper-input label="Password" type="password"></paper-input>
      <paper-button>Login</paper-button>
  </div>
</div>

That’s it; you now have a login page which is perfectly centered in the view port, Get full code here