Introduction

Bienvenue dans le Design System (DS).

Cette interface rassemble tous les composants du projet (aspect graphique et mise en oeuvre technique).
En plus d'être une documentation à jour et évolutive, elle va faciliter le travail des concepteurs, graphistes, UX, webmasters et développeurs.
Cette interface est organisée via les sections accessibles via le menu latéral.
Tout d'abord, cette entrée permet de configurer l'interface (lab) :

• Configuration (préférences couleur/alignement de l'interface)

Ensuite arrive les élements de la structure de base :

• Bases
• Atomes
• Molécules
• Organismes

Et enfin les éléments spécifiques à un contexte (GC dans notre cas) :

• GC Composants
• GC Layout & Pages

Cette interface se base sur le framework bootstrap mais il est possible de n'utiliser que les fragments nécessaire au projet (en css et en js).
L'objectif est de customiser l'ensemble pour obtenir un design guideline spécifique à la charte souhaitée tout en conservant une logique modulaire.
Afin de simuler certains comportements, l'interface utilise jquery et certains éléments js de la librairie de bootstrap mais chaque projet utilisera la technique qui lui est propre pour obtenir des résultats simiulaires.

La philosophie générale est de mutualiser et rationaliser au maximum les éléments afin de les rendre réutilisables.
Cela évite d'avoir à réinventer le moindre élément de base du projet mais plutôt de le construire à partir des éléments basiques définis dans le site (colors, sizes, etc...).

Arborescence = 2 dossiers principaux :

• src (fichiers scss sources non compilés du projet)
• www (site déployé dans le projet avec des fichiers php, css, js, fonts, etc...)

Le fichier css final et unique (base.css) est compilé à partir du fichier 'src/scss/base.scss'. En l'ouvrant, vous pouvez voir les sous fichiers qui la composent. Concernant les variables, elles sont toutes regroupées dans le fichier 'variables.scss'. La plupart des caractéristiques (couleurs, tailles, etc...) sont construites à partir de variables contenues dans ce fichier. Les fichiers issus de la librairie boostrap sont dans le dossier 'bootstrap', les autres dans le dossier 'base'.
En fonction du projet, "base" est à remplacer par le nom du projet ("gc" par exemple).

Le langage PHP est utilisé ici uniquement pour pouvoir faire des includes, des boucles d'affichage et des passages de variables.
Un fichier config.json permet de piloter les caractéristiques principales du projet (arborescence, status, theme, etc...). Chaque page finale commence par une variable 'page' qui permet d'indiquer certains comportements depuis le fichier de configuration.

Bootstrap est un framework front (HTML / CSS / JS) fournissant aux développeurs des outils pour créer et harmoniser les éléments, le tout dans un cadre responsive. Il fournit tout un tas d'outils déjà en place qu'il faudra simplement adapter en fonction de nos besoins.
Il est assez complet et prend en charge certains critères d'accessibilité.

Rappel : Nous ne sommes pas obligés de conserver ce framework.
Il est possible de le customiser sur mesure et de ne garder que le nécessaire au contexte (en css et en js). Nous utiliseons la version 5.2.3.

Pour en savoir plus : https://getbootstrap.com/docs/5.2

SASS est un préprocesseur pour générer du CSS. Il permet d'utiliser des variables, des fonctions et des imbrications.
L’objet de SASS est une plus grande efficacité de l’écriture de code CSS. Il existe de nombreuses formations sur le web pour les plus curieux d'entre vous.

GULP est est un "task runner", c'est à dire un automatiseur de taches. Il s'occupe de lancer des tas de scripts automatiquement.
Dans notre cas, il permet de convertir les fichiers scss en css ou encore de générer une font/sprite avec les pictos svg.
Nous utilisons la version 4.

Pour en savoir plus : https://gulpjs.com/

BEM est une abréviation de 'Block, Element, Modifier'. Concrètement, c'est une façon de nommer les classes en CSS à partir d'une convention.
L'idée est de normaliser les classes à pour les éléments du DOM. Nous pourrons pointer ces derniers sans impacter les autres avec une syntaxe logique.

Convention : Nommer les classes uniquement avec des minuscules et des tirets "-" car bootstrap en fait de même et il serait sage d'être ISO sur l'ensemble du projet.

Pour en savoir plus : http://getbem.com/