Twelvety

See the demo site

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.