Cas d'une Google Font :

• L'appel se fait directement dans les variables Sass et Nuxt fera les imports automatiquement.
• Fichier concerné : assets/src/abstracts/variables.sass
• Exemple : $font-family-primary: "Cabin", Arial, sans-serif
• Attention par défaut les imports automatiques ne gèrent que les graisses 400 et 700, si vous souhaitez d'autres graisses il faut ajouter la configuration dans le fichier nuxt.config.ts après l'entrée modules :

Exemple (fourchette pour une font variable | liste pour une font non variable) :
      // Configuration des polices
      fonts: {
        families: [
          {
            name: 'Cormorant',
            provider: 'google',
            weights: ['400 700'],
          },
          {
            name: 'Poppins',
            provider: 'google',
            weights: [400, 500, 600, 700],
          },
        ],
      },
      

Cas d'une font custom :

• Il faut nommer correctement les fichiers de fonts en suivant la documentation de Nuxt Fonts
• Une fois sur la doc, cliquer sur "providers", puis regarder la partie "local".
• Il faut placer les fichiers dans le dossier public, et si les fonts sont appellées dans le sass, Nuxt les importera automatiquement.

Testez vos fonts ci-dessous (en modifiant la 'font-family'), avec les critères suivants :

• Vérifier que les caractères spéciaux sont bien pris en compte, notamment les lettres accentuées, œ, ç, @ et le &.
• Vérifier que les chiffres et les textes sont au même niveau
• Vérifier que les majuscules et minuscules sont cohérentes
• Vérifier que la typographie est bien centrée verticalement pour permettre une bonne intégration

A a B b C c D d E e F f G g H h I i J j K k L l M m N n O o P p Q q R r S s T t U u V v W w X x Y y Z z 0 1 2 3 4 5 6 7 8 9 À Â É È Ê Ë Î Ï Ô Ù Û Ü Ç Æ Œ à â é è ê ë î ï ô ù û ü ç æ œ & @
La cigüe, un coq naïf, fête son 1er anniversaire en décembre. L’été, l’île rêve de crêpes exquises. Jean-François, l’élève méritant, réussit l’examen avec un 9 sur 10. Zoé et Éléonore, deux sœurs, jouent à l’étang. Le café, agrémenté d’un zeste de citron, offre une expérience unique. Le château médiéval est majestueux avec ses flèches élancées. Le théâtre éblouit grâce à ses effets spéciaux. Le numéro 42, mystérieux, s’affiche en grand sur la façade. Michel, le créateur de bijoux, excelle dans son art. Cet après-midi, profitez d’un moment de détente avec votre musique préférée, un bon livre & une tasse de thé chaud.

• Tous les éléments graphiques en svg seront intégrés comme les icons avec NuxtIcon. Pas besoin d'optimiser les fichiers, le module s'en occupe.
• Déposez tous vos fichiers .svg dans le dossier : assets/icons .
• Il suffit ensuite d'appeler vos icônes via la composant NuxtIcon avec le nom souhaité dans la propriété 'name'. Ex: name="icon:burger"
• Testez le rendu de vos icônes et éléments graphiques ci-dessous en intégrant vos noms de fichiers.
• 🚨 Si vos icônes ne s'affichent pas: il faudra peut-être regénérer frontend et relancer la stack, et si cela ne fonctionne pas il faut supprimer le cache de Nuxt.

• Ce dernier s'intègre directement dans l'administration de Strapi via le content-type 'Configuration'
• Intégrez le content-type (Single type) 'Configuration' dans le code du CMS
• Intégrez l'appel global de la configuration et le lien vers le favicon dans app.vue - Exemple GIT
• En admin dans Content Manager > Configuration intégrez les logos dans l'ordre suivant : logo principal (couleur), logo alternatif (blanc) et favicon
• Testez le rendu de vos logos ci-dessous

• Ces dernières sont à paramétrer dans le fichier de variables : assets/src/abstracts/variables.sass
• Testez le rendu de vos couleurs ci-dessous

• Si besoin d'ajuster le design de la scrollbar : assets/src/base/scrollbar.sass

• Ajustez le design de vos textes de base : assets/src/abstracts/variables.sass & assets/src/base/typographie.sass
• Testez vos différents design de texte ci-dessous (normal, gras, italique) :

Lorem ipsum dolor sit amet utque aegrum corpus quassari etiam levibus solet offensis,
ita animus eius angustus et tener, quicquid increpuisset, ad salutis suae dispendium existimans
factum aut cogitatum, insontium caedibus fecit victoriam luctuosam.
Explanare nunc causam, quae ad exitium praecipitem Aginatium inpulit iam inde,
a priscis maioribus nobilem, ut locuta est pertinacior fama.

• Intégrez le composant AtomFullText
• Vous pouvez modifier le design des liens et listes à puce dans ce composant.

• Intégrez le composant AtomTitle
• Ajuster le design des titres dans ce composant et testez vos différentes versions ci-dessous :

• Intégrez le composant : AtomButton
• Attention celui-ci est dépendant du composant : AtomLink
• Testez vos différents designs ci-dessous :

• Intégrez le composant : MoleculeButtons
• Attention celui-ci est dépendant du composant : AtomButton
• Testez les différents designs ci-dessous :

• Intégrez le composant MoleculeCollapsible
• Attention celui-ci est dépendant des composants : AtomFullText | AtomButton
• Testez votre design ci-dessous :

• Intégrez les composants : OrganismTextualContentSimple | OrganismTextualContentRich
• Attention celui-ci est dépendant des composants AtomTitle, AtomButton, AtomFullText, MoleculeCollapsible
• Testez votre design ci-dessous :

• Intégrez le composant MoleculeDropdown
• Ce composant permet d'ouvrir un contenu en 'absolute' à partir d'un bouton déclencheur.
• Exemple d'utilisation: localeSwitcher, sous-navigation,...
• Attention celui-ci est dépendant des composants : AtomDropdownTrigger | AtomDropdownContent
• Testez le fonctionnement et les designs (si besoin) ci-dessous :

• Intégrez le composant OrganismLocaleSwitcher
• Attention celui-ci est dépendant des composants MoleculeDropdown
• Testez votre design ci-dessous :

• Intégrez le composant MoleculeLinkedIcons
• Attention celui-ci est dépendant du composant AtomLink
• Ce composant permet de rendre un icône entouré d'un lien. Il peut être utilisé pour rendre les réseaux sociaux du client, les données de contact (téléphone, email, situation...),...
• Testez votre design ci-dessous :

• Intégrez le composant MoleculeContact
• Ce composant permet de rendre les données de contact du client (nom de l'établissement, email, téléphone, ainsi que son adresse).
• Testez votre design ci-dessous :