Installation
Comment utiliser le framework ? Une ligne suffit.
# Version en production
Cette URL fournit la dernière version stable de Trilogy. Elle est destinée à être utilisée en production.
<link rel="stylesheet" href="https://assets.bouyguestelecom.fr/Trilogy_BTE/trilogy-bte@/trilogy-bte.css">
# Version en développement
Cette URL embarque les dernières avancées mais est destinée à des tests internes. Elle peut être soumise à des instabilités.
<link rel="stylesheet" href="https://dev.public.a7.apps.ocp-1.pin.prd.mlb.nbyt.fr/Trilogy_BTE/trilogy-bte@/trilogy-bte.css">
# Version namespacée
La version namespacée de Trilogy préfixe chaque classe du CSS original avec la classe is-tri
. Il devient ainsi possible d'encapsuler une partie de votre page pour que celle-ci, et uniquement celle-ci, utilise Trilogy.
Utilisation
Ajoutez simplement la classe is-tri
dans le container parent de la sous-partie de votre page où vous désirez utiliser Trilogy.
Attention ! Le CSS propre à votre page peut également avoir un impact sur les styles Trilogy que vous souhaitez injecter (par exemple si vous avez également une classe .button
dans votre CSS). La version namespacée règle ainsi le problème dans un sens, mais elle ne le règle bien évidemment pas dans l'autre sens…
En développement
<link rel="stylesheet" href="https://dev.public.a7.apps.ocp-1.pin.prd.mlb.nbyt.fr/Trilogy_BTE/trilogy-bte@/trilogy-bte-namespaced.css">
En production
<link rel="stylesheet" href="https://assets.bouyguestelecom.fr/Trilogy_BTE/trilogy-bte@/trilogy-bte-namespaced.css">
# JavaScript
Le JavaScript nous permet de rendre nos composants animés. Vous trouverez les scripts correspondants ci-dessous.
Trilogy Vanilla
<script src="https://assets.bouyguestelecom.fr/TRILOGY/trilogy-vanilla@3.0.2/trilogy-vanilla.min.js"></script>
Trilogy Slider
<script src="https://assets.bouyguestelecom.fr/TRILOGY/trilogy-slider-ts@1.1.7/trilogy-slider-ts.min.js"></script>