EleventyStarter

elf — Eleventy Starter Template

By stowball

Elf is an Eleventy-based starter that uses EJS for templates and compiles Sass and JavaScript through webpack, with built-in Babel transpilation and Autoprefixer vendor prefixing.

Open Source SiteDownload Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

2 previews
Desktop homepage1 / 2
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 2

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-09-30View source

What stands out

A quick read of the recorded project description.

01

Generates a static site with Eleventy, using EJS as the template language

02

Compiles Sass and JavaScript assets through webpack

03

Uses Babel to transpile and polyfill JavaScript, and Autoprefixer to handle CSS vendor prefixes

04

Integrates ESLint with an Airbnb base configuration for code checking

05

The src directory is divided into _components, _data, _layouts, _pages, assets and images, with output to dist

Template Details

Elf is an Eleventy starter project that aims to combine Eleventy with common front-end tools such as webpack, Babel and Sass, making it easy to start building a static site right away. Templates use EJS, styles are written in Sass, JavaScript is transpiled and polyfilled by Babel, CSS vendor prefixes are added by Autoprefixer, and webpack compiles Sass and JavaScript assets together. For code checking, ESLint with an Airbnb base configuration is integrated.

The project structure is divided by responsibility: under src there are _components (UI partial templates), _data (Eleventy data files), _layouts (base page layouts), _pages (page templates), assets (css and js source files) and images. Directories starting with _ are processed by Eleventy, assets are handled by webpack, images are copied to the output directory, and the final output goes to dist at the project root.

To use it, clone or fork the repository, enter the directory and run npm install. For development, run npm run dev and preview on port 8080; for a production build, run npm run prod and npm run serve:prod, then view on port 5000. The repository uses the MIT license, so the code can be used, modified and distributed for free, but third-party assets such as demo images, fonts and icons need separate license checks.

EleventyStarter

Is it right for your project?

Use Cases

  • As a starting point when building a static site with Eleventy together with webpack, Babel and Sass
  • Projects that need an EJS template and Sass styling workflow
  • Sites that want JavaScript transpiled and polyfilled by Babel
  • Projects that need ESLint and Airbnb rules to enforce code style

Suitable For

  • Developers familiar with npm scripts and basic Eleventy usage
  • Static site projects that want EJS as the template language
  • Front-end projects that need a Sass and webpack build process
  • Teams comfortable organizing source code into directories such as _components and _pages

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    Clone or fork the repository, enter the project directory and run npm install

  2. 2

    For development preview, run npm run dev and visit http://localhost:8080

  3. 3

    For a production build, run npm run prod, then npm run serve:prod to view at http://localhost:5000

  4. 4

    Directories starting with _ are processed by Eleventy, assets are handled by webpack, images are copied, and the output directory is dist

  5. 5

    The MIT license covers only the code; third-party assets such as demo images, fonts and icons need separate license checks

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not mean external services or third-party assets are free.

Must comply with when using

  • You may use, modify, commercially use and distribute the code of this version for free.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Demo images, fonts, icons and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments or AI may incur separate charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text
https://github.com/stowball/elf/blob/master/LICENSEhttps://github.com/stowball/elf/blob/master/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-01. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
Partly documented · 72 / 100
Technologies
Eleventy
Website type
Starter
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2021-03-16
Screenshot last checked
2026-10-01

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Eleventy as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: b3432ce3bd2857a10373799bd3ec8f47fd73eaebcde5355ee219aca15db72307

2026-10-01T14:58:38.893Z

Source file / repository
<div align="center">
  <img
    alt="Elf logo"
    height="200"
    src="https://github.com/stowball/elf/blob/master/src/images/logo.svg?raw=true"
  />

# Elf

</div>

Elf is a simple, magical [Eleventy](https://www.11ty.dev/) 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](https://dev.to/stowball/creating-a-production-ready-eleventy-project-with-webpack-babel-and-sass-35ep).

## 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

```sh
npm run dev
```

Browse to [http://localhost:8080](http://localhost:8080).

## Running and serving a prod build

```sh
npm run prod
npm run serve:prod
```

Browse to [http://localhost:5000](http://localhost:5000).

## Technologies used

* [Eleventy](https://www.11ty.dev/)… obviously
* [EJS](https://ejs.co/) as the templating language
* [Sass](https://sass-lang.com/) for writing CSS
* [Babel](https://babeljs.io/) for transpiling and polyfilling JavaScript
* [Autoprefixer](https://github.com/postcss/autoprefixer) for vendor prefixing CSS
* [Webpack](https://webpack.js.org/) for compiling the Sass and JavaScript assets
* [ESLint](https://eslint.org/) and [Airbnb's base configuration](https://www.npmjs.com/package/eslint-config-airbnb-base) 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.
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

eleventy-base-blog

eleventy-base-blog

The officially maintained Eleventy blog starter template, MIT licensed, includes posts, tag pages, archives, an about page, a 404 page, an Atom feed, and sitemap.xml, with per-page CSS bundling, syntax highlighting, and image optimization.

Eleventy · Blog

eleventy-garden

eleventy-garden

An Eleventy-based digital garden starter template for building a personal knowledge site organized through hyperlinks. It supports Roam-style double-bracket links, backlink display, and hover cards for backlinks.

Eleventy · Starter

eleventastic

eleventastic

Eleventastic is an Eleventy starter kit by Max Böck, used as the base for new 11ty projects. It integrates Sass, Webpack, SVG icon sprites, critical CSS, and HTML minification into the 11ty build without external steps.

Eleventy · Starter

neat-starter

neat-starter

An Eleventy-based static site starter template integrating Netlify CMS, Alpine.js, and Tailwind CSS. It provides a ready-to-run example site, a one-click Netlify deploy button, and an MIT-licensed codebase.

Eleventy · Starter

Eleventy-Starter-Boilerplate

Eleventy-Starter-Boilerplate

An Eleventy-based blog starter template with Tailwind CSS, Webpack, PostCSS, ESLint, and Prettier, optional Netlify CMS, and built-in SEO metadata, sitemap, and 404 page.

Eleventy · Blog

eleventy-plus-vite

eleventy-plus-vite

A static site starter combining Eleventy and Vite, with a live-reloading development server, Vite-based production post-processing, a PostCSS pipeline with Autoprefixer and cssnano, critical CSS inlining and asynchronous CSS loading, a web font loading strategy example, fluid typography, basic dark mode, an…

Eleventy · Starter