The Masala Design System provides front-end developers & engineers a collection of reusable React components, css with dynamic theming support and static markup to develop user interfaces using design system principles and guidelines. This enables developers to use consistent markup, styles, and behavior in prototype and production work.
Run the following command using npm to add the component library to your project.
npm install @innovaccer/design-systemAs 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';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">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-familyAs BEM is used reset.css is not used and no style reset is done.
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>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'#clone repository
git clone https://github.com/innovaccer/design-system.git
#install dependencies
npm install
#start development server
npm run devWe are happy that you wish to contribute to this project. Please refer to the Contribution Guidelines for more information about setting up the project and contributing to it.