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, sf will registered on global scope and you can also use sf.dom as jQuery alternative.

window.$ = sf.dom;

$(function(){
   // you're ready to go 🎉
   // this function will be executed after all js/css resource was loaded
});

Or maybe you want to start with a template and the environment.

Using the template

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

$ npm i -g scarletsframe-cli

# Download template to current directory
$ scarletsframe init default

# Install the needed package
$ npm i

# Start the development server
$ npm start

Install with with NPM

This is optional if you prefer for using webpack, parcel, rollup, etc.

$ npm i scarletsframe

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

const sf = require('scarletsframe');
// import sf from "scarletsframe";

// You can use require to reference another model
sf.model('things', function(My, require) {
  My.something = 123;
});

Polyfill for older browser

If you want to support some old browser, you need to add some polyfill before the framework.
For Safari or iOS browser you may need to polyfill PointerEvent too
Some feature not work on IE11.

Click here to see the polyfills

```html <script type="text/javascript"> // Polyfill for Old Browser (function(){function z(a){document.write('<script src="'+a+'"><\/script>')} if(!window.PointerEvent) // Chrome < 55, Firefox 42 z('https://code.jquery.com/pep/0.4.3/pep.js'); if(!window.MutationObserver) // Chrome 26 window.MutationObserver = window.WebKitMutationObserver; if(!window.Reflect) // Chrome < 49 z('https://unpkg.com/core-js-bundle@latest/minified.js'); if(!window.customElements) // Chrome < 54, Firefox 63 z('https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js'); if(!window.ResizeObserver) // Chrome < 64, Firefox 69 z('https://polyfill.io/v3/polyfill.min.js?features=ResizeObserver%2CIntersectionObserver%2CIntersectionObserverEntry'); })(); </script> ```

Note before the semantic versioning

This framework still being developed and may have breaking changes before the release, make sure you specify the version instead using latest.
Please help the development of this framework >.<