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>