Les variables CSS dans les applications


Les variables CSS sont des variables initialisées avec des propriétés graphiques spécifiques : une couleur, une taille, un pourcentage, ....

  • Elles peuvent être appelées en différents endroits de chaque application Service Apps : thème, widgets, code CSS.

         CSS variable links.png

  • Les modifications qui y sont apportées sont automatiquement reportées sur tous les objets qui les utilisent.

exemple  La variable CSS #2 définit la taille de la police dans une application donnée. Lorsqu'elle est modifiée, la nouvelle taille est mise à jour sur les objets 1, 3, 5 et 7 de cette application.
         CSS variable operating principle.png

Chaque client peut ainsi personnaliser très rapidement sa charte graphique de Service Apps en modifiant uniquement les variables CSS, et non en modifiant les propriétés graphiques de chaque widget de chacune de ses applications.

Remarques

  • Les variables CSS sont regroupées dans un widget Secured HTML nommé __Root.
    • Ce widget est présent sur tous les modèles fournis depuis la version Oxygène 2.1 de Service Apps, ce qui permet aux variables CSS d'avoir une portée sur l'ensemble de l'application sans autre configuration à effectuer.
    • Si vous créez une application sans passer par l'un de ces modèles, le widget n'est pas présent. Dans ce cas, vous devez appeler le widget __Root sur chacune des pages de votre application pour pouvoir accéder aux variables CSS.
  • Les variables CSS peuvent être paramétrées à la fois dans l'éditeur de thème et au niveau de chaque application Service Apps.

Déclaration des variables CSS

Le widget __Root

  • Le widget __Root contient une balise <style> </style>.
  • Un sélecteur :root est encapsulé dans cette balise, à l'intérieur duquel sont déclarées toutes les variables CSS avec leurs valeurs d'affectation.

         CSS variables list - style tag.png

Création des variables CSS

  • Les variables CSS utilisées dans les modèles sont créées par EasyVista.
    • Le nom de ces variables CSS ne peut pas être modifié.
    • Chaque variable respecte une nomenclature indiquant clairement sa portée et l'élément graphique traité.
       
  • Chaque client peut également créer ses propres variables CSS, en respectant la nomenclature.

Nomenclature des variables CSS

Règles de nommage des variables

  • 2 tirets -- obligatoires au début du nom, suivi d'un libellé de variable.

exemple  --ezv-background-page

  • Le libellé des variables CSS définies par EasyVista est toujours préfixé par la chaîne de caractères ezv, ce qui permet de les repérer facilement.

exemple  --ezv-font-size-4

  • Le libellé des variables CSS définies par chaque client est libre.

exemple  --background-top-banner

Best Practice icon.png  Utilisez des libellés significatifs, indiquant clairement l'élément graphique que la variable permet de traiter. Vous pouvez également mentionner le contexte d'application (thème, widget).

Affectation des valeurs aux variables CSS

  • L'opérateur d'affectation d'une valeur à une variable est le caractère :.

exemple  --ezv-font-size-4: 9px

  • Les tailles de police sont exprimées en pixels et les couleurs en code hexadécimal.

exemple  --ezv-font-size-4: 9px  ;  --ezv-background-page: #f5f5f5

 

Séparateur des variables

  • Le séparateur des variables à l'intérieur du sélecteur :root est le caractère ;.

         CSS variable - separator.png

Utilisation des variables CSS

  • La variable CSS doit être placée au niveau d’une valeur CSS ou dans un paramètre de personnalisation du widget.
  • Un widget peut faire référence à une variable CSS dans une propriété graphique en utilisant la fonction var(...).

exemple  Affecter la valeur de la variable CSS --ezv-background-header-1 à la propriété Background Color => Background Color = var(--ezv-background-header-1)

CSS variable use.png

Liste des variables CSS

Les éléments pouvant être personnalisés via les variables CSS sont les suivants :

  • couleur de l'arrière-plan des zones ;
  • taille, couleur et style des polices ;
  • épaisseur, couleur et coins arrondis des bordures.

Variables relatives à la page

  • ezv-background-page : Permet de gérer la couleur de fond de la page.

Variables relatives à l'entête de page (Header)

  • ezv-background-header-1 / ezv-font-color-header-1 / ezv-font-size-header-1 : Permet de gérer l’aspect graphique de l'entête : couleur de fond, couleur et taille de la police.
  • ezv-background-header-2 / ezv-font-color-header-2 / ezv-font-size-header-2 : Permet de gérer l’aspect graphique d’un second état de l'entête ou d’un entête divisé en 2 sections d’aspect différent : couleur de fond, couleur et taille de la police.

