Pangolin Pattern Library

Getting Started

Prerequisites

Create a new project

The following commands create a project in a new folder called project-name. To create a new project in the current directory use a . (dot) instead of a project name.

With npx

npx -p @pangolin/cli pangolin create project-name

With globally installed CLI

pangolin create project-name

Project structure

.
├── src
│   ├── components
│   │   └── …
│   ├── functions
│   │   └── …
│   ├── public
│   │   └── …
│   ├── setup
│   │   └── …
│   ├── templates
│   │   └── …
│   ├── main.js
│   └── main.scss
├── .browserslistrc
├── .eslintrc.js
├── babel.config.js
├── [pangolin.config.js]
├── postcss.config.js
└── stylelint.config.js

Config files

File Purpose
.browserslistrc Browserslist configuration
.eslintrc.js ESLint configuration
babel.config.js Babel configuration
pangolin.config.js Optional Pangolin configuration
postcss.config.js PostCSS configuration
stylelint.config.js stylelint configuration

src folder

Folder Purpose
components Everything is a component: the smallest button and the most complex page.
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 →