Utiliser la feuille de style UP

UP met à disposition une feuille de style (assets/up.css) créée à partir de fichiers SCSS. Cela permet d'uniformiser le rendu graphique de toutes les actions.

Cette feuille de style est utilisée de 2 manières :

  • classiquement, par l'utilisation de ses classes
  • indirectement par la reprise de ses variables (couleurs, espaces, largeurs, ...) par les feuilles de style des actions

La gestion des variables SCSS

L'organisation des variables SCSS est la suivante :

variables par défaut assets/scss/_variables.scss

Ce fichier contient toutes les variables globales avec l'attribut default. Il est actualisé lors des mises à jour de UP.

préférences webmaster assets/_variables.scss

Ce fichier reprend tout ou partie des variables du fichier assets/scss/_variables.scss avec les valeurs souhaitées par le webmaster pour le site.

Lors d'une mise à jour de UP, ce fichier ne sera pas modifié.

utilisation par les actions

Pour utiliser les variables globales pour le ou les fichiers SCSS de votre action, il est suffit d'ajouter ces lignes au début du fichier SCSS

@import "../../assets/variables";
@import "../../assets/scss/variables";

La première ligne charge les préférences du webmaster et la seconde les valeur par défaut.

Composition des fichiers _variables.scss

variables par défaut
assets/scss/_variables.scss
reprise par préférences webmaster
assets/_variables.scss
breakpoints pour mediaqueries : points de ruptures pour les classes ayant un suffixe s ou m dans leur nom pour les adapter aux valeurs du site
couleurs de base (utilisé par les fichiers SCSS, ...) : les valeurs pour les couleurs de base de UP. Les nom de variables sont en anglais. Ne modifier que la valeur, jamais le nom des variables.
correspondance GB-FR pour utiliser les noms de variables en français dans les .scss des actions inutile, sauf si vous ajouter vos couleurs (voir ci-après)
liste des couleurs pour la création des classes b-color, t-color, ... inutile, sauf si vous ajouter vos couleurs (voir ci-après)
couleurs par défaut des textes utilisé par la fonction colorContraste pour que le texte soit toujours visible sur un fond coloré selon besoin
ombres : les valeurs pour un ombre légère et forte selon besoin
espaces : utilisé par les classes margin et padding (ma1, pa2, ...) adapter selon votre template
largeurs : utilisé par border (b1, b2, ...) adapter selon votre template
FONCTIONS UTILITAIRES POUR LES ACTIONS Vous pouvez ajouter des fonctions SCSS pour les rendre disponibles pour les fichiers SCSS des actions

Ajouter ses couleurs

S'il n'est pas possible de supprimer ou de modifier les variables des couleurs de base se UP, vous pouvez ajouter de nouvelles couleurs. Le principal intérêt est de les retrouver dans les classes bg-color, t-color, etc

Pour cela, outre la définition des variables, il faudra copier la liste des couleurs par défaut (sans !default) dans le fichier assets/_variables.scss puis ajouter les vôtres.

Exemple :