https://github.com/hankchizljaw/boilerform

Boilerform is a little HTML and CSS boilerplate to take the pain away from working with forms.
https://github.com/hankchizljaw/boilerform

base bem boilerplate forms reset scss

Last synced: 3 months ago
JSON representation

Boilerform is a little HTML and CSS boilerplate to take the pain away from working with forms.

• Host: GitHub
• URL: https://github.com/hankchizljaw/boilerform
• Owner: Andy-set-studio
• License: mit
• Archived: true
• Created: 2017-11-04T20:47:35.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2019-11-12T23:11:52.000Z (almost 5 years ago)
• Last Synced: 2024-08-05T00:34:31.676Z (3 months ago)
• Topics: base, bem, boilerplate, forms, reset, scss
• Language: CSS
• Homepage: https://boilerform.hankchizljaw.com
• Size: 192 KB
• Stars: 713
• Watchers: 22
• Forks: 35
• Open Issues: 4
• Metadata Files:
  • Readme: readme.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# 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](https://twitter.com/chriscoyier) on [CSS Tricks](https://css-tricks.com/boilerform).

🌍 

## 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:

```html

```

Then all you need to do is wrap your elements in a `.boilerform` wrapper. It could be something like this:

```html



    



```


You can also take compiled CSS and HTML from the [dist directory](https://github.com/hankchizljaw/boilerform/tree/master/dist/) of this repository, if that's what you prefer.

If you want a bit more control, you can work with the [Sass](https://github.com/hankchizljaw/boilerform/tree/master/assets/scss) and [Pattern Library](https://github.com/hankchizljaw/boilerform/tree/master/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](http://astrum.nodividestudio.com/). You can find [detailed documentation here](https://github.com/NoDivide/Astrum).

## 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](https://github.com/hankchizljaw/boilerform/blob/master/assets/js/modules/validation.js) and add to your project, or add the dist version to bottom of your page.

```html

```

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 `` elements either live in a `.boilerform` parent element or have the `.boilerform` class.

---

Made with ❤️ by [HankChizlJaw](https://twitter.com/hankchizljaw) and [friends](https://github.com/hankchizljaw/boilerform/graphs/contributors).