A better way to manage your front-end patterns - View Demo
The High Level
Vault is a front-end pattern library, which holds patterns that are used across a site. Examples of patterns are navbars, buttons, and headings.
It is a rails implementation of Rareloop's Primer tool.
- Clone this repo somewhere safe
git clone https://github.com/pusher/vault.git
- Bundle install
- To run vault locally, just spin up the rails server
- (optional). Vault works best when used in a team. In order to keep everyone on the same page, it's always a good idea to have your library set up somewhere central (Heroku's free tier is great for this kind of thing).
Creating new patterns
Adding a new pattern is simple. Just use the built in CLI:
rails generate component navigation/global/top
This will generate:
- a reference to your scss partial in application.scss
Patterns can be nested as many levels deep as is required
Creating elements follows the same pattern:
rails generate element forms/buttons/cta
Patterns consist of both elements and components.
Elements are the most basic patterns. Buttons, form inputs, and headings (h1, h2, h3...) are all examples of elements.
Components are standalone blocks that can be used across the site. They can consist of multiple elements. For example an image slider, or a navigation bar.
Requests and Improvements
If you have any ideas for new features or a suggestion to improve Vault, feel free to create a PR, or open a new issue.