Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including trendsetter.tj with all npm packages installed. Try it out:

var trendsetterTj = require("trendsetter.tj")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

trendsetter.tj v1.2.0

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

PropertyTypeDescriptionDefault
directoryStringSets the directory path Trendsetter will prefix your CSS file with./css
prefixStringAllows 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
callbackFunctionAllows 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

License

This project is licensed under the MIT License.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free