Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/philight/11ty-vite-tailwind
https://github.com/philight/11ty-vite-tailwind
Last synced: 26 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/philight/11ty-vite-tailwind
- Owner: Philight
- License: mit
- Created: 2024-12-04T22:02:56.000Z (29 days ago)
- Default Branch: main
- Last Pushed: 2024-12-05T02:16:42.000Z (29 days ago)
- Last Synced: 2024-12-05T03:20:48.822Z (29 days ago)
- Language: TypeScript
- Size: 249 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Eleventy Plus Vite
🏃💨
A clean and fast Eleventy Starter Project with Vite.
[](https://app.netlify.com/sites/eleventyplusvite/deploys)
## Features
- Eleventy v3
- Eleventy Dev Server with live reload
- Vite v5
- Vite as Middleware in Eleventy Dev Server (uses [eleventy-plugin-vite](https://github.com/11ty/eleventy-plugin-vite/))
- Eleventy build output is post-processed by [Vite](https://vitejs.dev) (with Rollup)
- CSS/Sass post-processing with PostCSS incl. [Autoprefixer](https://github.com/postcss/autoprefixer) and cssnano
- Uses [my own opinionated CSS/Sass structure](https://matthiasott.com/notes/how-i-structure-my-css)
- Critical CSS, generated and inlined via [rollup-plugin-critical](https://github.com/nystudio107/rollup-plugin-critical). The main CSS file is then loaded asynchronously with [Scott Jehl’s `media` loading strategy](https://www.filamentgroup.com/lab/load-css-simpler/) (adds `media="print"` and swaps to `media="all"` once loaded)
- Example implementation of a web font loading strategy ([critical FOFT with preload](https://www.zachleat.com/web/comprehensive-webfonts/#critical-foft-preload))
- Basic fluid typography based on [Utopia](https://utopia.fyi)
- Basic dark mode support (using `prefers-color-scheme` and CSS Custom Properties)
- Polyfill for [focus-visible](https://matthiasott.com/notes/focus-visible-is-here)
- RSS feed 🧡
- XML sitemap
- Four Hundos Lighthouse score 💯💯💯💯
## Getting started
Start by [generating a new repository based on this project](https://github.com/matthiasott/eleventy-plus-vite/generate).
After cloning (or downloading) the repository to your local machine, install all dependencies with the command
```sh
npm install
```
## Run dev server
The project comes with Eleventy’s built-in development server. You can start the server with
```sh
npm start
```
or
```sh
npx @11ty/eleventy --serve
```
## Build
To trigger a production build, use
```sh
npm run build
```
or
```sh
npx @11ty/eleventy
```
## Deploy a fork of this template to Netlify
[](https://app.netlify.com/start/deploy?repository=https://github.com/matthiasott/eleventy-plus-vite)
## CSS
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](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting), following the [CSS Nesting specification](https://drafts.csswg.org/css-nesting-1/).
[Autoprefixer](https://github.com/postcss/autoprefixer) adds necessary browser prefixes. The [browserslist](https://github.com/browserslist/browserslist) settings can be adjusted in `package.json`.
## Roadmap
- Add more base styles and a demo page that shows example styles and components
- Add a toggle button for the dark mode theme
- More advanced base styles for modern CSS layout
- Webmention/IndieWeb support
## Feedback
Please provide feedback! 🤗 Ideally by [filing an issue here](https://github.com/matthiasott/eleventy-plus-vite/issues) – or via a pull request.
## Thank you!
This starter project would not have been possible without the many great sites and projects I was able to learn from, use as inspiration, and shamelessly copy code from:
- Zach Leatherman [zachleat.com](https://github.com/zachleat/zachleat.com)
- Max Böck’s [Eleventastic](https://github.com/maxboeck/eleventastic)
- Stephanie Eckles’s [11ty Netlify Jumpstart](https://github.com/5t3ph/11ty-netlify-jumpstart)
- Miriam Suzanne [miriamsuzanne.com](https://www.miriamsuzanne.com)