Introduction

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

Quick start

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

Migrate from v3 to v4

The v4 introduces a new major update including the Dark Mode!
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
  • Last 2 Firefox major versions
  • Last Edge major version
  • Last Safari major versions
  • Last 2 Android versions
  • Last 2 iOS versions

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

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
│ ├── auto-init.js
│ ├── auto-init.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
│ ├── auto-init.js
│ ├── auto-init.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.