Fizz Design System
Our Design System is a common language across design, engineering and product that describes how we create digital products at Provi.
Need Help?
- #design-system channel on Slack
- Submit a ticket in the Design System Jira board
- File an issue on GitHub
Using Fizz
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.
See the CSS section for more info on the methodology and class names of the framework itself.
CSS
You can install Fizz as an npm package:
npm install @getprovi/fizz --save
In the Provi app:
- to install the current version, run
yarn install
- to upgrade to the latest version, run
yarn upgrade @getprovi/fizz --latest
Import it into the SCSS in your project:
@import 'node_modules/@getprovi/fizz/src/scss/fizz.scss'
Scoped vs. Unscoped
To prevent collisions with existing Provi styles when using fizz.scss
or 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.scss
or fizz-unscoped.css
if you're starting a new project with no existing styles to use the framework without having to include the fizz-styles
class.
CodePen
You can create a new pen on CodePen that automatically pulls in the latest version of Fizz here:
Great for prototyping!