stowball / elf

Elf is a simple & magical Eleventy starter kit to help you create a project using standard technologies like webpack, Babel and Sass, while also considering ease of use, performance and browser compatibility.

Elf

Elf is a simple, magical Eleventy starter kit to help you create a project using standard technologies like webpack, Babel and Sass, while also considering ease of use, performance and browser compatibility.

If you'd like to know why Elf exists and how best to take advantage of it, read Creating a production-ready Eleventy project with webpack, Babel and Sass.

Getting started

1. Clone or fork this repo: git clone https://github.com/stowball/elf
2. cd into the project directory and run npm install

Running and serving a dev build

npm run dev

Browse to http://localhost:8080.

Running and serving a prod build

npm run prod
npm run serve:prod

Browse to http://localhost:5000.

Technologies used

• Eleventy… obviously
• EJS as the templating language
• Sass for writing CSS
• Babel for transpiling and polyfilling JavaScript
• Autoprefixer for vendor prefixing CSS
• Webpack for compiling the Sass and JavaScript assets
• ESLint and Airbnb's base configuration for linting

Project structure

src/
  _components/
    All UI partials
  _data/
    Eleventy data files
  _layouts/
    Base page layouts
  _pages/
    Each individual page template
  assets/
    css/
      index.scss
      All other scss files
    js/
      index.js
      All other js files
  images/
    All images used
Configuration and build files

Files in assets will be handled by webpack, Eleventy will transform all of the directories with a leading _, and will copy across any images.

Eleventy’s output will be to a dist directory at the root level.