Twelvety
An Eleventy starter project built to be fast
Overview
Twelvety is a pre-configured Eleventy starter project that is designed to be fast. It includes a component architecture, CSS pipeline using Sass, PostCSS, and CleanCSS, JS pipeline using Browserify, Babel, and Uglify, page-specific CSS and JS, inline critical CSS, deferred non-critical CSS, minified HTML, CSS, and JS, a responsive picture shortcode with AVIF and WebP support, and content-hash of assets. It allows users to easily deploy their own instance of Twelvety to Netlify and provides instructions for running it locally.
Features
- Component architecture
- CSS pipeline using Sass, PostCSS, and CleanCSS
- JS pipeline using Browserify, Babel, and Uglify
- Page-specific CSS and JS
- Inline critical CSS and defer non-critical CSS
- Minified HTML, CSS, and JS
- Responsive picture shortcode with AVIF and WebP support
- Content-hash of assets
Summary
Twelvety is a pre-configured Eleventy starter project that offers a range of features to help developers build fast websites. It has a component architecture, a CSS pipeline using Sass, PostCSS, and CleanCSS, a JS pipeline using Browserify, Babel, and Uglify, and many other useful features. The installation process is straightforward and can be done by following a few simple steps. Overall, Twelvety provides a solid foundation for building performant websites using Eleventy.
- Eleventy
11ty is a static site generator that allows developers to build fast, modern websites using HTML, Markdown, and other templating languages, without the need for a complex build system.
- 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.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.