Documentation développeur

De USAC-CGT
Aller à la navigation Aller à la recherche
La version imprimable n’est plus prise en charge et peut comporter des erreurs de génération. Veuillez mettre à jour les signets de votre navigateur et utiliser à la place la fonction d’impression par défaut de celui-ci.

Le but de cette page est de fournir une aide au développeur.

Design

Le site repose sur un design en grille :

  • verticalement : 12 colonnes avec gouttière
  • horizontalement : alignement sur une ligne de base : L'ensemble des hauteur et des marges en hauteur doivent être un multiple de la hauteur de la ligne de base. Le CSS n'est pas fait pour être aligné sur une ligne de base, donc il y a quelques hacks et quelques différences mais il faut garder le principe d'avoir des hauteurs qui soient des multiples de la ligne de base.

Style CSS

Il y a deux types de styles CSS :

  • Les styles généraux, s'appliquant à toute la page. Il s'agit de l'apparence globale, du theme de couleur, du placement dans la grille.
  • Les styles spécifiques à un composant vue. Il s'agit du contrôle de l'apparence du composant. Le placement dans la grille d'un composant relève des styles généraux.

Les styles généraux

Ils sont situés dans vue/public/css. Ils sont directement importé du design (https://gitlab.com/JiCambe/simu-usac-design-html, repo privé, demandez l'accès).

Si vous faites des modifications dans un de ces fichiers, il faut impérativement faire un commit avec uniquement les modifications css + prévenir de vos modiifs sur la ML.

Les fichiers :

  • reboot.css : fichier de reset CSS. NE PAS MODIFIER !
  • usaccgt-theme.css : Le thème USACcgt (définition des couleurs, des polices, des tailles)
  • usaccgt-verticalgrid.css : Tout ce qui concerne la grille verticale (les colonnes). Def des grilles, emplacements des objets
  • usaccgt-horizontalgrid.css : Tout ce qui concerne les hauteurs
  • usaccgt-look.css : de l'apparence générale (applications des polices, ect...)

Les styles spécifiques

On les trouve dans les composants monofichier (.vue).

<style scoped>...</style> pour les styles spécifique au composant

<style>...</style> pour les style un peu plus généraux. (dans le genre devrait être appliqué aussi aux sous-composants. Utiliser une classe dans ce marquage plutôt que <style scoped> améliore les perfs.

Se reporter à la doc de vue.js

Récupérée de « https://usac-cgt.org/wiki/index.php?title=Documentation_développeur&oldid=1015 »