The @accela/design-system package provides a comprehensive set of CSS styles and design components for use in Accela applications. This design system is developed to add themes for the PrimeNG library.
To install the @accela/design-system package from npm, run the following command:
npm install @accela/design-system
The @accela/design-system is developed to add themes for the PrimeNG library. PrimeNG is a popular UI component library for Angular applications, offering a wide range of components with various themes.
For more details about PrimeNG themes, you can refer to the PrimeNG Theming Documentation.
A PrimeNG theme is a collection of styles that define the look and feel of PrimeNG components. Themes can include styles for components, layout, and other elements to ensure a consistent design across an application.
We have developed our own custom theme based on the standards and color schemes provided by PrimeNG. This custom theme ensures that our applications have a unique look while maintaining consistency with PrimeNG's component styling.
To use the design system in your project, follow these steps:
Include the necessary CSS files in your application. You can do this in your main HTML file or in your main CSS/SCSS file.
For Legacy Accela Design System:
<link rel="stylesheet" href="node_modules/@accela/design-system/resource/styles.css">
For Theme-based Accela Design System:
<link rel="stylesheet" href="node_modules/@accela/design-system/resource/accela-theme.css">
For Legacy Accela Design System:
@import '~@accela/design-system/resource/styles.css';
For Theme-based Accela Design System:
@import '~@accela/design-system/resource/accela-theme.css';
To make use of the Accela Design System with PrimeNG, add the following references to the styles and assets section of your angular.json file:
{
"projects": {
"your-project-name": {
"architect": {
"build": {
"options": {
"styles": [
...
...
"./node_modules/@accela/design-system/resource/styles.css",
"./node_modules/@accela/design-system/resource/accela-theme.css",
...
],
"assets": [
{
"glob": "**/*",
"input": "node_modules/@accela/design-system/resource/fonts",
"output": "/assets/fonts/"
},
"src/favicon.ico",
"src/assets"
]
}
}
}
}
}
}
To switch between the Legacy Accela Design System and the Theme-based Accela Design System, add the appropriate style class class="ds-beta" to the <body> element in your main HTML file.
For Legacy Accela Design System:
<body class="ds-beta">
<!-- Your content here -->
</body>
For Theme-based Accela Design System add class="accela-theme" to the <body> element in your main HTML file:
<body class="accela-theme">
<!-- Your content here -->
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accela Design System Example</title>
</head>
<body class="ds-beta">
<app-root></app-root>
</body>
</html>
To switch to the theme-based design system, simply change the class:
<body class="accela-theme">
<app-root></app-root>
</body>
To use the design system in a React project, import the CSS files in your index.js or App.js file:
import '@accela/design-system/resource/styles.css';
import '@accela/design-system/resource/accela-theme.css';
Set the parent style class dynamically based on your requirements.
To use the design system in a Vue project, import the CSS files in your main.js file:
import '@accela/design-system/resource/styles.css';
import '@accela/design-system/resource/accela-theme.css';
Set the parent style class dynamically based on your requirements.
To make use of the Accela Design System with PrimeNG, add the following references to the styles section of your angular.json file:
"styles": [
"./node_modules/primeicons/primeicons.css",
"./node_modules/primeng/resources/themes/nova/theme.css",
"./node_modules/primeng/resources/primeng.min.css",
"./node_modules/primeflex/primeflex.css",
"./node_modules/@accela/design-system/resource/styles.css",
"./node_modules/@accela/design-system/resource/accela-theme.css",
"src/styles/scss/styles.scss"
],
"assets": [
{
"glob": "**/*",
"input": "node_modules/@accela/design-system/resource/fonts",
"output": "/assets/fonts/"
},
"src/favicon.ico",
"src/assets"
]
For detailed documentation to use PrimeNG components in your Angular project, please visit the PrimeNG Documentation.
For detailed documentation and examples of all available components and styles, please visit the Accela Design System Documentation.