https://github.com/drwpow/formfactor.io

Efficient, semantic, CSS-only form elements
https://github.com/drwpow/formfactor.io

Last synced: 2 months ago
JSON representation

Efficient, semantic, CSS-only form elements

• Host: GitHub
• URL: https://github.com/drwpow/formfactor.io
• Owner: drwpow
• Created: 2014-10-25T06:04:35.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2015-04-20T21:10:05.000Z (over 9 years ago)
• Last Synced: 2024-10-03T12:40:00.673Z (3 months ago)
• Language: CSS
• Size: 881 KB
• Stars: 32
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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 `div`s or `span`s)

 - Are HTML5-compliant

 - Use minimal CSS

 - Are accessible

## Demo

[FormFactor.io](http://formfactor.io)

## Middleman

This repo is for the site itself. It uses [Middleman](//middlemanapp.com) as its

static site generator, and [MVCSS](//mvcss.github.io) for CSS architecture.

Most of the code that generates the form elements is within

[`_form.sass`](https://github.com/dangodev/FormFactor.io/blob/master/source/assets/stylesheets/components/_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.