Boilerform is a little HTML and CSS boilerplate to take the pain away from working with forms.
Clone or download
Latest commit 7f6452a Oct 10, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Add licence, templates and contributing guide Jan 5, 2018
assets Re-add sibling checking in a more graceful format Apr 10, 2018
dist Compile dist assets Apr 10, 2018
generator Add markup dist generator and run Dec 13, 2017
pattern-library
.babelrc Get basic webpack JS setup running Jan 2, 2018
.env.sample Add .env support and make CSS and JS paths configurable Apr 7, 2018
.eslintrc Simplify .eslintrc Feb 15, 2018
.gitignore Add .env support and make CSS and JS paths configurable Apr 7, 2018
CONTRIBUTING.md Add licence, templates and contributing guide Jan 5, 2018
LICENSE.txt Fixes #16 Oct 9, 2018
astrum-config.json Rename docs to be pattern-library ready for a Jekyll implementation. … Nov 18, 2017
package-lock.json Add .env support and make CSS and JS paths configurable Apr 7, 2018
package.json
readme.md Docs formatting Apr 11, 2018
webpack.config.js Add .env support and make CSS and JS paths configurable Apr 7, 2018

readme.md

Boilerform

The Boilerform logo

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.design

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://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.

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://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 .boilerform class.


Made with ❤️ by HankChizlJaw and friends.