Trendsetter

Trendsetter is a lightweight JavaScript plugin to enable module-based lazy-loading and injection of stylesheets.

Have any suggestions or feedback? Reach out!

Getting Started

Installation

npm install trendsetter.tj or if you're old-school download and insert trendsetter.min.js ✌️

HTML

Trendsetter targets all HTML elements containing a data-trend attribute.

<div data-trend="foo">
    I will be targeted!
</div>

CSS

Create a stylesheet for your module-specific styles.

// foo.css

.foo {
    /* module-specific styles go here */
}

Important: The name of your CSS file must contain the value of your data-trend attribute.

JS

Initialize Trendsetter by creating a new Trendsetter object.

var t = new Trendsetter();

Trendsetter accepts a list of options. Passing no options (as in the example above) defaults to:

var t = new Trendsetter({
    directory: "css/",
    prefix: "",
    callback: function() {}
    });

Output

Calling Trendsetter with the settings above will result in a stylesheet named foo.css being appended to the head on the first occurence of a data-trend="foo" element entering the viewport.

<link type="text/css" rel="stylesheet" href="css/target.css">

Trendsetter handles elements entering the viewport using an IntersectionObserver and will unobserve the respective element once its stylesheet has been added. Duplicates are handled automatically so that each stylesheet is only added once.

Options

| Property | Type | Description | Default | |---------------------------|-------------|---------------|---------| | directory | String | Sets the directory path Trendsetter will prefix your CSS file with. | /css | | prefix | String | Allows for Trendsetter to reflect prefixes to your CSS file. If your naming convention requires your CSS filename to be prefix.foo.css instead of foo.css, you would pass a value of "foo." here. | null | | callback | Function | Allows you to pass a callback function to fire once Trendsetter has added a stylesheet. Accepts a single argument containing the class name of the element for which the stylesheet was added. | null |

Authors

• Tim Jüdemann - Initial work - timjuedemann.de

License

This project is licensed under the MIT License.