Introduction

Bienvenue dans votre Design Système / Design Guideline.

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 suivantes (accessibles via le latéral) :

• Configuration
• Bases
• Atomes
• Molécules
• Organismes
• Pages / Layout HTML

Cette version se base sur le framework bootstrap mais il lest possible d'utiliser tout autre framework ou du code full custom.
L'objectif est de customiser l'ensemble pour obtenir un design guideline spécifique à la charte souhaitée tout en conservant une logique modulaire.

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 (style.css) est compilé à partir du fichier 'src/scss/style.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 'projet'.

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 pahe finale commence par une variable 'page' qui permet d'indiquer certains comportements depuis le fichier de configuration.

Bootstrap est un framework front (HTML / CSS) 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 (SASS).

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 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/

Concernant le javascript, la présence d'un item dans le projet initialisera le chargement de librairie (passe de la variable js correspondante à 1.

...
"sections": [
        {
            "id":       "section0",
            "label":    "Configuration",
            "svg":      "cog",
            "pages": []
        },
        {
            "id":       "section1",
            "label":    "Bases",
            "svg":      "diamond1",
            "pages": [
                {
                    "id":       "lab-1-introduction",
                    "label":    "Introduction",
                    "url":      "lab-1-introduction.php",
                    "status":   "ok" 
                },
                {
                    "id":       "lab-1-colors",
                    "label":    "Colors",
                    "url":      "lab-1-colors.php",
                    "status":   "ok"
                }
...

@import
    // Base
    "projet/base/base"
    ,"projet/base/font"
    ,"projet/base/responsive"
    ,"projet/base/unit"
    
    // Bootstrap & Config. Projet
    ,"bootstrap/functions"
    ,"bootstrap/variables"

    ,"projet/common/tools"

    ,"projet/base/heading"
    ,"bootstrap/mixins"
    ,"bootstrap/root"
    ,"bootstrap/reboot"
    ,"bootstrap/type"
    ...
    ,"bootstrap/grid"
    ,"bootstrap/tables"
    ,"bootstrap/forms"
    ,"bootstrap/buttons"
    ...
    ,"bootstrap/breadcrumb"
    ,"bootstrap/pagination"
    ,"bootstrap/alert"
    ...
    ,"bootstrap/modal"
    //,"bootstrap/tooltip"
    //,"bootstrap/carousel"
    ,"bootstrap/utilities"
    ,"bootstrap/print"

    // Plugins
    ,"plugins/owl.carousel"
    ...

    // Common
    ,"projet/common/form-custom"
    ,"projet/common/svg"
    ...

    // Layout
    ,"projet/layout/layout"
    ,"projet/layout/header"
    ,"projet/layout/nav"
    ,"projet/layout/footer"

    // Composants
    ,"projet/compo/promopush"
    //,"projet/compo/thumbnail"
    ...

    // Projet / Section
    ,"projet/section/prodlist"
    ...
;

// appelle des fichiers transverses (popper, util, index, etc...)
balise script + url js
...

// puis appel au cas par cas des scripts js bootstrap
if($jsBsAlert == '1')              { balise script + url js }
if($jsBsButton == '1')             { balise script + url js }
...

// puis appel plugins
if($jsOptiscroll == '1')           { balise script + url js }
if($jsOwl == '1')                  { balise script + url js }
...

// et enfin des scripts spécifiques
balise script + url js
...