VF Eleventy is a boilerplate that pairs the Eleventy (11ty) static site generator with Visual Framework 2.0 components, letting you generate static sites from a preconfigured project structure.
What is VF Eleventy?
VF Eleventy is an open-source boilerplate maintained by the Visual Framework project (repository: visual-framework/vf-eleventy). It combines the 11ty static site generator with direct access to Visual Framework 2.0 components. You input source files under ./src, run gulp commands, and get a fully built static site in /build. The template is distributed on GitHub and supports both interactive scaffolding and one-click repository creation.
Key Features
- Eleventy (11ty) static site generation — Pages and templates are processed by 11ty from ./src into a static /build output, with configuration via eleventy.js.
- Visual Framework component integration — Install VF components from npm, such as @visual-framework/vf-logo, using yarn add, or manually copy components into ./src/components.
- Interactive project creation — Run
yarn create @visual-framework/vf-project your-new-site-nameto scaffold a new site through an interactive prompt (requires npm/yarn). - GitHub template workflow — Use the "Use this template" button at https://github.com/visual-framework/vf-eleventy/generate to create a new repository and clone it locally.
- Gulp-based build pipeline —
gulp devrenders and serves the site locally;gulp buildbuilds static assets for production. - Custom component scaffolding —
gulp vf-componentcreates a new local VF-compatible component under ./src/components; a vf-sample component is already included. - Centralized site configuration — Edit ./src/site/_data/siteConfig.js, vfConfig in package.json, and pathPrefix in eleventy.js to adjust site metadata and asset paths.
- Local overrides support — Drop ad hoc CSS/JS into ./src/components/vf-local-overrides without touching the VF pipeline.
Who is it for?
- Eleventy developers — Anyone who wants a preconfigured 11ty project that already includes Visual Framework components and a gulp build chain, skipping the setup time.
- Visual Framework users — Teams and individuals building sites on the Visual Framework design system who need a quick starting point with component updates via yarn upgrade-interactive --latest.
- Prototypers — Designers or developers who want to spin up a new static site interactively using
yarn create @visual-framework/vf-projector the GitHub template generator.
What can you do with VF Eleventy?
- Scaffold a new static site: Run the create command or use the GitHub template, then configure siteConfig.js, vfConfig, and pathPrefix to tailor the site.
- Add Visual Framework components: Install ready-made components with
yarn add @visual-framework/vf-logoor other packages, and update them all withyarn upgrade-interactive --latest(aliasyarn run update-components). - Build and test locally: Use
gulp devto serve the site during development, thengulp buildto output static assets into /build for deployment. - Create custom components: Run
gulp vf-componentto generate a new VF-compatible component under ./src/components, editing the included vf-sample as a starting point.
How does VF Eleventy work?
After cloning or scaffolding a project, you install dependencies with yarn install. The build process runs through gulp: gulp dev renders pages via Eleventy and serves them locally, while gulp build creates the static site under /build. To extend the site, you add components through yarn packages or by dropping files into ./src/components, and update local CSS/JS in vf-local-overrides.
FAQ
Why use yarn instead of npm?
The VF Eleventy README explains that Yarn is considerably faster at installing Visual Framework components and produces a smaller dependency footprint — about half the total file size. Yarn also enables yarn upgrade-interactive --latest, which simplifies updating VF components.
How do I add a Visual Framework component?
Run yarn add @visual-framework/vf-logo (replacing with any VF component name) from the project root. For customisation, you can download a pattern and copy it manually into ./src/components/vf-component-name.
How do I update Visual Framework components?
Use yarn upgrade-interactive --latest, or the alias yarn run update-components. This command works because the project uses Yarn as its package manager.
What does gulp dev do?
gulp dev renders the Eleventy site and serves it locally, so you can preview changes at a local URL. The production counterpart, gulp build, generates static assets into the /build directory.
