New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@engie-group/design-system-library

Package Overview
Dependencies
Maintainers
3
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@engie-group/design-system-library

Engie design system library

2.4.3
latest
npm
Version published
Weekly downloads
1
Maintainers
3
Weekly downloads
 
Created
Source

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.

Keywords

engie

FAQs

Package last updated on 12 Nov 2019

Did you know?

Socket

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.

Install

Related posts