ENGIE Design System
Welcome to the ENGIE Design System. It's a library of UI components written in HTML/CSS/Vanilla JS. To begin with, you have multiple ways to work with our design system. Start with the installation and then feel free to explore the different sections of the design system to start building applications based on ENGIE standards. https://design.engie.com/
Quick Start
Install the package inside your new application: npm i @engie-group/design-system-library
For an alternative use (zip, cdn), please read the dedicated section https://design.digital.engie.com/design-system/getting-started/developers/#quick-start
How to use
You can start using the design system through two methods :
The package has the following file structure:
.
├── CHANGELOG.md
├── README.md
├── dist
│ ├── css
│ ├── fonts
│ └── js
└── src
├── js
│ └── components
├── scss
└── fonts
Basic usage
You can use the built files from the dist/ directory.
CSS
Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
<link href="/your-css-path/nj-components.min.css" rel="stylesheet">Be sure to include the Google material font. See the documentation here.
JS
Place the following <script> near the end of your pages, right before the closing </body> tag, to enable them.
<script src="/your-js-path/nj-components.js"></script>Advanced usage
You can import the sources files from the src/ directory. Feel free to use your asset builder (Webpack, gulp, grunt...)
SCSS
Import nj.scss file in your project.
@import "~@engie-group/design-system-library/src/scss/nj";
Fonts path: In case you have to resolve the relative path to fonts files you can set the $icon-font-path variable or use resolve-url-loader with webpack.
Be sure to include the Google material font. See the documentation here.
JS
- Import the library in your project.
import NJ from '@engie-group/design-system-library';
- Initialize all components
Auto Init allows you to initialize all of the Design System Components with a single function call. It is important to note that you cannot pass in options using this method.
document.addEventListener('DOMContentLoaded', function(event) {
NJ.AutoInit();
});- OR Initialise a single component
You can also individually initialize the components of your choice:
NB: Currently only the alert component has this option.
document.addEventListener('DOMContentLoaded', function(event) {
NJ.Alert.init(alertElements);
});Troubleshooting
If you have any issues while getting set up with ENGIE Design System, please create an issue here.