open-index/open-npm huggingface dataset:
npm package: @peruvianidol/coolcss
Description: The last CSS framework I'll (hopefully) ever need to build.
Author: Mike Aparicio
Latest version: 1.1.0

[![Netlify Status](https://api.netlify.com/api/v1/badges/7a793a16-86fd-4a2e-a74e-70f211a84c91/deploy-status)](https://app.netlify.com/sites/coolcss/deploys)

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/peruvianidol/coolcss)

# cool.css

## The last CSS framework I'll (hopefully) ever have to make

Between switching jobs and starting a bunch of side-projects, I've found myself re-writing a lot of CSS in the past year. Wouldn't it be nice, I thought, if I could just write one CSS framework and use it on any project? **Cool.css** is my attempt to do just that.

### Just what the world needs&mdash;another fucking CSS framework!

Yes, I know. I feel the same way. [Check out the website](https://coolcss.dev) to read more about **cool.css** and why it might be worth trying out.

## How to Use ##

**Note:** This is a work-in-progress, so it's not quite ready for people to use yet, but you're more than welcome to try it out and kick the tires.

**cool.css** is built on Eleventy.

1. Fork the repo
2. Run `npm install`
3. Run `npm start` to start Eleventy
4. Open `https://localhost:8080` in a browser
5. Edit `_src/sass/_tokens/_tokens.scss` to your heart's content

You should be able to achieve whatever look your going for just by updating the tokens. The idea is that you should never have to touch the CSS unless you're adding new components or layouts.
npm package: @peruvianidol/fizz
Description: Documentation and CSS framework for Fizz, Provi's design system
Author: Mike Aparicio
Latest version: 0.165.0

[![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!