Installation

Install with CDN link

You can download minified js from this repository or use this CDN link

<script src='https://cdn.jsdelivr.net/npm/scarletsframe@latest/dist/scarletsframe.min.js'></script>

By using that on your website, you're ready to go 🎉
Or maybe you want to start with a template and the environment.

Polyfill for older browser

If you want to support some old browser, you need to add some polyfill before loading the framework's script.
It's working on Chrome version 26 and should working on Android KitKat's stock browser.
For Safari or iOS browser you may need to polyfill PointerEvent too
Not supported on IE11 because the error is from the polyfill.

<script type="text/javascript">
  // Polyfill for Old Browser
  (function(){function z(a){document.write('<script src="'+a+'"><\/script>')}
    if(window.PointerEvent === void 0)
      z('https://code.jquery.com/pep/0.4.3/pep.js');
    if(window.MutationObserver === void 0)
      window.MutationObserver = window.WebKitMutationObserver;
    if(window.Reflect === void 0)
      z('https://unpkg.com/core-js-bundle@latest/minified.js');
    if(window.customElements === void 0)
      z('https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js');
  })();
</script>

Install from template

For starting the development environment, let's use the default template.

$ npm i -g scarletsframe-cli

# Navigate to your project folder
# And download template to current directory
$ scarletsframe init default

# Compile the default template
$ npm run compile

# Or use gulp if you already install it globally (optional)
$ gulp compile

Starting the server

When starting the server, it's not automatically compile your script. You will need to save any .js .scss .html or run npm compile first.

$ npm start

# Or use gulp
$ gulp

After that you're ready to go :)

Bundle with NPM

If you don't want to use gulp and like to use webpack/browserify you can easily install the framework and require it on your web project.

$ npm i scarletsframe

And include it on your project with webpack (example) or browserify.

const sf = require('scarletsframe');

sf.model.for('things', (self, root) => {
  ...
});