@engie-group/fluid-design-system
Advanced tools
The Fluid Design System is ENGIE’s open-source library to create, build and deliver ENGIE digital services in a more efficient way.
Fluid is the Engie's design system, a collection of reusable components and styles used to build Engie's digital products.
Here is the package to benefit from Fluid's components and styles in your typescript project.
⚠️ This package doesn't follow semantic versioning, breaking changes may be introduced in minor versions.
We recommend fixing the version with the exact package version to avoid breaking changes affecting your live website. Moreover, we recommend checking the CHANGELOG before updating the package after a release.
This package can be installed directly with NPM or via CDN.
You can install the package inside your application via npmjs:
# Using npm
npm install --save-exact @engie-group/fluid-design-system @engie-group/fluid-design-tokens
# Using pnpm
pnpm add --save-exact @engie-group/fluid-design-system @engie-group/fluid-design-tokens
# Using yarn
yarn add --save-exact @engie-group/fluid-design-system @engie-group/fluid-design-tokens
ℹ️ If you use deprecated components or need the reboot.css, you will need to install and use some styles from the
@engie-group/fluid-4-deprecatedpackage.Please refer to the
@engie-group/fluid-4-deprecatedREADME.mdfor more information.# Using npm npm install @engie-group/fluid-4-deprecated # Using pnpm pnpm add @engie-group/fluid-4-deprecated # Using yarn yarn add @engie-group/fluid-4-deprecated
In order for the components to work properly, you need to include the Material Icons and Lato font in your project.
You should include them in your HTML <head>:
<!-- Material icons, Lato font and Roboto Mono font -->
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900|Roboto+Mono:300,400,700,900&display=swap" rel="stylesheet"/>
Component styling is based on CSS classes and some CSS variables (called design tokens). In order for each component to be rendered as expected, you need to include CSS files as global stylesheet in your project.
You should include them in your HTML <head>:
<!-- tokens.css = Styles to import tokens needed by components -->
<link href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-tokens/lib/css/token.css" rel="stylesheet">
<!-- fluid-design-system.css = Styles of all components -->
<link href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system/lib/fluid-design-system.css" rel="stylesheet">
or in your JavaScript entry file :
import '@engie-group/fluid-design-tokens/css';
import '@engie-group/fluid-design-system/css';
ℹ️ We recommend including the Fluid Design System CSS before your own stylesheets to avoid any conflicts.
Some components need JavaScript code to work properly.
When your DOM is rendered, dynamic components will need to be initialized to work properly.
To do so, you will have to initialize them either with a global script which will initialize all components or by initializing each component individually.
You can use the auto initializer script to initialize all components at once.
Add the following script near the end of your pages, right before the closing </body> tag:
<script type="module" src="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system/lib/auto-init.js"></script>
You can also initialize each component individually in your JavaScript by calling the static init method of the component.
For example, to initialize all Select components on your page, you can use the following code:
// In a JS file or script tag called right before the end of the body
import { Select } from '@engie-group/fluid-design-system';
Select.init();
It's possible to use Fluid Design System via CDN. This is the recommended way to use Fluid if you don't have a build process or if you want to quickly test Fluid in a project.
As with the NPM installation, you will need to include some CSS and JavaScript files in your project. Installations are very similar.
Nothing different here in comparison to the NPM installation, you still need to include the Material Icons and Lato font in your project.
You should include them in your HTML <head>:
<!-- Material icons, Lato font and Roboto Mono font -->
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900|Roboto+Mono:300,400,700,900&display=swap" rel="stylesheet"/>
Component styling is based on CSS classes and some CSS variables (called design tokens). In order for each component to be rendered as expected, you need to include CSS files as global stylesheet in your project.
You should include them in your HTML <head>:
<!-- tokens.css = Styles to import tokens needed by components -->
<link href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-tokens@<VERSION>/lib/css/token.css" rel="stylesheet">
<!-- fluid-design-system.css = Styles of all components -->
<link href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@<VERSION>/lib/fluid-design-system.css" rel="stylesheet">
ℹ️ We recommend including the Fluid Design System CSS before your own stylesheets to avoid any conflicts.
ℹ️ If you use deprecated components or need the reboot.css, you will need to install and use some styles from the
@engie-group/fluid-4-deprecatedpackage.
Some components need JavaScript code to work properly.
To access components in your code we export a global NJ constant that contains all components.
To make it available, you will have to set this script before using any component:
<script type="module" src="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@<VERSION>/lib/fluid-design-system.js"></script>
When your DOM is rendered, dynamic components will need to be initialized to work properly.
To do so, you will have to initialize them either with a global script which will initialize all components or by initializing each component individually.
You can use the auto initializer script to initialize all components at once.
Add the following script near the end of your pages, right before the closing </body> tag:
<script type="module" src="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@<VERSION>/lib/auto-init.js"></script>
You can also initialize each component individually in your JavaScript by calling the static init method of the component.
For example, to initialize all Select components on your page, you can use the following code:
// In a JS file or script tag called right before the end of the body
NJ.Select.init();
For a better comprehension of the components and their usage, we recommend checking our Storybook documentation.
For Fluid overall documentation, you can check our Fluid documentation.
If you have correctly followed the installation steps, you should be able to use Fluid components in your project.
<body>
<!-- basic Fluid button component -->
<button type="button" class="nj-btn">Fluid button</button>
<!-- basic Fluid select component -->
<div class="nj-form-item nj-form-item--select">
<div class="nj-form-item__field-wrapper">
<select class="nj-form-item__field" id="exampleSelect">
<optgroup label="Group 1">
<option>Item 1</option>
<option>Item 2</option>
</optgroup>
<optgroup label="Group 2">
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</optgroup>
</select>
<label for="exampleSelect" class="nj-form-item__label">Example</label>
<span aria-hidden="true" class="nj-form-item__icon material-icons">keyboard_arrow_down</span>
</div>
</div>
<script type="module" src="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system/lib/auto-init.js"></script>
</body>
If you encounter any issues, or you want any component or feature to be implemented, please create an issue or a feature request on our GitHub repository.
FAQs
The Fluid Design System is ENGIE’s open-source library to create, build and deliver ENGIE digital services in a more efficient way.
We found that @engie-group/fluid-design-system demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 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
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.