A clean and fast Eleventy Starter Project with Vite.

• Vite as Middleware in Eleventy Dev Server (uses eleventy-plugin-vite)
• Eleventy build output is post-processed by Vite (with Rollup)
• CSS/Sass post-processing with PostCSS incl. Autoprefixer and cssnano
• Uses my own opinionated CSS/Sass structure
• Critical CSS, generated and inlined via rollup-plugin-critical. The main CSS file is then loaded asynchronously with Scott Jehl’s media loading strategy (adds media="print" and swaps to media="all" once loaded)
• Example implementation of a web font loading strategy (critical FOFT with preload)
• Basic fluid typography based on Utopia
• Basic dark mode support (using prefers-color-scheme and CSS Custom Properties)
• Polyfill for focus-visible

By default, this starter project uses Sass with an opinionated folder structure. Feel free to replace this structure with your own. If you prefer to write standards-compliant, good old plain CSS, this is also supported. Nesting is then possible via the PostCSS Nesting plugin, following the CSS Nesting specification.

Autoprefixer adds necessary browser prefixes. The browserslist settings can be adjusted in package.json.

The site uses various technologies cobbled together. Here's some of them:

• Astro: website build tool that can act as a static site generator.
• Sass: because CSS can be fun.
• Prettier: an opinionated code formatter.
• Husky: Git hooks manager.

This project is based on Eleventy Plus Vite by Matthias Ott.

Source code in this repository is available under the MIT License.