Eleventy Themes Logo Eleventy Themes
Yetty screenshot

Yetty

Author Avatar Theme by Ygoex
Updated: 1 Nov 2021
52 Stars

Yet another 11ty boilerplate to start a new website with optional blog. This boilerplate is based on eleventy-base-blog et al.

Github Live Preview

Categories

Scss

Overview

Yetty is a starter kit for building projects with Eleventy. It is designed with accessibility and performance in mind. It includes features such as Sass/Scss compilation, Critical CSS inclusion, PostCSS with Autoprefixer and PurgeCSS, persistent dark mode, cache busting, HTML minification, PWA support, JS compilation and minification with Webpack CLI, image processing with eleventy-img plugin, and Modernizr CLI integration. Yetty can be deployed on Netlify.

Features

  • Sass/Scss: Scss files are compiled before Eleventy builds the site.
  • Critical CSS: Critical CSS is automatically included in the head of the document.
  • PostCSS (Autoprefixer and PurgeCSS): PostCSS dependencies have been set up to run through the main css stylesheet.
  • Persistent dark mode: Dark mode is stored in local storage.
  • Cache busting: Cache busting is implemented using a filter.
  • HTML minification: HTML is minified on production.
  • PWA: Yetty includes PWA support.
  • JS compilation and minification: JS files are compiled and minified using Webpack CLI.
  • Image processing: Images are processed using the eleventy-img plugin.
  • Modernizr CLI: Yetty uses Modernizr CLI to detect browser support for Webp.

Installation

To use Yetty, you need to have the following requirements:

  • Node.js v10 or higher installed.
  • npm 7.20.0 or higher installed.

To get started with Yetty, follow these steps:

  1. Clone this repository or generate a repo from the template on GitHub.
  2. Navigate to the directory.
  3. Install the dependencies.
  4. Edit the _data/metadata.json file and adjust the values to your details.
  5. Run Eleventy for local development.

To build a production version, use the command: npm run build.

To run in debug mode, use the command: npm run debug.

Summary

Yetty is a starter kit for building projects with Eleventy. It offers various features to enhance accessibility and performance, such as Sass/Scss compilation, Critical CSS inclusion, PostCSS with Autoprefixer and PurgeCSS, persistent dark mode, cache busting, HTML minification, PWA support, JS compilation and minification, image processing, and Modernizr CLI integration. With easy installation steps, it provides a convenient way to get started with building Eleventy projects.