Getting Started

Embarking on your Monster journey requires a basic understanding of HTML, CSS, and JavaScript. If you’re new to frontend development, consider having a beginner’s guide handy as you explore Monster.

For additional support, join the conversation on Stack Overflow by tagging your queries with “javascript” and “monster”. Alternatively, engage with our community right here in this ChatGPT Monster Chat for tailored assistance.

Monster in Your Browser

Dive into Monster with just a text editor and a browser. Start by crafting an index.html file with the following snippet:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Monster Magic!</title>
</head>
<body>

<div>Monster Version:
    <span id="version"></span>
</div>

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

</body>
</html>

Launch this file in your browser to see Monster’s ‘Version’ class in action, displaying a version number on your page.

Well done! You’ve just harnessed a slice of Monster’s capabilities. Each Monster component operates independently, allowing you to cherry-pick the features you need. Or, you can embrace Monster in its entirety for a comprehensive toolkit.

Monster is accessible through CDNs like jsDelivr and Skypack or can be integrated via NPM or git repositories, offering versatility without dependencies, making it compatible with frameworks like Bootstrap or jQuery.

Monster via NPM

To install Monster with NPM, ensure you have Node.js and NPM installed:

  1. Launch your terminal or command prompt.
  2. Execute: npm install @schukai/monster

This command fetches the latest Monster version. To target a specific release, append @version_number to the package name.

After installation, you can incorporate Monster modules into your project as follows:

import {Version} from '@schukai/monster/source/types/version.js';
document.getElementById('version')
        .textContent = new Version('1.0.0').toString();

Feel free to use yarn or pnpm as alternatives to NPM for your package management needs.