@sippy-platform/mellow-css NPM

Mellow CSS

The Mellow Design System is the design language used for Sippy starting with the 2022 design refresh. For an (early) implementation of the design system, see Sippy.cloud.

Development

Initial setup

Clone this repository.
Run npm install to install de npm dependencies.

Starting development server

Run npm start to start the script that will watch and (re)compile Mellow when changes are made as well as launch the documentation ot http://localhost:1313.

Scripts

Mellow CSS contains a number of npm scripts. We'll list their function below:

Script	Purpose
`bundlewatch`	Checks if the CSS size is below a given threshold configured in `package.json`.
`clean`	Removes the `/dist` folder.
`docs:build`	Builds the documentation into the `/build` folder.
`docs`	Runs the documentation server on localhost:1313.
`js:compile`	Compiles the JS as configured in `build/rollup.config.js` into the `/dist` folder.
`js:minify`	Compresses the javascript in the `/dist` folder with Terser.
`js`	Runs `js:compile`, then `js:minify`.
`lint`	Runs `js:lint` and `scss:lint`.
`prepare`	Script that runs automatically by npm, will run `prod`.
`prod`	Runs `clean`, then `scss`, then `js`.
`scss`	Runs `scss:lint`, then `scss:compile`, then `scss:prefix`, then `scss:copy`.
`scss:compile`	Compiles the SCSS to the `/dist` folder.
`scss:copy`	Merges all SCSS files and provides it as `dist/mellow.scss`.
`scss:lint`	Runs `scss:lint:style` and `scss:lint:vars`.
`scss:lint:style`	Runs stylelint.
`scss:lint:vars`	Runs a check for unused vars in the SCSS.
`scss:prefix`	Runs PostCSS to properly prefix all CSS features that need it.
`start`	Runs `docs` and `watch`.
`watch`	Runs `watch:js:core`, `watch:js:docs`, `watch:css:core`, and `watch:css:docs`.
`watch:js:core`	Runs `js` while watching `js/src`.
`watch:js:docs`	Runs `js:lint` while watching `hugo/assets/js/`.
`watch:scss:core`	Runs `scss` while watching `scss/`.
`watch:scss:docs`	Runs `scss:lint` while watching `hugo/assets/scss/`.