Documentation and CSS Framework for Fizz, Provi's design system.
- #design-system on Slack
- Office Hours, every Wednesday from 11am-Noon Central (https://meet.google.com/xnq-zwxf-zxy) -- drop in anytime
- Submit a ticket in the Design System Jira board
You should (ideally) be able to implement any design using only Fizz classes. If you need help, please reach out in the #design-system Slack channel. If you get stuck and feel like the only solution is to write inline CSS, please reach out for help.
Using the Fizz CSS Framework
You can install Fizz as an npm package:
npm install @peruvianidol/fizz --save
In the Provi app:
- to install the current version, run
- to upgrade to the latest version, run
yarn upgrade @peruvianidol/fizz --latest
Import it into the SCSS in your project:
Scoped vs. Unscoped
To prevent collisions with existing Provi styles when using
fizz.css, you need to enclose any Fizz classes in a container with the class
fizz-styles, preferably on the body, but it can be on any parent of an element using Fizz classes.
You can use
fizz-unscoped.css if you're starting a new project with no existing styles to use the framework without having to include the
Using Fizz in Codepen
You can create a new pen that uses the latest version of (unscoped) Fizz by visiting https://pro.vi/codepen.
Installing the documentation site
You only need to do this if you're making changes to the documentation site.
- Clone this repo
npm startto serve your Eleventy site at
https://localhost:8080and watch for changes
Email email@example.com or file an issue in this repo. Thanks!