Fluid Design System 3.1 introduce a new feature that allows to dynamically add components to the DOM.
So make sure to use version 3.1 to get the most out of Fluid Design System.
To consume Fluid Design System with React.js, the best way is via npm (or yarn if you prefer).
Fonts and icons
The Fluid Design System uses the Lato font as global font family, read more about the typography bias on the
ENGIE has selected the Google material font as default icons pack, read more on the
Be sure to include these fonts into the main CSS file app.css (or scss, less, etc… according to your suitability).
Add stylesheets of library in your project with import. You can be included it in your src/index.js or App.js file.
Import the entire library
… or an alternatively component
If you choose to import the entire library or at least the icon component, SCSS version need to be configured path of font icon $icon-font-path. So, the SCSS logic should be in a dedicated .scss file.
In the first instance, create an index.scss and add the following lines:
Then, import this file into your React application like this:
NEW Automatic component initialization
Set an id attribute named root on a global container from where components will be watched for initialization.
Import lib/fluid-design-system.js then lib/auto-init.js directly in your main app code.
Don’t use custom tags unless you want to.
Initialization via WebComponents
1) Install additional modules
Required npm modules