Link to Fluid's Microsoft Teams channel Link to the support page

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.

npm (tag) Fluid Licence

Storybook documentation

Vanilla storybook documentation

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 also have to include some minor breaking changes in some minor versions

e.g:

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

or

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-tokens@VERSION/lib/css/tokens.css">

Installation with CDN

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


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

<!-- Styles -->

<!-- Styles to set correct font properties in your website -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@5.0.0/lib/base.css">
<!-- Styles to import tokens needed by components -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-tokens@5.0.0/lib/css/tokens.css">
<!-- Styles of all components -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@5.0.0/lib/fluid-design-system.css">

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@5.0.0"></script>

Installation with NPM

You can install the package inside your application from npmjs

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

Basic usage

1. Fonts and icons

Be 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. CSS

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

2.1 Include the full 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">
2.2 OR include a single component

For e.g include the Toggle component styles only:


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

3. JavaScript

Not all components contain a Javascript file. Use the full library to avoid worrying about it.

3.1 Full Library

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


 <html>
   <body>
    <!-- Engie components -->
    <script src="/your-js-path/@engie-group/fluid-design-system@5.0.0/lib/fluid-design-system.js"></script>
    <script src="/your-js-path/@engie-group/fluid-design-system@5.0.0/lib/auto-init.js"></script>
   </body>
 </html>
3.2 OR a single component

Include the Collapse component UMD script:


<script src="/your-js-path/@engie-group/fluid-design-system@5.0.0/lib/components/toggle/index.js"></script>
<script src="/your-js-path/@engie-group/fluid-design-system@5.0.0/lib/auto-init.js"></script>

You can import the sources files from the src/ directory. Feel free to use your asset builder (Webpack, gulp, grunt…)

1. SCSS

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-tokens/lib/css/tokens.css";
@import "~@engie-group/fluid-design-system/lib/fluid-design-system.css";
@import "~@engie-group/fluid-design-system/lib/base.css";
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-system/src/components/toggle/_index";

2. JavaScript

Manual initialization for a single component

Components can be initiated manually

  • Import one component in your project.

import {Collapse} from '@engie-group/fluid-design-system';

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

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.