Eleventastic
A simple Eleventy Starter Kit, my base for all new 11ty projects. (Demo Site)
Features
- CSS Pipeline (Sass, CleanCSS)
- JS Bundling (Webpack)
- SVG Icon Sprite Generation
- Critical CSS
- HTML Minification
- No external builds, everything runs through 11ty
Getting Started
To install the necessary packages, run this command in the root folder of the site:
npm install
Commands
- Run
npm start for a development server and live reloading
- Run
npm run build to generate a production build
Deploy a fork of this template to Netlify
CSS
Styling works with Sass. The main index file is in src/assets/styles/main.scss. Import any SCSS code you want in there; it will be processed and optimized. The output is in dist/assets/styles/main.css
JS
Javascript can be written in ES6 syntax. The main index file is in src/assets/scripts/main.js. It will be transpiled to ES5 with babel, bundled together with webpack, and minified in production. The output is in dist/assets/scripts/main.js
SVG Icons
All SVG files added to src/assets/icons will be bundled into a symbol sprite file. The SVG filename will then be used as the symbol identifier and the icon can be used as a shortcode.
For example, if you have a github.svg file in that folder, you can display it anywhere by using {% icon "github" %} in your templates.
Critical CSS
Currently, critical CSS will only be inlined in the head of the homepage. This is done by using the critical package in an automatic transform.
Credits
My heartfelt thanks to these people, whom I shamelessly copied ideas from: