Cirro Designsystem

https://designsystem.cirro.io/ (Live deployment)

Installation

1. Install the package and save it as a dependency:

   yarn add cirro-designsystem

2. Import the system in your Sass manifest:

   @import "cirro-designsystem/src/_assets/stylesheets/cirro/app";

3. Make sure your postcss.config.js looks like below:

   module.exports = {
     plugins: [
       require('postcss-import'),
       require('postcss-nesting'),
       require('tailwindcss')('./node_modules/cirro-designsystem/src/_assets/stylesheets/cirro/tailwind.config.js'),
       require('postcss-simple-vars')(
         {
           variables: {
             package_path: '~cirro-designsystem/src/_assets',
             fonts_path: '~cirro-designsystem/src/_assets/stylesheets/cirro/components/fonts'
           }
         }
       ),
       require('autoprefixer'),
     ]
   }

4. Import the system in your Javascript manifest:

   import "cirro-designsystem/src/_assets/scripts/app.js"

Debugging

ForOfStatement runtime error

Change your .browserslistrc to

defaults, ie >= 11

Development

Requirements

1. Node.js
2. NPM (comes with Node.js)

Install dependencies

npm install --lockfile-version 1

Working locally

Starts watch tasks to compile when changes detected

# Change the name of app in package.json file Eg: APP=cirro on "start" task as per your wish
npm start

Creating a production build

Minify HTML, compress JS, inline and minify CSS.

npm run build

Publishing to registry

• Make sure to update the version number in package.json file for every pull request
• CircleCi will take care of publishing to npm and also adding a tag when the commits are merged to master
• CircleCI will publish it only if the package version has been increased