Resa Design System

Appearance

How to use ​

  • In the front side of each project you must add two lines in the <head> to import the Design System properly :

    html
    <script type="module" src="[scriptUrl]"></script>
    html
    <link rel="stylesheet" type="text/css" href="[styleUrl]">

    Replace [scriptUrl] & [styleUrl] by the value you'll find in the versions section of this page.

  • Then you need to add the class dsResa to one of a parent element.

    TIP

    If the design system is use for the entier project you can add this class to the body. If you want the design system to apply only on a part of you project you add the class to a closes parent of the element you want to style.

Versions ​

Local ​

Dev in the DS ​

  • To have a local version with live reload as you dev please do this command at the root of the project :

    cmd
    npm run dev

  • By default a page will open on the port http://localhost:5173/master/

Use the local version into another project ​

  • To be able to use the last changes of the design system on your local into other projects, you'll need to do :

    cmd
    npm run preview

  • By default a page will open on the port http://localhost:4173/

  • Then use these URLs to import ressources into you project :

    scriptUrl : http://localhost:4173/master/script.js

    styleUrl : http://localhost:4173/master/style.css

Master ​

  • This version should only be used for intregration testing environments like qual, qta, integ, site, etc...

  • This version has always the latest changes of the Design System and is NOT dependant of releases.

  • Then use these URLs to import ressources into you project :

    scriptUrl : https://dsgn.resa.be/master/script.js

    styleUrl : https://dsgn.resa.be/master/style.css

Release ​

  • This version should only be used for pre-prod testing environments like qla, acc, uta, staging, preprod, etc...

  • This version has always the latest released version of the Design System.

  • Then use these URLs to import ressources into you project :

    scriptUrl : https://dsgn.resa.be/release/script.js

    styleUrl : https://dsgn.resa.be/release/style.css

Production ​

  • These versions should only be used for production environments.

  • These versions match tags made on release branch (eg: 0.0.1) for release that are validated and marked for production.

  • Then use these URLs to import ressources into you project :

    scriptUrl : https://dsgn.resa.be/[TAG]/script.js

    styleUrl : https://dsgn.resa.be/[TAG]/style.css