Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
By Sarah Gooding - Feb 07, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@engie-group/fluid-design-system
Advanced tools
@engie-group/fluid-design-system
The Fluid Design System is ENGIE’s open-source library to create, build and deliver ENGIE digital services in a more efficient way.
- 5.10.2
- npm
Vanilla Fluid Design System by ENGIE
DISCLAIMER
When installing the package via NPM or importing it via CDN, we recommend fixing the version with the exact package version to avoid breaking change affecting your live website. With never-ending topics like Accessibility and Brand guidelines, we sometimes have to include some minor breaking changes in some minor versions.
Getting started
You can install either with CDN or via NPM.
Installation with CDN
When you only need to include compiled CSS or JS from Fluid, you can use our CDN links:
⚠️ Make sure to replace @<VERSION> with the latest fluid version and to paste the links in the correct order.
<!-- Fonts (Material Icons and Lato) --->
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900&display=swap" rel="stylesheet"/>
<!-- Styles -->
<!-- If you need a reboot, include the line below: (we moved our reboot to the @engie-group/fluid-4-deprecated package) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-4-deprecated/vanilla/lib/reboot.css">
<!-- tokens.css = Styles to import tokens needed by components -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-tokens@<VERSION>/lib/css/tokens.css">
<!-- base.css = Styles to set correct font properties in your website -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@<VERSION>/lib/base.css">
<!-- fluid-design-system.css = Styles of all components -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@<VERSION>/lib/fluid-design-system.css">
<!-- fluid-design-system.js = javascript for all the fluid components and auto initializer-->
<script src="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@<VERSION>"></script>
As far as the CDN installation goes, you're all set!
Head straight to the basic-usage section to learn how to use components, or dive right it through the Storybook.
Installation via NPM
You can install the package inside your application via npmjs:
npm install --save-exact @engie-group/fluid-design-system
This will install fluid-design-system and its dependency 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.npm install @engie-group/fluid-4-deprecated
1. Import Font and Icons
Make sure to always include these fonts into the HTML <head>:
<!-- Material icons and Lato font -->
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900&display=swap" rel="stylesheet"/>
2. Import CSS
You can use the built files from the lib/ directory.
2.1 EITHER include the full library
Include Fluid's global css in your HTML <head>:
<!-- Copy and paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS -->
<head>
<!-- meta, title, ... -->
<!-- base.css = Styles to set correct font properties in your website -->
<link href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system/lib/base.css" rel="stylesheet">
<!-- tokens.css = Styles to import tokens needed by components -->
<link href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-tokens/lib/css/tokens.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">
</head>
2.2 OR include a single component
For e.g include the Toggle component styles only:
<head>
<!-- meta, title, ... -->
<!-- base.css = Styles to set correct font properties in your website -->
<link href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system/lib/base.css" rel="stylesheet">
<!-- tokens.css = Styles to import tokens needed by components -->
<link href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-tokens/lib/css/tokens.css" rel="stylesheet">
<!-- fluid-design-system > lib > components > wanted-component > index.css -->
<link href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system/lib/components/toggle/index.css" rel="stylesheet">
</head>
3. Import Javascript
Not all components contain a Javascript file. Using the full library is the safest bet to avoid worrying about it.
3.1 EITHER use the full Library
Place the following scripts near the end of your pages, right before the closing </body> tag, to enable components using JS.
<html>
<head></head>
<body>
<!-- ... -->
<!-- All Fluid components js -->
<script src="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system/lib/fluid-design-system.js"></script>
<!-- Auto initializer -->
<script src="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system/lib/auto-init.js"></script>
</body>
</html>
3.2 OR a single component
Include the Collapse component script:
<html>
<head></head>
<body>
<!-- ... -->
<!-- Fluid collapse component's js -->
<script src="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system/lib/components/collapse/index.js"></script>
<!-- Auto initializer -->
<script src="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system/lib/auto-init.js"></script>
</body>
</html>
Advanced imports using sources (NOT RECOMMENDED)
You can import the source files from the src/ directory, and use your asset builder (Webpack, gulp, grunt...) to bundle the css.
1. SCSS
⚠ Make sure to include the Google material icons first if you import the entire library or the Fluid icon component.
1.1 Either import the full library
@import "@engie-group/fluid-design-system/lib/base.css";
@import "@engie-group/fluid-design-tokens/lib/css/tokens.css";
@import "@engie-group/fluid-design-system/lib/fluid-design-system.css";
1.2 Or import a single component
E.g: Import the Toggle component file only:
@import "@engie-group/fluid-design-system/src/base";
@import "@engie-group/fluid-design-tokens/lib/css/tokens.css";
@import "@engie-group/fluid-design-system/src/components/toggle/_index";
2. JavaScript
Manual initialization for a single component
Components can be initiated manually instead of relying on the auto initializer:
import { Collapse } from '@engie-group/fluid-design-system';
document.addEventListener('DOMContentLoaded', function(event) {
Collapse.init();
});
Basic usage
Once you've imported Fluid Design System, you can freely use any component.
Check out our Storybook documentation where you will find every component and how to use them.
eg:
<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>
</body>
Components development state
You can check our state of development on our Components status page
Troubleshooting
If you encounter any issues while setting up Fluid Design System, please create an issue or a request on our library git 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.
The npm package @engie-group/fluid-design-system receives a total of 530 weekly downloads. As such, @engie-group/fluid-design-system popularity was classified as not popular.
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.
Package last updated on 18 Apr 2024
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.
Related posts
Security News
Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
By Sarah Gooding - Feb 06, 2025
Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
By Sarah Gooding - Feb 06, 2025