Eleventy Themes Logo Eleventy Themes
Twelvety screenshot

Twelvety

Author Avatar Theme by Gregives
Updated: 27 Sep 2021
296 Stars

An Eleventy starter project built to be fast

Github Live Preview

Categories

Scss

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

Installation

To install Twelvety, you will need to follow these steps:

  1. Click the “Use this template” button at the top of the Twelvety repository to create your own Twelvety repository in your GitHub account.
  2. Clone or download your new Twelvety repository onto your computer.
  3. Make sure you have Node.js and npm installed. These are included with Node.js.
  4. Open a terminal or command prompt and navigate to the Twelvety repository directory.
  5. Run the following commands:
    • npm install to install the required packages
    • npm run serve to run a development server with live-reload
    • npm run build to build for production
    • npm run clean to clean the output folder and Twelvety cache

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.