Eleventy Plus Vite
A clean and fast Eleventy Starter Project with Vite
Overview
Eleventy Plus Vite is a clean and fast Eleventy Starter Project with Vite. It incorporates several features to enhance development efficiency and performance. This project has a focus on providing a seamless workflow for developers using Eleventy.
Features
- Eleventy 2.0.0-canary: This project utilizes the latest version of Eleventy, offering improved performance and new features.
- New Eleventy 2.0 Dev Server: The project includes a new development server with live reload, making it easier for developers to preview their changes.
- Vite Middleware: Vite is used as middleware in the Eleventy Dev Server, utilizing the eleventy-plugin-vite. This speeds up the development process by providing faster build times.
- CSS/Sass Post-Processing: The project uses PostCSS to post-process CSS/Sass files. This includes features like autoprefixing and minification with cssnano.
- Opinionated CSS/Sass Structure: The project adopts a structured approach to organizing CSS/Sass files, ensuring a clean and maintainable codebase.
- Critical CSS Generation: The project generates critical CSS and inlines it using the rollup-plugin-critical. This helps to optimize the loading speed of the website.
- Web Font Loading Strategy: An example implementation of a web font loading strategy is provided, incorporating critical FOFT (Flash of Unstyled Text) with preload to improve performance.
- Fluid Typography: The project includes basic support for fluid typography based on the Utopia CSS framework.
- Dark Mode Support: The project implements basic dark mode support using prefers-color-scheme and CSS Custom Properties. This allows for seamless switching between light and dark themes.
- Focus-Visible Polyfill: A polyfill for the focus-visible CSS selector is included, ensuring consistent styling for focusable elements across different browsers.
- RSS Feed and XML Sitemap: The project generates an RSS feed and XML sitemap for improved SEO and content discovery.
- Excellent Lighthouse Score: The project achieves a perfect Lighthouse score of 100 on all four metrics, indicating a high level of performance, accessibility, best practices, and SEO.
- 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.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- 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.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
