Yetty
Yet another 11ty boilerplate to start a new website with optional blog. This boilerplate is based on eleventy-base-blog et al.
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.
- Eleventy
11ty is a static site generator that allows developers to build fast, modern websites using HTML, Markdown, and other templating languages, without the need for a complex build system.
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Netlify
Netlify is a cloud-based web development platform that provides a range of tools and services to help developers build, deploy, and manage modern web applications. It offers features such as continuous deployment, serverless functions, and CDN hosting, making it an ideal platform for building fast, scalable, and secure websites.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Pwa
A Progressive Web App (PWA) is a type of web application that uses modern web technologies to provide a native app-like experience to users, including offline functionality, push notifications, and device hardware access. PWAs can be installed on a user's home screen and launched like a traditional app, but do not require a separate app store listing or download.
- Stylelint
Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.
