« Documentation développeur » : différence entre les versions
Aucun résumé des modifications |
Aucun résumé des modifications |
||
| Ligne 19 : | Ligne 19 : | ||
Les fichiers : | 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 | |||
Dernière version du 31 octobre 2023 à 10:49
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