Project structure

If you want manage design system content, you will need to understand project structure.

Folders starting with an underscore _ play the special role for Jekyll. To understand those folders read the article about Jekyll directory structure.

Other folders and .md files contain content of the design system. We usually use this structure of content, but you can modify it according yours needs.

design-system-template/
├── _data/
│   └── navigation.yml
├── _patterns/
│   ├── button/
│   │   ├── button-default.html
│   │   └── button-primary.html
│   └── pagination/
│       └── pagination.html
├── _posts/
│   └── [publish changes in design system, RSS feed is generated by feed.xml file]
├── assets/
│   └── [css, fonts, icons and js files necessary for patterns preview]
├── getting-started/
│   └── [about design system, for designers and for developers]
├── guidelines/
│   └── [description of principles, guidelines and rules]
├── styles/
│   └── [description of basic styles as colors, typography, grid etc.]
├── components/
│   └── [description of components]
├── page-templates/
│   └── [description of page templates]
├── index.md
├── feed.xml
└── [other files]

_data

Data contains two files:

• locale.yml is used for localize some UI string from English to any language.
• primary-nav.yml is definition of left navigation.

_patterns

Patterns are code snippets of components used for live preview. Patterns are based on custom collection, because they are used for live previews and code examples on component pages. Front Matter parameters:

---
layout: default
---

You can also define custom layout, in _layout folder.

_posts

Posts are used as simple blog feature. They are also based on custom collection. Front Matter parameters:

---
layout: post
title:  "Initial Release"
date:   2017-05-13 02:00:00 -0400
categories: update
---

assets

Images, JS and CSS files needed for DS.

Other folders

Other folders (getting-started, guidelines, components, page-templates) contains page content. Folders can be managed according your project requirements. Basically you can add, remove or rename any folder and file, because these pages are managed by Jekyll. You can read more in official documentation.

How to create content specific for design system is described in next section.