Style

The CSS Style guide for Monster is a set of guidelines and best practices for writing and organizing CSS code. It is designed to help developers maintain a consistent and organized codebase, making it easier to read, understand, and modify. The style guide covers a wide range of topics, including naming conventions, code organization, and performance optimization. Following the guidelines in this style guide will help ensure that your CSS code is clean, maintainable, and efficient.

The following example shows how to include the stylesheets independently of the rest of the document.

<!-- here we define the desired content -->
<template id="contenttemplate">
    <p>this is an example</p>
</template>

<script type="module">

    // here we import the stylesheets
    import {NormalizeStyleSheet} from
                '@schukai/monster@latest/source/components/stylesheet/normalize.mjs';
    import {PropertyStyleSheet} from 
                '@schukai/monster@latest/source/components/stylesheet/property.mjs';
    import {ColorStyleSheet} from 
                '@schukai/monster@latest/source/components/stylesheet/color.mjs';
    import {ThemeStyleSheet} from 
                '@schukai/monster@latest/source/components/stylesheet/theme.mjs';
    
    // we create a node
    const node = document.createElement('div');
    
    // we attach the shadow root to the node
    const shadow = node.attachShadow({ mode: 'open' });
    
    // we clone the template and attach it to the shadow root
    const template = document.getElementById('contenttemplate');
    shadow.appendChild(template.content.cloneNode(true));
     
    // we attach the stylesheets to the shadow root
    shadow.adoptedStyleSheets = [
        NormalizeStyleSheet, 
        PropertyStyleSheet,
        ColorStyleSheet,
        ThemeStyleSheet
    ];
    
    // we attach the node to the body
    document.body.appendChild(node);

</script>