Getting Started

You'll need basic HTML, CSS, and JavaScript skills for Monster. If you're just starting out with frontend development, you should have a good beginner's guide open alongside this one.

You can also post your questions on Stack Overflow.

To get started with Monster, all you need is a text editor and a browser. The best way is to copy the following example into a file and save it as index.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>awaken the monster in you!</title>
</head>
<body>

<div>your version is
    <spay id="version"></spay>
</div>

<script type="module">
    import {Version} from 'https://cdn.skypack.dev/@schukai/[email protected]/source/types/version.js';
    document.getElementById('version').innerText = new Version('1.0.0').toString();
</script>

</body>
</html>

Now open this file with your browser.

What did you do? you used the class 'Version' of monster and created a Version object. They then output this in a span.

Voila!

As seen above in the version example, each monster class or function can be used independently. Alternatively, Monster can be used as a collection of many useful classes and functions via the Monster namespace as a single javascript file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>awaken the monster in you!</title>
    <script src="https://cdn.skypack.dev/@schukai/[email protected]/source/monster.js"></script>
</head>
<body>

<div>your version is
    <spay id="version"></spay>
</div>

<script>
    document.getElementById('version').innerText = new Monster.Types.Version('1.0.0').toString();
</script>

</body>
</html>

Besides the CDN jsdelivr, skypack, Monster can also be obtained via NPM
or the git repos.

Monster itself has no dependencies and does not dictate anything to you,
you can use Monster with Bootstrap, jQuery or other cool frameworks.