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.
See the Pen Contact form by Andy Bell (@hankchizljaw) on CodePen.
See the Pen Card payment by Andy Bell (@hankchizljaw) on CodePen.
See the Pen User signup by Andy Bell (@hankchizljaw) on CodePen.
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" />
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 changesnpm run build will compile your assets into a production ready state in the dist directoryThe pattern library is powered by Astrum. You can find detailed documentation here.
Boilerform is a living, breathing project so will always welcome contribution and discussion. All contributions are welcome, but please let’s all be friendly and respectful to everyone involved 😘
Let’s make Boilerform great together!