cirro-designsystem

Cirro Designsystem

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

Installation

• Install the package and save it as a dependency:

  yarn add cirro-designsystem
  

• Import the system in your Sass manifest:

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

• 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'),
    ]
  }
  

• 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

• Node.js
• 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