Skip to content

Latest commit

 

History

History
69 lines (48 loc) · 2.19 KB

README.md

File metadata and controls

69 lines (48 loc) · 2.19 KB
Raw
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

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