Twelvety is a pre-configured Eleventy starter project built to be fast. It includes:
- 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
Write components like this:
<main class="home">
<h1 class="home__title">Twelvety</h1>
</main>
{% stylesheet 'scss' %}
@import "mixins";
.home {
@include container;
&__title {
color: red;
}
}
{% endstylesheet %}
{% javascript %}
console.log("Super fast 💨");
{% endjavascript %}
See the GitHub repository for documentation.