Pattern-lib Introduction
What is pattern-lib?
An open source pattern library built with Gatsby that uses Netlify-CMS as its backend.
What is a pattern library?
A pattern library is a collection of user interface (UI) patterns with guidelines on how to design and develop with each pattern.
Reference: Anatomy of a Pattern in a Pattern Library — Brad Frost
What’s the purpose of pattern-lib?
Pattern-lib enables designers to create and deploy their own pattern libraries to the web:
- Designers may not have the resources to build and deploy their own pattern library easily.
- A pattern library may help Evangelize design principles and systems within an organization and may speed up day-to-day design & development workflow.
- This product is free and open-source.
This project also provided cross.team an opportunity to experiment with the JAMstack and building open source products.
What is pattern-lib’s architecture?
Gatsby — An open-source React framework that allows to build incredibly fast statically generated sites. It uses GraphQL to allow users to connect to their data sources.
GraphQL — A query language that gives you the power to control how and where you consume your data, allowing you to write components that query for only the necessary data, nothing less, nothing more.
Netlify/Netlify-CMS — A company that provides a number of services including site deployment and hosting, automation, and namely for this project, Netlify-CMS: an open-source CMS that we can use to generate and store our data as markdown files, pushing them directly to our repo.
Material-UI — A React component library based Google’s Material Design. We’ll be using it to handle most of the styles in the application.
GitHub — Finally we need a place to store our code. We chose GitHub as our preferred repository manager, but if your team uses BitBucket or GitLab instead, you should be perfectly fine using either of those as well.
Tutorial
To learn how to build a pattern library of your own with pattern-lib, see Marcello Paiva’s tutorial in five parts:
Part 1 — Setting Up Your Gatsby Application
Part 2 — Deploying to Netlify & Netlify-CMS
Part 3 — Building Pattern Pages
Or dive into our repository directly:
