layout	title
default.njk	Nunjucks Components from a Design System

{{ title }}

This repository contains a demo of a simple Eleventy powered website, using Nujucks and Sass, and exploiting a Design System exposing their components in Nunjucks.

It uses the ‹div›RIOTS' Nunjucks Tech Sample Starter kit as a Design System.

Getting Started

Run the project locally:

1. Clone the project:

   $ git clone https://github.com/divriots/demo-nunjucks-eleventy.git
   $ cd demo-nunjucks-eleventy

2. Install the NPM dependencies

   $ npm install

3. Run the app in development mode task so you can live-reload it during development:

   $ npm start

4. Point your browser at http://localhost:8080/README. You'll get access to this very page, in wrapped in the default Nunjucks layout.

How it works?

This project uses Nunjucks templates. To be able to import Design System resources and components, it declares in the .eleventy.js js config an import path for Nunjucks pointing to the Design System in the node_modules folder:

new Nunjucks.FileSystemLoader([
  "_includes",
  "node_modules/@backlight-dev/divriots.starter-nunjucks/",
])

This way, you can import/include any component from the Design System as any regular Nunjucks files:

{% import "button/src/button.njk" as Button %}
{{ Button.btn('Hello Rioters 🤘 !') }}

Resources

• Live Coding Session implementing this Demo
• Nunjucks Start kit in Backlight

---

The button below 👇 comes from the Design System and is embedded by the default layout, as well as the theme. Click it!