Vanilla JS

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.

v4.0.0-beta.3

Install
Fonts and icons
Basic usage
Advanced usage
Troubleshooting

Install

NPM

Install the package inside your application from npmjs:

npm install @engie-group/fluid-design-system

CDN

When you only need to include compiled CSS or JS from Fluid, you can use our CDN links:

<!-- Styles -->
<link rel="stylesheet" href="https://assets.design.digital.engie.com/fluid/latest/fluid-design-system.css" crossorigin="anonymous">
<!-- Scripts -->
<script src="https://assets.design.digital.engie.com/fluid/latest/fluid-design-system.js" crossorigin="anonymous"></script>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
  NJ.AutoInit();
});
</script>

You can include a specific version of scripts and styles using the url:

https://assets.design.digital.engie.com/fluid/v4.0.0-beta.3/fluid-design-system.css

https://assets.design.digital.engie.com/fluid/v4.0.0-beta.3/fluid-design-system.js

Fonts and icons

Fluid Design System uses the Lato font as global font family, read more about the typography on the dedicated section.

ENGIE has selected the Google material font as default icons pack, read more on the icons documentation.

Be sure to include these fonts into the HTML header:

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900&display=swap" rel="stylesheet"/>

Basic usage

You can use the built files from the lib/ directory.

CSS

Make sure to include the Google material icons first.

Include the library

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link href="/your-css-path/fluid-design-system.css" rel="stylesheet">

Include a single component

Include the Toggle component styles only:

<link href="/your-css-path/components/toggle/index.css" rel="stylesheet">

JS

Include the library

Place the following <script> near the end of your pages, right before the closing </body> tag, to enable them.

<script src="/your-js-path/fluid-design-system.js"></script>

Include a single component

Include the Toggle component scripts only:

<script src="/your-js-path/components/toggle/index.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

ENGIE icon font path In case you have to resolve relative path to ENGIE icons font file, you can set the $icon-font-path variable or use resolve-url-loader with webpack.
This is the default value : $icon-font-path: "./components/icon/fonts/" located in fluid-design-system.scss file.

Make sure to include the Google material icons first if you import the entire library or icon component.

Import the library

Import the library in your project:

@import "~@engie-group/fluid-design-system/src/fluid-design-system.scss";

Import a single component

Import the Toggle component file only:

@import "~@engie-group/fluid-design-system/src/components/toggle";

If the import is not working, use this one instead (see Index Files):

@import "~@engie-group/fluid-design-system/src/components/toggle/_index";

JS

Import the library

Import the library in your project:

import NJ from '@engie-group/fluid-design-system';

Initialize all components:

document.addEventListener('DOMContentLoaded', function(event) {
  NJ.AutoInit();
});

Import a single component

Components can be included individually

Import the library component in your project.

import Toggle from '@engie-group/fluid-design-system/lib/components/toggle';

Initialize the component:

document.addEventListener('DOMContentLoaded', function(event) {
  Toggle.init();
});

Import the esm library

‘Popper.js’required to use the Tooltip component. Be sure to install if you want to use all the esm library or only Tooltip.

npm install popper.js

‘web-animations-js’required to use the Alert, Fab, Tag components..

npm install web-animations-js

Import the library in your project:

import NJ from '@engie-group/fluid-design-system/lib-esm/fluid-design-system';

Initialize all components:

document.addEventListener('DOMContentLoaded', function(event) {
  NJ.AutoInit();
});

Troubleshooting

If you have any issues while getting set up with Fluid Design System, please create an issue or a request on our library git repository.