FormFactor.io

An experiment to generate CSS-only form elements that meet the following criteria:

• Are user-friendly
• Use only input and label elements (no divs or spans)
• Are HTML5-compliant
• Use minimal CSS
• Are accessible

Demo

FormFactor.io

Middleman

This repo is for the site itself. It uses Middleman as its static site generator, and MVCSS for CSS architecture.

Most of the code that generates the form elements is within _form.sass. But again, this repo is for the entire site; the demo itself is meant to be the easiest place to pull code from.

Notes

• On the default checkboxes vs the switches: I used the classes .form-checkbox and .form-switch rather than [type=checkbox] to avoid collisions in the case that a user copies + pastes both.