11ty-yetty.md

title	github	demo	author	ssg	cms	date	archetype	description	stale
Eleventy Yetty	https://github.com/ygoex/yetty	https://yetty.netlify.app/	Yolanda Gorriz Exposito	Eleventy	No CMS	2021-08-17 00:00:00 UTC	Blog Portfolio	Yetty is yet another [Eleventy](https://11ty.io) starter kit for my (& your) new projects. Built with accessibility and performance in mind.	true

Yet another starter kit for Eleventy

Yetty is yet another Eleventy starter kit for my (& your) new projects. Built with accessibility and performance in mind. It also gives you a well organised starting point to extend it for yourself.

Features

• Sass/Scss: Scss files are compiled before Eleventy builds the site. The files are compiled in the ./src/styles folder and then will be passed through copy (see .eleventy.js) to the new site created under ./dist/. For Netlify users, an alternative option with plugins is explained here: https://css-tricks.com/making-my-netlify-build-run-sass/.
• Critical CSS: Critical CSS is automatically included in the head of the document using the eleventy-critical-css plugin.
• PostCSS (Autoprefixer and PurgeCSS): Both dependencies have been set up to run through the main css stylesheet after Eleventy has generated the dist folder.
• Persistent dark mode using local storage as seen here: https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/
• Cache busting via filter based on https://rob.cogit8.org/posts/2020-10-28-simple-11ty-cache-busting/.
• HTML minified on prooduction with https://www.npmjs.com/package/html-minifier package.
• PWA using https://github.com/okitavera/eleventy-plugin-pwa plugin.
• JS compilation and minification with Webpack CLI.
• Image processing with eleventy-img plugin. Generates multiple sizes images in two different formats (jpg and webp), and markup with <figure>, <picture> and native lazy loading.
• Modernizr CLI: To build a custom and minified version of the library as seen here: https://v2.14islands.com/blog/2016/04/20/better-way-to-use-modernizr-with-command-line-config/. Yetty is using it to detect if the browser supports Webp as background-image in CSS.