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:
Here, we use the table-cell dispay with vertical-align to center the login form.