@monster_property_services/monster-global-styles

Monster Global Styles 🎨

This package is exporting a globalStyles constant containing css variables with default company level rules. These variables will be imported in each monster web component in order to keep the same look and feel for the layout.

Installation 📦️

You can start using this package right away like this:

1. CDN

<script type="module" src="https://unpkg.com/@monster_property_services/monster-global-styles@latest"></script>

1. npm

npm i @monster_property_services/monster-global-styles

Usage ✨:

In your web component initialization:

import { LitElement, css, html } from 'lit';
import { globalStyles } from '@monster_property_services/monster-global-styles';

export class MyWebComponent extends LitElement {
    static styles = [
        globalStyles, // Include global style inside of the styles array object
        css`
        .my-class {
            margin-top: var(--mp-wc-default-spacing);
        }` // Then you can add your own css code and reference the variables declared in the globalStyles object
    ];

    // Then the rest of your Lit web component code
    constructor() {}

    render() {
        return html`<h1 class="my-class">Test</h1>`;
    }
}

customElements.define('my-web-component', MyWebComponent);