email

Introduction

Welcome developers, here you'll find everything you need to use Fluid Design System to create ENGIE applications.

• Migrate from v3 to v4
• Web browser compatibility
• Quick start
• Library structure
• Troubleshooting

Migrate from v3 to v4

A new major Fluid Design System update is out with Dark Mode: v4.0.1!
Have a look at our new section to enable Dark Mode.
The most notable changes to migrate from v3 to v4 are documented here.

Web browser compatibility

• Last 2 Chrome major versions (Chrome 80 and 79)
• Last 2 Firefox major versions (Firefox 74 and 73)
• Last Edge major version (Edge 18)
• Last Safari major versions (Safari 13)
• Last 2 Android versions (Chrome android 81, Samsung internet 11.1, UC 12.12)
• Last 2 iOS versions (ios Safari 12.2 to 13.3)

If you are experiencing any issue due to a specific version of a browser, please create an issue on our library git repository.

For other browsers support, you may use Old Browsers Support library (fluid-design-system-obs.js).

• > 0.25%
• not dead

Quick start

You can use Fluid Design System in multiple ways. Start using it now with:

• Vanilla JS
• Angular
• React
• Vue.js

Library structure

The package has the following file structure:

  .
  ├── CHANGELOG.md
  ├── README.md
  ├── lib
  │   ├── components
  │   │   ├── ...
  │   │   ├── toggle/
  │   │   └── ...
  │   ├── fluid-design-system.css
  │   ├── reboot.css
  │   ├── fluid-design-system.d.ts
  │   ├── fluid-design-system.js
  │   ├── fluid-design-system.js.map
  │   ├── fluid-design-system-obs.d.ts
  │   ├── fluid-design-system-obs.js
  │   ├── fluid-design-system-obs.js.map
  ├── lib-esm
  │   ├── components
  │   │   ├── ...
  │   │   ├── toggle/
  │   │   └── ...
  │   ├── fluid-design-system.d.ts
  │   ├── fluid-design-system.js
  │   ├── fluid-design-system.js.map
  │   ├── fluid-design-system-obs.d.ts
  │   ├── fluid-design-system-obs.js
  │   ├── fluid-design-system-obs.js.map
  └── src
      ├── components
      │   ├── ...
      │   ├── toggle/
      │   └── ...
      ├── globals
      │   ├── scss/
      │   └── ts/
      ├── fluid-design-system.scss
      ├── fluid-design-system-obs.js
      └── fluid-design-system.ts

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.