Menu

Get Started

Installation

Formstone is available via NPM or a CDN.

npm i formstone

You can use Formstone directly in the browser with the full library or ES6 Modules, or bundle Formstone into your application using a module bundler like Webpack.

Full Library

Load the full library from a CDN or your local project. The global Formstone object will include all available modules, which can be destructured into local variables.

<link rel="stylesheet" href="path/to/formstone/dist/formstone.css">

<script src="path/to/formstone/dist/formstone.js"></script>

<script>
  let { Background, Utils } = Formstone;

  Utils.ready(() => {
    Background.construct('.js-background', {
      source: '...',
    });
  });
</script>

ES6 Modules

Load specific modules from a CDN or your local project using import statements.

<link rel="stylesheet" href="path/to/formstone/src/css/background.css">

<script type="importmap">
  {
    "imports": {
      "formstone": "path/to/formstone/src/js/index.js"
    }
  }
</script>

<script type="module">
  import { Background, Utils } from 'formstone';

  Utils.ready(() => {
    Background.construct('.js-background', {
      source: '...',
    });
  });
</script>

Module Bundler

Bundle Formstone into your project by importing only the modules needed.

@import 'path/to/formstone/src/less/background.less';
import { Background, Utils } from 'formstone';

Utils.ready(() =&gt; {
  Background.construct('.js-background', {
    source: '...',
  });
});

jQuery Adaptors

Formstone includes jQuery adaptors for each module, allowing integration into legacy environments.

<script src="path/to/formstone/dist/formstone.jquery.js"></script>

The module APIs are mapped to match jQuery design patterns.

$('.js-background').background({
  source: '...'
});