Former Js - is a free and most modern framework designed to make form development simple. It is intended to make forms as responsive and good-looking as possible. Former JS is compatible with all platforms as well as modern browsers although is not available via CDN for the time being. Former was developed by Anthony Saah.

Former JS can be accessed Gitub. The library can easily be linked to your projects with ease. Just pull or download the required files and link them to your project.

You can link either the main former file (former.js) or the minified version (former.min.js)

<script src='former-js/src/former.js'></script>

Or the minified version

<script src='former-js/src/former.min.js'></script>

In order to former to fully operate you need to also need to link the stylesheets provided

<link rel='stylesheet' href='former-js/src/css/former.css'>

Or the minified version

html <link rel='stylesheet' href='former-js/src/css/former.min.css'>

Former JS can be used to create a form which occupies the entire width and height of a page to facilitate design. 1.First Create a container with class='former-page' .

<div class='former-page former-bg-red'>
  
</div>

You can add former utility classes to further customize your container - Utility Classes

2. Create your form element with class='former-page'

  <div class='former-page former-bg-red'>
    <form class='former-form former-bg-white'>
      
    </form>
  </div>

Notice the former-bg-red and former-bg-white classes. Again, they are examples of utility classes for background colors. View More Background Classes

3. Title and Subtitle ( Optional )

  <div class='former-page former-bg-red'>
    <form class='former-form former-bg-white'>
      <p class='former-title'>Login Form</p>
      <p class='former-subtitile>Connect to your Account</p>
    </form>
  </div>

Utility Classes on Former JS help with basic styling and responsiveness for your project. They include properties such as backgrounds, colors, border-radius, box-shadows, text-shadows and more.

  .former-bg-dark
  .former-bg-yellow
  .former-bg-blue
  .former-bg-red
  .former-bg-green
  .former-bg-white

  .former-text-dark
  .former-text-yellow
  .former-text-blue
  .former-text-red
  .former-text-green
  .former-text-white

  .former-box-sm
  .former-box-md
  .former-box-lg
  .former-box-none