Tailwind Resources Logo Tailwind Resources
Elevenpack screenshot

Elevenpack

Author Avatar Theme by Deviousdodo
Updated: 3 Jun 2020
26 Stars

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.

Installation

To install and use Elevenpack, follow these steps:

  1. Clone the Elevenpack repository.
  2. Navigate to the project’s root directory.
  3. Run yarn install to install the required dependencies.
  4. Customize the project’s structure and configuration files according to your needs.
  5. Use the commands yarn start to start the development server, and yarn build to generate the production build.
  6. Access the output files in the dist directory.

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.