@accela/design-system
v15.3.32
Published
Accela Design System help to Create reliable experiences through repetitive patterns
Downloads
1,043
Readme
Accela Design System
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.
Installation
To install the @accela/design-system package from npm, run the following command:
npm install @accela/design-systemPrimeNG Theme Integration
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.
What is a PrimeNG Theme?
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.
Accela Theme Feature
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.
Usage
To use the design system in your project, follow these steps:
1. Import the CSS
Include the necessary CSS files in your application. You can do this in your main HTML file or in your main CSS/SCSS file.
In HTML
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">In CSS/SCSS
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';2. Configure Angular
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"
]
}
}
}
}
}
}3. Set the Parent Style Class
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>Example in Angular
<!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>Example in React
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.
Example in Vue
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.
Complete Configure Angular to Use Accela Design System with PrimeNG Style sheet
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"
]PrimeNG Installation
For detailed documentation to use PrimeNG components in your Angular project, please visit the PrimeNG Documentation.
Documentation
For detailed documentation and examples of all available components and styles, please visit the Accela Design System Documentation.
License
This project is licensed under the MIT License - see the LICENSE file for details.