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.
Install
NPM
Install the package inside your application from npmjs:
npm install @engie-group/fluid-design-system
CDN
When you only need to include compiled CSS or JS from Fluid, you can use our CDN links:
<!-- Styles -->
<link rel="stylesheet" href="https://assets.design.digital.engie.com/fluid/latest/fluid-design-system.css" crossorigin="anonymous">
<!-- Scripts -->
<script src="https://assets.design.digital.engie.com/fluid/latest/fluid-design-system.js" crossorigin="anonymous"></script>
<script src="https://assets.design.digital.engie.com/fluid/latest/auto-init.js" crossorigin="anonymous"></script>
https://assets.design.digital.engie.com/fluid/v4.2.2/fluid-design-system.css
https://assets.design.digital.engie.com/fluid/v4.2.2/auto-init.js
https://assets.design.digital.engie.com/fluid/v4.2.2/fluid-design-system.js
Fonts and icons
Fluid Design System uses the Lato font as global font family, read more about the typography on the dedicated section.
ENGIE has selected the Google material font as default icons pack, read more on the icons documentation.
Be sure to include these fonts into the HTML header:
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900&display=swap" rel="stylesheet"/>
Basic usage
You can use the built files from the lib/
directory.
CSS
Make sure to include the Google material icons first.
Include the 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">
Include a single component
Include the Toggle component styles only:
<link href="/your-css-path/reboot.css" rel="stylesheet">
<link href="/your-css-path/components/toggle/index.css" rel="stylesheet">
JavaScript
NEW
Automatic component initialization
Set an id attribute named root
on a global container from where components will be watched for initialization.
<div id="root"></div>
Place the following <script>
near the end of your pages, right before the closing </body>
tag, to enable components using JS.
Thanks to auto-init.js you don’t need to worry about components initialization.
Add auto-init.js
above lib script tag.
<script src="/your-js-path/lib/fluid-design-system.js"></script>
<script src="/your-js-path/lib/auto-init.js"></script>
Initialization for a single component import
Include the Collapse component UMD script:
<script src="/your-js-path/lib/components/collapse/index.js"></script>
Initiate components:
<script>
document.addEventListener('DOMContentLoaded', function(event) {
Collapse.init();
});
</script>
Advanced usage
You can import the sources files from the src/
directory. Feel free to use your asset builder (Webpack, gulp, grunt…)
SCSS
This is the default value : $icon-font-path: "./components/icon/fonts/" located in fluid-design-system.scss file.
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-system/src/fluid-design-system.scss";
Import a single component
Import the Toggle component file only:
@import "~@engie-group/fluid-design-system/src/components/toggle";
If the import is not working, use this one instead (see Index Files):
@import "~@engie-group/fluid-design-system/src/reboot";
@import "~@engie-group/fluid-design-system/src/components/toggle/_index";
JavaScript
import NJ from '@engie-group/fluid-design-system';
import '@engie-group/fluid-design-system/lib/auto-init';
OR
import NJ from '@engie-group/fluid-design-system';
...
document.addEventListener('DOMContentLoaded', function(event) {
NJ.AutoInit();
});
Import a single component
Components can be included individually
- Import the library component in your project.
import Collapse from '@engie-group/fluid-design-system/lib/components/collapse';
- Initialize the component:
document.addEventListener('DOMContentLoaded', function(event) {
Collapse.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.