[![Netlify Status](https://api.netlify.com/api/v1/badges/a4b61c01-af00-4f68-925d-50eb004508a6/deploy-status)](https://app.netlify.com/sites/provi-fizz/deploys)

[![version](https://badge.fury.io/js/%40peruvianidol%2Ffizz.svg)](https://badge.fury.io/js/%40peruvianidol%2Ffizz)

## Fizz

Documentation and CSS Framework for [Fizz](https://provi-fizz.netlify.app/), Provi's design system.

### Support

* #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](https://pro.vi/fizztracker)

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

#### npm

You can install Fizz as an npm package:

`npm install @peruvianidol/fizz --save`

In the Provi app:

- to install the current version, run `yarn install`
- to upgrade to the latest version, run `yarn upgrade @peruvianidol/fizz --latest`

Import it into the SCSS in your project:

`@import 'node_modules/@peruvianidol/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.

### 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.

1. Clone this repo
2. Run `npm install`
3. Run `npm start` to serve your Eleventy site at `https://localhost:8080` and watch for changes

#### Eleventy

The website uses a static site generator called [Eleventy](https://11ty.dev) to assemble all of the content in `/src` to `/docs`. See the [Eleventy documentation](https://www.11ty.dev/docs/) for more info.

### Questions/Feedback? 
Email mike.aparicio@provi.com or file an issue in this repo. Thanks!