Variables relatives au pied de page (Footer)

  • ezv-background-footer-1 / ezv-font-color-footer-1 / ezv-font-size-footer-1 : Permet de gérer l’aspect graphique du pied de page : couleur de fond, couleur et taille de la police.
  • ezv-background-footer-2 / ezv-font-color-footer-2 / ezv-font-size-footer-2 : Permet de gérer l’aspect graphique d’un second état du pied de page ou d’un pied de page divisé en 2 sections d’aspect différent : couleur de fond, couleur et taille de la police.

Variables relatives aux éléments de menu

  • ezv-background-menu / ezv-font-color-menu-1 / ezv-font-color-menu-2 : Permet de gérer la couleur du menu latéral, la couleur de la police générique et la couleur de l’élément actif dans le menu.

Variables relatives aux éléments importants

  • ezv-background-element / ezv-font-color-element / ezv-background-element-2 / ezv-font-color-element-2 / ezv-background-element-3 / ezv-font-color-element-3 / ezv-background-element-4 / ezv-font-color-element-4 : Permet de gérer la couleur de fond et la couleur de la police des éléments définis comme importants sur l’application (jusqu’à 4 éléments sont définis).

Variables relatives aux couleurs principales

  • ezv-main-color-1 / ezv-main-color-2 / ezv-main-color-3 / ezv-main-color-4 / ezv-main-color-5 : Permet de gérer les couleurs définissant l’identité graphique d’un thème.

Variables relatives aux boutons

  • ezv-background-button-1 / ezv-font-color-button-1 / ezv-border-radius-button-1 / ezv-border-color-button-1 : Permet de gérer la couleur de fond des boutons, la couleur de la police du texte des boutons, les coins arrondis des bordures et la couleur des bordures.
  • ezv-background-button-2 / ezv-font-color-button-2 / ezv-border-radius-button-2 / ezv-border-color-button-2 : Lorsque les boutons sont survolés avec la souris, permet de gérer la couleur de fond des boutons, la couleur de la police du texte des boutons, les coins arrondis des bordures et la couleur des bordures.

Variables relatives aux indicateurs

  • ezv-indicator-1 / ezv-font-color-indicator-1 : Permet de gérer la couleur de fond et la couleur de la police des indicateurs.
  • ezv-indicator-2 / ezv-indicator-3 / ezv-indicator-4 / ezv-indicator-5 / ezv-indicator-6 / ezv-indicator-7 : Permet de gérer les couleurs de fond des indicateurs.
  • ezv-indicator-link : Permet de gérer la couleur des éléments cliquables sur les indicateurs.

Variables relatives aux polices

  • ezv-font-color-1 / ezv-font-size-1 : Permet de gérer la couleur et la taille des titres (titres de pages, de sections, …).
  • ezv-font-color-2 / ezv-font-size-2 : Permet de gérer la couleur et la taille des sous-titres (titres de widgets, …).
  • ezv-font-color-3 / ezv-font-size-3 : Permet de gérer la couleur et la taille des libellés (textes, libellés de champs, …).
  • ezv-font-color-4 / ezv-font-size-4 : Permet de gérer la couleur et la taille des valeurs (valeurs numériques, données remontées depuis Service Manager, …).
  • ezv-font-color-5 : Permet de gérer la couleur des éléments annexes n’entrant pas dans une des catégories ci-dessus.
  • ezv-font-family-1 / ezv-font-family-2 / ezv-font-family-3 / ezv-font-family-4 / ezv-font-family-5 : Permet de gérer différents cas de police (Fine, Semi-Bold, Light, Bold, Italic).

Variables relatives aux bordures

  • ezv-border-color-1 / ezv-border-size-1 : Permet de gérer la couleur et la taille des bordures de type < Spacer Element >.
  • ezv-border-color-2 / ezv-border-size-2 : Permet de gérer la couleur et la taille des bordures de type < Spacer Data >.
  • ezv-border-color-3 / ezv-border-size-3 : Permet de gérer la couleur et la taille des bordures de type < Border Widget >.
  • ezv-border-color-4 : Permet de gérer la couleur des bordures des éléments annexes n’entrant pas dans une des catégories ci-dessus.
Tags:
Modifié par Utilisateur inconnu le 2020/01/18 13:29
Créé par Administrator XWiki le 2020/01/18 13:29

Raccourcis

L'actualité mensuelle
•  Newsletter

Tous les changements
•  Service Manager
•  Service Apps
•  Self Help

Glossaire

Powered by XWiki ©, EasyVista 2020