PkgFoundry
Catalog npm
Back to packageRELEASE DETAILS

0.1.2

npm

11ty-css-houdini-worklet-generator

An Eleventy environment for creating CSS Houdini worklets.

11tycsseleventyhoudini
Published15 Dec 2020
Direct dependencies2
Transitive dependenciesNot calculated

README

Current package documentation

11ty CSS Houdini Worklet Generator

From Stephanie Eckles @5t3ph - author of ModernCSS.dev and 11ty.Rocks.

This worklet was produced using Eleventy as the server environment.

Worklet Demo

The very simple worklet that is included in this generator can be viewed in this CodePen demo.

The demo shows how to include the required polyfill and then require the worklet within a script tag, and how to modify it's display attributes via CSS custom properties.

To Use the Generator

CSS Houdini worklets require a server to run. While there are many ways to create an envirnoment for developing and testing your worklet. As a static site generator, Eleventy provides a slim way to get setup and testing quickly so you can focus on creating your worklet!

Before you begin - be sure to update the package.json details to your own!

Project Structure

The following are all within src which is your working directory

_includes/base.njk - a simple HTML5 template that includes the (currently required) polyfill for the CSS Houdini Paint API, as well as the CSS.paintWorklet.addModule pointing to the worklet's location on the local server

css/style.css - the local server styles, this is where you add your worklet to your test elements

index.md - produces the index content, and can be swapped to another one of 11ty's supported templating languages

worklet.js - the critical file that creates and registers your worklet class

Development

npm start - will run the project locally by launching Eleventy in watch mode and include a localhost server with hot reload provided by Browsersync.

Publishing / Using Your Worklet

The recommendation from Houdini.How is to publish your worklet as an npm package so that it can be imported and used by accessing it on a CDN such as unpkg.

This is because of the requirement of running via HTTPS, so unpkg makes it easy to share and include elsewhere such as CodePen.

To publish via npm, you will first need to set up an account.

Then within your local project, run npm publish.

The included prepublish command will ensure Eleventy has been freshly run to ensure the latest version of your worklet is available.

Within a few minutes you will see your package added to your npm account, and then it will also be available at https://unpkg.com/your-package-name

Review the CodePen Demo to see how to then include it outside of your local project.

Updating Your Worklet

If you make changes to your worklet, use the included bump command to easily increment your package number, ex: npm run bump patch, then proceed to run npm publish.

Your changes will be available within a few minutes.

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 2

Native requirements
2 direct targetsNot calculated transitive count
Package / targetRequirementRelationship
@11ty/eleventy
Environment
{
  "local_name": "@11ty/eleventy",
  "alias": false,
  "peer_metadata": null
}
^0.11.1development
npm-run-all
Environment
{
  "local_name": "npm-run-all",
  "alias": false,
  "peer_metadata": null
}
^4.1.5development

Distribution files

1 collected
Distribution 1

Source distribution

Source file
Checksums from source
{
  "integrity": "sha512-YEpN4oEPbIoCRto2pZPTDqreAGz9wgnaaA7gq37xzx9l0mF3wEL8Q5sWspic1oMd4Cy9ZZ4KKzPFqIqJwFBv2Q==",
  "shasum": "b37b4256f981af7465a4347bec49fc15e665b589",
  "tarball": "https://registry.npmjs.org/11ty-css-houdini-worklet-generator/-/11ty-css-houdini-worklet-generator-0.1.2.tgz",
  "fileCount": 3,
  "unpackedSize": 4557,
  "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2NFnCRA9TVsSAnZWagAAbpEP/0uNLjDeUPhijYkik4uE\nt0aN/uIyCetmw5WHQTLdW57NwH0mCSO/5bUxWlKiEtYrbiXZYMFB+ns86d+L\nB0aBluA31vpt0Hl9g415vzH31oHYjwjpj3pwRdskywRRHvmHiVOxxjL0mlXe\nQQSPxPvFAncYtTSrsfEh3/k2WfXWiW+Wm2jAZqnbX3JN+usx3qwnkG0kVHcd\nTd0pB9Bfzl3mhBl/97tVNKbWlEz0k0uDbp5I2nd0OIyKV8BSGT7MqY1oInUf\n/V7Ue5saR4XwF7V8ADTKJensUAY5TVOIeQg2oSGhgIvXb+ybwA3fvOi2XSPT\nbDt5l3iSR9n5mLmj3Ra2oKwG3t7jtDiU4LpaM42rOZAdc0A4cbOCgUFSLFwJ\nOrXGjmrFz8qD4Q6JM69u7RAfu/4mP6IhDnjXs/mHfwL6yOU4F4I/eskQuZsn\nZs4c9ovlZK8a1j6dQA/QaIkPSz5DccADn61Wi40nSbDRrQ8sUNB0Qf3V3yeB\nZDGbfgD2b01ZLZKb0+2qtahtLCiNLodetcR6LUix8MSP4r4TcucmLytsY20U\nNU4qrCHk5Tgecww7OaBJm2VzjZF9UiEuTORsj4diXClw82zdbda+8bvXavwM\ns/kvubYll+k+4ZNSetRA5Jfihg8BIv6KvA7y058xrd3xsQy6qAH6hpfSLoL0\nlqKA\r\n=c/2y\r\n-----END PGP SIGNATURE-----\r\n",
  "signatures": [
    {
      "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
      "sig": "MEYCIQC91KJx9XUc7L7wF0AW7ETNZ7CB2VqKqziOKvbmdh4mxAIhAKxkkXB5A7BRFoAYSAm1RExMBMiNFbINU3GgYBvjbiin"
    }
  ]
}

Repository

PENDING
5t3ph/11ty-css-houdini

Shared repository data · GitHub

License detected in repository
Not collected

Metadata history

Meaningful changes
Current collected state Current

Observed since 20 Oct, 18:05 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:90f823a263097c2fae55039e9c4e6a1d0cced29ff437b4e40f7413be3df57d37

Other collected versions

0.2.012 Dec0.1.115 Dec0.1.015 DecView all collected versions →