Innovaccer Design System

A React-based UI toolkit for building Web Applications.

🚀 Get Up and Running

💡 If your app runs on Innovaccer UI engine you don't need following two steps, please see Using Components section bellow.

There are two main steps to use a component in your project:

Installing component library using npm or yarn.
Loading stylesheet.

Installing component library:

Run the following command using npm to add the component library to your project:

npm install @innovaccer/design-system

Adding style:

As this component library is part of a framework-agnostic design system used at Innovaccer the styling is done with CSS using CSS variables for theming and BEM methodology for reusable and modular styling. So it requires you to include CSS in your project by either importing or serving it as a static file. The complete stylesheet is published as part of the component library at path @innovaccer/design-system/css.

Import style at your app's root.

import '@innovaccer/design-system/css';

Using design system font:

The css sets the font family as 'Nunito Sans' for the body. To add this font in your project you need to load this font. The recommended way to do it is by adding the following google font cdn link to your app's head.

<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">

Updating Font:

If you don't add the font described above font family will not be affected by css. However, if you want to update the font family update it via the following css variable.

--font-family

Reset Styles

As BEM is used reset.css is not used and no style reset is done.

Polyfill for IE

For css variables to work on IE we use a polyfill at runtime to achieve dynamic theming through variables. Please add the following polyfill in your page.

<script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2"></script>
<script>
  cssVars({
    onlyLegacy: true
  });
</script>

Using Components

Available components along with live code editor and API documentation can be found here. Components can be imported as mentioned below:

{
  ...
  Avatar,
  Backdrop,
  Badge,
  BreadcrumbsWrapper,
  Breadcrumb,
  ...
} from '@innovaccer/design-system'

How to run locally?

#clone repository
git clone https://github.com/innovaccer/design-system.git

#install dependencies
npm install

#start development server
npm run dev

Documentation

Design

Components

❗ Code of Conduct

We expect everyone participating in the community to abide by our Code of Conduct. Please read it. Please follow it. We work hard to build each other up and create amazing things together. 💪💜

🤝 How to Contribute

Whether you're helping us fix bugs, improve the docs, or spread the word, we'd love to have you as part of the community! 💪💜

Check out our Contributing Guide for ideas on contributing and setup steps for getting our repositories up and running on your local machine.

A note on how this repository is organized

This repository is codebase for all and we publish it to NPM as package.

Contributing

We are currently only accepting bug fixes.

📝 License

Licensed under the MIT License.

💜 Thanks

Thanks to our many contributors.

MSTEWARDSON/design-system