Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects

Référenciel des liens et ressources pour le projet

Un guide pour toi qui code le site

Ce guide est un répertoire des sites utiles pour la construction et recherches des éléments constituant le projet Froggit sur Docusaurus. Certaines techniques sont utilisées afin de remplacer des éléments, et des problèmes peuvent se résoudre grâce à des informations spécifiques.

Docusaurus est la référence de base pour :

  • Utiliser une méthode spécifique pour ajouter/remplacer un éléments.
  • Docusaurus dispose d'un large choix d'éléments de création.
  • Il est possible d'ajouter des plugins.

Note: Docusaurus met régulièrement à jour ses versions

Infima est la librairie de variables et de composants que Docusaurus utilise. Cela permet d'ajouter des éléments type bouton, grid, form, puis on leur donne un style au besoin (ça marche comme pour Bootstrap).

Ressources


Variables Infima

Afin de rester dans les caractéristiques de Docusaurus, on préfère réutiliser la liste des variables générée par Infima. Dès lors que nous créons un nouvel élément (par exemple un bouton), le CSS reprend les propriétés que nous lui attribuons dans la liste des variables. On perd moins de temps et tout est beaucoup plus simple.

Ressources

Couleurs

Afin de se faciliter la tâche, on utilise un générateur de variation des couleurs. Il suffit ensuite de récupérer les propriétés hexagone et de les mettre dans le fichier des variables.

Ressources

Table of content (TOC)

La TOC a une taille trop petite et nous utilisons la méthode du swizzling pour augmenter sa taille. On passe de col--2 à col--3 qui est une propriété d'Infima.

Ressources

Avatar as Twitter

Avec Infima, on récupère un code nous permettant de créer un petit avatar avec un texte de type citation.

Ressources

Admonitions

Cette ressource utilise les couleurs de base d'Infima dans ses cadres et bordures.

Ressources

Ajouter des icones avec React

Pour ajouter des icônes, des logo de marques existantes ou encore des pyctogrammes, on utilise la librairie de ressources visuelles dont dispose React.

Ressources