Fylgja 11ty starter template is a static-site starter built on Eleventy (11ty) that uses Fylgja CSS for styling, preconfigured with Sass, PostCSS, Rollup, and a service worker for offline support. It provides a bare-bones starting point for building a new site by cloning the GitHub template and editing a few config files.
What is the Fylgja 11ty starter template?
The Fylgja 11ty starter template is an open-source GitHub template that scaffolds an Eleventy static site with the Fylgja CSS framework. It takes source files written in Markdown, SCSS, and JavaScript, and outputs a static HTML site ready to deploy to any static host. The template is maintained by the Fylgja project and is based on their own website, fylgja.dev, slimmed down to essential features.
Key Features
- Eleventy (11ty) — Built on a recent version of Eleventy, the static site generator that converts Markdown and data files into plain HTML.
- Fylgja CSS — Includes the Fylgja CSS framework for styling, which is a modular, lightweight CSS system.
- Eleventy Sass Compiler — Compiles SCSS source files into CSS as part of the Eleventy build pipeline.
- PostCSS — Processes the compiled CSS with PostCSS for additional transformations and optimizations.
- Rollup — Bundles JavaScript modules via Rollup for efficient client-side scripts.
- HTML Dialog with outside-click close — Provides a prebuilt HTML dialog component that closes when clicking outside it.
- Eleventy Img & Navigation — Integrates eleventy-img for optimized images and eleventy-navigation for site menus.
- Prebuilt head — Ships with a default head section including Open Graph and Twitter card tags, plus support for page-specific CSS and JavaScript loading.
- Offline page with service worker — Includes a service worker and offline page so the site remains accessible without a connection.
Who is it for?
- Front-end developers who want a minimal Eleventy starter that already includes modern build tooling (Sass, PostCSS, Rollup) without extra UI frameworks. They can start a new project by clicking "Use this template" and editing a few config files.
- Design system maintainers working with Fylgja CSS who need a reference site or documentation site built on Eleventy. The template mirrors how fylgja.dev is structured.
- Static site hobbyists who want a fast, offline-capable personal site or blog with a service worker and SEO-friendly head tags out of the box.
What can you do with it?
- Launch a new static site — Use the GitHub "Use this template" button to create a repository, then deploy to Netlify or another static host; the included Netlify badge shows the demo deploy is working.
- Customize site metadata — Edit
src/_data/meta.jsto change the site title, description, and other global settings in one file. - Add page-specific assets — Load CSS and JavaScript per page through the prebuilt head, which supports page-specific scripts and styles.
- Build an offline-capable site — The included service worker and offline page let visitors view cached content when they're disconnected.
How does it work?
To use the template, click the green "Use this template" button on the GitHub repository to create your own copy. Then update the site URL in src/_data/env.js and site metadata in src/_data/meta.js. For deeper changes, the eleventy.js config and the Eleventy documentation are the next places to look. The README also points to the full package.json for a complete list of included dependencies.
FAQ
How do I start a new site with this template?
Click the "Use this template" button on the GitHub repository page. This creates a new repository with the starter files. After that, clone the repo locally, install dependencies, and run the Eleventy build to start developing.
What configuration files do I need to edit?
Most site-specific information lives in src/_data/meta.js. The only required change is the site URL in src/_data/env.js. If you need to add more advanced behavior, edit the eleventy.js configuration file.
Does this template support offline pages?
Yes. The starter includes a service worker and an offline page, so visitors can still access the site (or a cached offline page) when they lose connectivity.
What CSS framework does it use?
It uses Fylgja CSS, a lightweight and modular CSS framework. The styling is processed through the Eleventy Sass Compiler and PostCSS.
Is this template free to use?
Yes, it is an open-source GitHub template under the Fylgja project. You can use it for personal or commercial projects by using the "Use this template" feature.
