Yammer Teams Slack email

Introduction

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

npm (tag) Fluid Licence

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 (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:

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.