Pangolin Pattern Library

Getting Started

Prerequisites

Install the CLI globally:

# Yarn
yarn global add @pangolin/cli

# npm
npm install -g @pangolin/cli

Create a new project

pangolin create project-name

This creates a project in a new folder project-name. To create a new project in the current directory call pangolin create ..

Project structure

.
├── src
│   ├── components
│   │   └── …
│   ├── functions
│   │   └── …
│   ├── public
│   │   └── …
│   ├── setup
│   │   └── …
│   ├── templates
│   │   └── …
│   ├── main.js
│   └── main.scss
├── .babelrc
├── .browserslistrc
├── .eslintrc.json
├── .stylelintrc.json
├── [jsconfig.json]
├── [pangolin.config.js]
└── postcss.config.js

Config files

File Purpose
.babelrc Babel configuration
.browserslistrc Browserslist configuration
.eslintrc.json ESLint configuration
.stylelint.json stylelint configuration
jsconfig.json Optional VSCode configuration
pangolin.config.js Optional Pangolin configuration
postcss.config.js PostCSS configuration

src folder

Folder Purpose
components From the smallest bit to the largest page — everything that can be abstracted into a general pattern lives here.
functions Changeable General purpose Sass or JavaScript functions.
public Static files that will be copied 1:1 to the output directory.
setup Changeable Base files for global setup, e.g. variables or body styles.
templates Nunjucks page templates. Must contain at least a default.njk template.

← Configuration →