Pattern Lab
This monorepo contains the core of Pattern Lab / Node and all related engines, UI kits, plugins and utilities. Pattern Lab helps you and your team build thoughtful, pattern-driven user interfaces using atomic design principles.
If you'd like to see what a front-end project built with Pattern Lab looks like, check out this online demo of Pattern Lab output.
Using Pattern Lab
Refer to the core usage guidelines
Installation
As of Pattern Lab Node 3.0.0, installation of Editions is accomplished via the command line interface.
The below assumes a new directory and project is required. This is likely what you want to do if starting from scratch. You could also run this within an existing project. The CLI will ask you for the installation location.
- Open a terminal window and following along below:
mkdir new-project cd new-project npm create pattern-labIf you get an error stating that
npxis not installed, ensure you are onnpm 5.2.0or later by runningnpm -vor install it globally withnpm install -g npx. Learn more about npx. - Follow the on-screen prompts to choose your Edition and a Starterkit should you want one.
- If you chose
edition-node, new commands in the "scripts" will be added in yourpackage.json. - If you chose
edition-node-gulp, agulpfile.jswill be added to your project.
Notice that
@pattern-lab/cliwas installed as a depdendency. Learn how to further use the cli in your own project.
Ecosystem
Core, and Editions, are part of the Pattern Lab Ecosystem. With this architecture, we encourage people to write and maintain their own Editions, Starterkits, and even PatternEngines.
Changelog
Each package within this monorepo has its own changelog. Below are the main ones to watch:
Support for Pattern Lab
Pattern Lab / Node wouldn't be what it is today without the support of the community. It will always be free and open source. Continued development is made possible in part from the support of these wonderful project supporters. If you want to learn more about supporting the project, visit the Pattern Lab / Node Patreon page.
:100: Thanks for support from the following:
Contributing
Refer to the contribution guidelines.