Boilerform is a little HTML and CSS boilerplate to take the pain away from working with forms.
By providing baseline BEM structured CSS and appropriate attributes on elements: Boilerform gives you a head start building forms in the best possible way with a view to being dropped into most projects.
Boilerform is designed to be straight-forward to implement. In its most basic form, you can drop a CSS file into your head with the following snippet:
<link rel="stylesheet" media="all" href="https://rawgit.com/hankchizljaw/boilerform/master/dist/css/boilerform.min.css?v=1.1.1" />
Then all you need to do is wrap your elements in a
.boilerform wrapper. It could be something like this:
<div class="boilerform"> <!-- Add all of your boilerform elements in here 👍 --> </div>
You can also take compiled CSS and HTML from the dist directory of this repository, if that's what you prefer.
To compile assets, you can run the following commands in your terminal:
npm run watchwill compile your assets and watch for further changes
npm run buildwill compile your assets into a production ready state in the
There's a basic validation interface available with Boilerform which extends the native HTML validation facility with a few visual tweaks.
<script src="https://rawgit.com/hankchizljaw/boilerform/master/dist/js/boilerform.min.js?v=1.1.1" async defer></script>
Now that you've got the script, it'll work, as long as your elements have the
required attribute, which will allow them to fire an
invalid event. You'll also need to make sure your
<form> elements either live in a
.boilerform parent element or have the