deviousdododeviousdodo
26

Elevenpack

screenshot of Elevenpack
tailwind

Eleventy starter pack with modern JS and CSS workflows

Github

Overview

Elevenpack is a tool that allows developers to quickly start working with Eleventy, while using modern JS and CSS workflows. It utilizes tools such as webpack, babel, PostCSS, and Tailwind to provide a minimal setup that supports modern JS and CSS features, as well as a performant build output with bundling and cache busting for assets. The repository is automatically published on Netlify, and contributions are welcome.

Features

  • Standard structure for new projects: Elevenpack provides a predefined structure for new projects, making it easy for developers to get started.
  • Basic initial layout: The tool includes a basic initial layout template, which can be customized according to the project's needs.
  • JS & CSS bundling through webpack: Elevenpack enables bundling of JavaScript and CSS files using webpack.
  • Cache busting for production deployments: It supports cache busting for production deployments, ensuring that assets are properly updated when changes are made.
  • Modern JS support through Babel: Elevenpack allows developers to use modern JavaScript features, thanks to its integration with Babel.
  • Modern CSS support through PostCSS: It also supports modern CSS features through its integration with PostCSS, including plugins such as postcss-import, postcss-preset-env, and cssnano.
  • Default inclusion of Tailwind library: The Tailwind CSS library is included by default, making it convenient for developers who prefer to use it.
  • Vendor assets: Developers can easily include external assets by placing them in the src/vendor folder, which will be copied to the output folder.

Summary

Elevenpack is a powerful tool for developers who want to quickly start working with Eleventy and leverage modern JS and CSS workflows. It provides a standard project structure, supports bundling and cache busting of JavaScript and CSS files, and includes popular libraries like Tailwind CSS. With its seamless integration with tools like webpack, Babel, and PostCSS, Elevenpack offers a performant build output and a convenient development experience.

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.