Bienvenue dans le Storybook.
Cette interface rassemble tous les composants du projet (aspect graphique et code HTML/CSS).
En plus d'être une documentation à jour et évolutive, elle va faciliter le travail des concepteurs, graphistes, UX, webmasters et développeurs.
Cette interface s'organise autour du menu latéral qui propose un onglet de customisation de l'interface et différentes entrées (1 pour chaque projet).
- Configuration (préférences couleur/alignement de l'interface)
Et enfin les éléments spécifiques aux différents projets :
- Sonovente
- Univers Sons
- MSC Distribution
- Sonovente Pro
- Elokance
- Evolite
- Boomtone
Pour chaque projet, nous retrouvons des listes de liens permettant d'accèder uax différentes rubriques du storybook ainsi que vers les gabarits et layout du projet. Exemple d'organisation :
- Bases
- Utilities
- Atomes
- Molécules
- Organismes
- Components
- Layout
- Pages / Gabarits
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 similaires.
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...)
En fonction du projet, un fichier css final et unique est compilé à partir du fichier source référent 'src/scss/name.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.
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...).
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 4.6.
Pour en savoir plus : https://getbootstrap.com/docs/4.6
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 le storybook en fait de même et il serait sage d'être ISO sur l'ensemble du projet.
Structure : bloc-element-precision
En cas de besoin d'un modifier, il sera recommandé d'ajouter une classe additionnelle jouant ce role.
Par exemple, une div aura la classe .actu-list-item et aussi .checked plutôt qu'une seule de type .actu-list-item__checked.
Pour en savoir plus : http://getbem.com/
Une variable CSS (aussi appelée "propriété personnalisée") est un moyen de stocker des valeurs réutilisables dans votre feuille de style.
Imaginez-la comme une boîte où vous pouvez ranger une couleur, une taille de police ou n'importe quelle autre valeur CSS, puis la réutiliser où vous le souhaitez.
Déclaration
:root {
--test-color: #6a6a6A;
--test-padding: 1rem;
}
.section-1 {
--main-color: #d32f2c; /* Couleur rouge */
}
.section-2 {
--main-color: #3fcef2; /* Couleur cyan */
}
Utilisation
.test {
color:var(--test-color);
padding:var(--test-padding);
}
.section-1 h1 {
color: var(--main-color); /* Couleur rouge */
}
.section-2 h1 {
color: var(--main-color); /* Couleur cyan */
}
Plutôt que de répéter les mêmes valeurs partout dans votre code, les variables CSS vous permettent de centraliser des éléments récurrents comme les couleurs, les polices ou les espacements.
Ainsi, si vous devez modifier une valeur, vous n'avez qu'à la changer à un seul endroit, et l'ensemble de votre site sera mis à jour.
Un vrai gain de temps, surtout pour les projets de grande envergure.
Les variables CSS sont directement comprises par les navigateurs modernes.
Pas besoin de compiler quoi que ce soit : vous les déclarez dans votre CSS et elles fonctionnent immédiatement.