Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
By Sarah Gooding - Feb 07, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@engie-group/fluid-design-system
Advanced tools
@engie-group/fluid-design-system
The Fluid Design System is ENGIE’s open-source library to create, build and deliver ENGIE digital services in a more efficient way.
- 3.0.0-alpha.3
- npm
Fluid Design System by ENGIE
Welcome to the Fluid Design System by ENGIE. It's a library of UI components written in HTML/CSS/Vanilla JS. To begin with, you have multiple ways to work with our design system. 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. https://www.engie.design/
Quick Start
Install the package inside your application:
npm install @engie-group/fluid-design-system
How to use
You can start using the design system through two methods :
The package has the following file structure:
.
├── CHANGELOG.md
├── README.md
├── lib
│ ├── components
│ │ ├── ...
│ │ ├── toggle/
│ │ └── ...
│ ├── body-and-reset.css
│ ├── fluid-design-system.css
│ ├── fluid-design-system.d.ts
│ ├── fluid-design-system.js
└── src
├── components
│ ├── ...
│ ├── toggle/
│ └── ...
├── globals
│ ├── scss/
│ └── ts/
├── body-and-reset.scss
├── fluid-design-system.scss
└── fluid-design-system.ts
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/components/toggle/index.css" rel="stylesheet">
JS
Include the library
Place the following <script> near the end of your pages, right before the closing </body> tag, to enable them.
<script src="/your-js-path/fluid-design-system.js"></script>
Include a single component
Include the Toggle component scripts only:
<script src="/your-js-path/components/toggle/index.js"></script>
Advanced usage
You can import the sources files from the src/ directory. Feel free to use your asset builder (Webpack, gulp, grunt...)
SCSS
Fonts path: In case you have to resolve the relative path to fonts files you can set the $icon-font-path variable or use resolve-url-loader with webpack.
Make sure to include the Google material icons first.
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/components/toggle/_index";
JS
Import the library
-
Import the library in your project:
import NJ from '@engie-group/fluid-design-system'; -
Initialize all components:
document.addEventListener('DOMContentLoaded', function(event) { NJ.AutoInit(); });
Import a single component
-
Import the library component in your project.
import Toggle from '@engie-group/fluid-design-system/lib/components/toggle'; -
Initialize the component:
document.addEventListener('DOMContentLoaded', function(event) { Toggle.init(); });
Troubleshooting
If you have any issues while getting set up with ENGIE Design System, please create an issue here.
FAQs
The Fluid Design System is ENGIE’s open-source library to create, build and deliver ENGIE digital services in a more efficient way.
We found that @engie-group/fluid-design-system demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Package last updated on 25 Nov 2019
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
By Sarah Gooding - Feb 06, 2025
Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
By Sarah Gooding - Feb 06, 2025