Design System Docs

This is the 11ty Front-end codebase for https://design-system.lib.umich.edu.

The drupal cms repository is here: https://github.com/mlibrary/design-system-cms

Development Quick Start

1. Run the initialization script. (You are encouraged to read what's in it. There's nothing magical.)

./init.sh

2. Edit .env with real values. Ask a Design System developer.

3. Start development server and watch Sass (.scss) files (in parallel).

docker-compose up

4. View in browser

http://localhost:8888

Dev Scripts

• npm start to start the eleventy server (serves the /public folder) and watch the Sass /scss folder
• npm build to create a production build. Outputs into /public.

Building and watching files

npm-run-all is a CLI tool to run multiple npm-scripts in parallel or sequential. This is used in the dev scripts to watch Sass files and hot reload 11ty files in parallel.

---

Developing the Site

This is some very basic information. Please read the official 11ty documentation for an in-depth guide to building with 11ty.

Edit site metadata

src/_data/meta.json

This data can be used in the markdown and Nunjucks files. The following properties are supported:

Key	Description
siteName	The full name of the website.
productName	Shortened name to describe the Design System.
url	Site url
siteDescription	Description of the site used for SEO.
language	Language set in the html for the site.
author	Creator of the site. An object with author's name, url, and email.

Layouts

Layouts use the Nunjucks templating language.

Page layouts are located the the layouts folder.

src/_includes/layouts

There is a base.njk file for the HTML boilerplate. Additional layouts build off of that boilerplate.

/layouts
  base.njk
  home.njk
  landing-page.njk
  page.njk

Partials use the Nunjucks {% include %} and are located in the partials folder.

src/_includes/partials

Create pages/ page content

Index.md and 404.md

Static page content is created with markdown (.md). Use YAML front matter to add data to your content. Locally assigned front matter values override things further up the chain.

Drupal content

Pages are generated from the Drupal content coming from the Drupal JSON:API using the 11ty pagination feature.

src/_data/drupal.js

Pagination files to create landing page and page

There are two Nunjuck files- one to generate a page (page-generator.njk) and one to generate landing pages (landing_page-generator.njk).

Styles

Edit the styles in the src/scss folder. 11ty is watching that folder and building the Sass files into src/css. 11ty then passes through the CSS to the public folder.

Images

Add images to the src/img folder. 11ty is watching that folder and passing through the files to the public folder.

11ty Features

Plugins

This site uses the 11ty Navigation Plugin. This plugin supports infinite-depth hierarchical navigation and breadcrumbs.

Add the eleventyNavigation object to your front matter data (or in a data directory file). Assign a unique string to the key property inside of eleventyNavigation.

eleventyNavigation:
  key: about

Collections

Collections allow you to group data in certain ways using tags.

Important distinction: tags have a singular purpose in Eleventy... to construct collections of content. Not to be confused with tag labels used in blogs.

---

Resources

Please visit the official 11ty docs.

These were helpful for data configuration:

• Generate 11ty pages from external data
• Using 11ty JavaScript Data files to mix Markdown and CMS content...