fancy-forms

Fancy Forms is a pure SCSS library of fully accessible native form elements. Head to aimeelally.com/fancy-forms to see examples of each element.

Native form elements are sometimes limited in their styling capabilities (I'm looking at you select boxes!). I have come across instances where some major companies have even tried to mock the behaviour of a select box using javascript instead of using the native element. This creates a whole host of issues.

Accessibility

Screenreaders need native form elements to work correctly. If you care at all about accessibility, use them.

Keyboard shortcuts

There are built-in keyboard shortcuts for native form elements e.g. press the space key or down arrow to open a select box. Unless you intend to spend a huge amount of time rebuilding all of these, it's just not worth it.

Default browser behaviour

Your browser automatically knows what to do with <select></select>. It does not on the other hand know what to do with <div class="select"></div>.

To combat this I set out to show why you do not have to (badly) reinvent the wheel to achieve the beautiful form elements you are striving for.

HOW TO USE

• Copy the code below into whatever file you use to compile your SASS e.g. base.scss.
• Change the variables to modify the colours to fit your own brand.

$ff-color-initial-state: grey;
$ff-color-primary: blue;
$ff-color-bg: white;
$ff-color-answer-correct: green;
$ff-color-answer-incorrect: red;
@import '~fancy-forms/styles/fancy-forms/base';  

ACCESSIBILITY AND COLOUR BLINDNESS

Use the variables $ff-color-answer-correct and $ff-color-answer-incorrect to utilise this module in question players where correct and incorrect classes are applied to form elements. See aimeelally.com/fancy-forms for examples.

ff-color-answer-incorrect puts a line beneath form elements with the incorrect class. The most common type of colour blindness is red/green, which also happen to be the most common colours to indicate correct and incorrect states. The extra line beneath incorrect elements makes them accessible for anyone suffering from colour blindness.

VARIABLE VALUES

ff-color-initial-state is the colour the elements take when no state is applied. ff-color-primary is the primary colour. This is the colour you will see when you hover any of the form elements. ff-color-bg is the background colour of each of the elements. ff-color-answer-correct is the colour you will see when a state is applied to 'correct-answer' form elements. ff-color-answer-incorrect is the colour you will see when a state is applied to 'incorrect-answer' form elements.

FANCY FORM ELEMENTS

• input boxes
• checkboxes
• radio buttons
• select boxes
• radio buttons with images
• checkboxes with images
• fancy labels using radio buttons
• fancy labels using checkboxes