Boilerform

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.

The idea was first thought-up by @chriscoyier on CSS Tricks.

? https://boilerform.hankchizljaw.com

Getting started

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://cdn.jsdelivr.net/gh/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.

If you want a bit more control, you can work with the Sass and Pattern Library. This is where the source of Boilerform lives.

To compile assets, you can run the following commands in your terminal:

• npm run watch will compile your assets and watch for further changes
• npm run build will compile your assets into a production ready state in the dist directory

The pattern library is powered by Astrum. You can find detailed documentation here.

Validation interface

There's a basic validation interface available with Boilerform which extends the native HTML validation facility with a few visual tweaks.

Getting started

First of all, you need the JavaScript in your project. You can either take the source code and add to your project, or add the dist version to bottom of your page.

<script src="https://cdn.jsdelivr.net/gh/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 .boilerform class.

Made with ❤️ by HankChizlJaw and friends.