11ty Css Houdini

Overview

The 11ty CSS Houdini Worklet Generator is a tool created by Stephanie Eckles. It is designed to help developers quickly set up and test CSS Houdini worklets using the Eleventy static site generator as the server environment. The tool includes a simple worklet that can be viewed in a CodePen demo, and provides instructions on how to include the required polyfill and modify the worklet’s display attributes via CSS custom properties.

Features

• Eleventy integration: The generator utilizes Eleventy as the server environment for developing and testing CSS Houdini worklets.
• CodePen demo: The tool includes a CodePen demo that showcases the functionality of the included worklet and demonstrates how to use the required polyfill.
• Easy setup and testing: With Eleventy as the static site generator, developers can quickly set up and test their worklets without the need for complex server environments.
• Customizable project structure: The generator provides a project structure template with files such as HTML template, CSS styles, index content, and the critical worklet file, allowing for easy customization and organization of the worklet project.
• Development workflow: The generator includes a command npm start that launches Eleventy in watch mode with hot reload provided by Browsersync, making the development process efficient and convenient.
• Publishing and usage: The generator recommends publishing the worklet as an npm package and accessing it on a CDN such as unpkg for easy sharing and inclusion in projects. It provides instructions on how to set up an npm account, publish the package, and update the worklet if changes are made.

Installation

To use the 11ty CSS Houdini Worklet Generator, follow these steps:

1. Update the package.json details to match your own project.
2. Set up the project structure with the following files under the src directory:
   • _includes/base.njk: A simple HTML5 template that includes the polyfill for CSS Houdini Paint API and the CSS.paintWorklet.addModule pointing to the worklet’s location on the local server.
   • css/style.css: The local server styles file where you will add your worklet to your test elements.
   • index.md: The file that produces the index content, which can be swapped to another one of 11ty’s supported templating languages.
   • worklet.js: The critical file that creates and registers your worklet class.
3. Run npm start to launch Eleventy in watch mode, which includes a localhost server with hot reload provided by Browsersync.

To publish and use your worklet, follow these steps:

1. Set up an npm account.
2. Run npm publish within your local project to publish your worklet as an npm package.
3. Use the included bump command to increment your package number, ex: npm run bump patch, if you make any changes to your worklet.
4. Your changes will be available within a few minutes and can be accessed via a CDN such as unpkg.

Summary

The 11ty CSS Houdini Worklet Generator is a useful tool for developers looking to create and test CSS Houdini worklets. By leveraging the Eleventy static site generator, the generator provides an efficient way to set up and develop worklets without the need for complex server environments. With its customizable project structure and development workflow, developers can easily organize and iterate on their worklet projects. The generator also offers guidance on publishing and using worklets as npm packages, making it easy to share and include worklets in other projects.