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.
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-4-deprecated/vanilla/lib/reboot.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-tokens@<VERSION>/lib/css/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@<VERSION>/lib/base.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@<VERSION>/lib/fluid-design-system.css">
<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-deprecated
package.
Please refer to the @engie-group/fluid-4-deprecated
README.md
for 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>
:
<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>
:
<head>
<link href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system/lib/base.css" rel="stylesheet">
<link href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-tokens/lib/css/tokens.css" rel="stylesheet">
<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>
<link href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system/lib/base.css" rel="stylesheet">
<link href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-tokens/lib/css/tokens.css" rel="stylesheet">
<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>
<script src="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system/lib/fluid-design-system.js"></script>
<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>
<script src="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system/lib/components/collapse/index.js"></script>
<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>
<button type="button" class="nj-btn">Fluid button</button>
<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.