@engie-group/design-system-library
Advanced tools
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/
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
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
You can use the built files from the dist/ directory.
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.
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>
You can import the sources files from the src/ directory. Feel free to use your asset builder (Webpack, gulp, grunt...)
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.
import NJ from '@engie-group/design-system-library';
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();
});
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);
});
If you have any issues while getting set up with ENGIE Design System, please create an issue here.
FAQs
Engie design system library
The npm package @engie-group/design-system-library receives a total of 2 weekly downloads. As such, @engie-group/design-system-library popularity was classified as not popular.
We found that @engie-group/design-system-library demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Security experts warn that recent classification changes obscure the true scope of the NVD backlog as CVE volume hits all-time highs.
Security Fundamentals
Attackers use obfuscation to hide malware in open source packages. Learn how to spot these techniques across npm, PyPI, Maven, and more.
Security News
Join Socket for exclusive networking events, rooftop gatherings, and one-on-one meetings during BSidesSF and RSA 2025 in San Francisco.