This is an Eleventy starter project. It was made for me, Evan, but you might find it handy too. It uses Liquid templates, TailwindCSS, and Rollup.js + PostCSS for bundling.
To start in development/watch mode: npm start. Changes to Liquid, JavaScript, and CSS will trigger a build + page reload.
Build: npm run build
This starter uses TailwindCSS. The CSS file is generated by the Rollup.js PostCSS plugin.
The Tailwind config has some basic customizations I like to use in projects, like a custom sizing system and Material-style shadows.
Uses dark mode based on prefers-color-scheme and can also be manually switched with color-switch.liquid. User's choice pesists in local storage, superceding prefers-color-scheme.
Fonts are included in /fonts. Fonts load via
"Unceremonious @font-face"
and the "display" font is
preloaded to
reduce FOUT.
_includes contains the Dripicons icon set. I'm using
eleventy-plugin-svg-contents to easily render the icons inline.
eleventy-image generates multiple sizes of jpeg, webp, and avif for everything in /images. Use the picture shortcode to create a <picture> element that serves up the right image format based on browser support.
Rollup.js is used to bundle everything in /scripts.
Set up the site navigation in _data/navigation.json and footer navigation in _data/navigation_footer.json
Pages includes a blog page with pagination already set up.
_includes contains partials for some common components and elements.
HTML, CSS, and JS minification happens during a production build.