Eleventastic
An Eleventy Starter Kit
Overview
Eleventastic is a simple Eleventy Starter Kit that serves as a base for all new 11ty projects. It provides a range of features including a CSS pipeline, JS bundling, SVG icon sprite generation, critical CSS, and HTML minification. This starter kit eliminates the need for external builds as everything runs through 11ty. It is easy to install and deploy, making it a convenient choice for developers.
Features
- CSS Pipeline (Sass, CleanCSS): Allows developers to use Sass for styling and optimizes the output using CleanCSS.
- JS Bundling (Webpack): Enables the use of ES6 syntax and transpiles the code to ES5 using Babel. The bundled code is minified in production.
- SVG Icon Sprite Generation: Automatically generates a symbol sprite file from SVG icons added to the designated folder. The filename is used as the symbol identifier, and the icons can be easily referenced using shortcodes.
- Critical CSS: Inlines critical CSS into the head of the homepage to improve performance. This is done using the critical package in an automatic transform.
- HTML Minification: Minifies the HTML output to optimize file size and improve loading times.
- No External Builds: All processes (CSS pipeline, JS bundling, etc.) run through 11ty, eliminating the need for external build tools.
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- 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.
