Introduction

Bienvenue dans votre Design Guideline.

L'objectif est de rassembler tous les composants du projet (aspect graphique et mise en oeuvre technique) et de faciliter le travail des concepteurs, graphistes, UX, webmasters et développeurs.
Cette interface est organisée via les sections suivantes (accessibles via le menu de gauche) :

• 1 - Base / Tools
• 2 - Atomes
• 3 - Molécules
• 4 - Organismes
• 5 - Pages / Layout

A noter qu'à ce stade, de nombreuses sections utilisent les éléments natifs de bootstrap mais l'objectif est de customiser l'ensemble pour obtenir un design guideline spécifique à la charte souhaitée tout en restant logique.

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 (couleurs, tailles, etc...).

Pour pouvoir travailler en local, il faut pouvoir interpréter du php et installer gulp (voir package.json) et lancer l'instruction 'gulp' depuis la console.
Les instructions de cette fonction sont détaillées dans le gulpfile.js mais pour résumer, nous ne faisons que compiler les fichiers sass vers un fichier unique css.

L'arborescence principale du site est constituée de 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. Parmi ces variables, une attention particulière pour le fichier 'config.php' qui permet de configurer à loisirs certaines variables en fonction de la page d'origine (matérialisée elle-même par une variable 'page' déclarée en début de fichier. Ainsi, en ouvrant une page physique du site, on découvre la déclaration d'un identifiant '$page' de cette 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.

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 less en css ou encore de générer une font 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'objectif est d'attribuer une classe à tous les éléments du DOM et qu'en css, nous puissions nous adresser à ses éléments sans perturber les autres et sans utiliser de syntaxe avec les enfants. Nous aurions .actu-item au lieu de .actu .list > li par exmple.

Je recommande de 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/

Qui peut le "plus" peut le "moins".
Le projet doit être configuré afin de ne pas charger des éléments non utilisés.
Côté php, des variables de chargement permettront d'afficher ou non les éléments dans le menu. Côté css, des commentaires équivalents devront empécher le chargement du code css.

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

// navGroup1
$navGroup1 = [
    ['label' => 'Introduction', 'id' => 'lab-1-introduction', 'url' => 'lab-1-introduction.php', 'status' => 'done'],
    ['label' => 'Colors', 'id' => 'lab-1-colors', 'url' => 'lab-1-colors.php', 'status' => 'done'],
    ['label' => 'Font', 'id' => 'lab-1-font', 'url' => 'lab-1-font.php', 'status' => 'done'],
    ['label' => 'Icons', 'id' => 'lab-1-icons', 'url' => 'lab-1-icons.php', 'status' => 'done'],
    ['label' => 'Responsive', 'id' => 'lab-1-responsive', 'url' => 'lab-1-responsive.php', 'status' => 'done'],
    ['label' => 'Unit / Ratio', 'id' => 'lab-1-unit', 'url' => 'lab-1-unit.php', 'status' => 'done']
];

@import

    // Base
    "projet/base/base",
    "projet/base/font",
    "projet/base/icons",
    "projet/base/responsive",
    "projet/base/unit",
    "projet/base/heading",
    
    // Bootstrap & Config. Projet
    "bootstrap/functions",
    "bootstrap/variables",
    "bootstrap/mixins",
    "bootstrap/root",
    "bootstrap/reboot",
    "bootstrap/type",
    "bootstrap/images",
    "bootstrap/code",
    "bootstrap/grid",
    "bootstrap/tables",
    "bootstrap/forms",
    "bootstrap/buttons",
    "bootstrap/transitions",
    "bootstrap/dropdown",
    "bootstrap/button-group",
    "bootstrap/input-group",
    "bootstrap/custom-forms",
    "bootstrap/nav",
    "bootstrap/navbar",
    "bootstrap/card",
    "bootstrap/breadcrumb",
    "bootstrap/pagination",
    "bootstrap/badge",
    //"bootstrap/jumbotron",
    "bootstrap/alert",
    "bootstrap/progress",
    "bootstrap/media",
    "bootstrap/list-group",
    "bootstrap/close",
    "bootstrap/toasts",
    "bootstrap/modal",
    "bootstrap/tooltip",
    "bootstrap/popover",
    //"bootstrap/carousel",
    "bootstrap/spinners",
    "bootstrap/utilities",
    "bootstrap/print",

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

    // Common
    "projet/common/tools",
    "projet/common/form-custom",
    "projet/common/rate",

    // Composants
    "projet/compo/hero",

    // Layout

    // Projet
    
    // Lab
    "lab/lab-variables",
    "lab/lab"

;

// JS
// ------------------------------
// boostrap
$jsPopper                       = '1';
$jsBsUtil                       = '1';
$jsBsIndex                      = '1';
$jsBsAlert                      = '1';
$jsBsButton                     = '';
$jsBsCarousel                   = '';
$jsBsCollapse                   = '1';
$jsBsDropdown                   = '1';
$jsBsModal                      = '1';
$jsBsTooltip                    = '1';
$jsBsPopover                    = '1';
$jsBsScrollspy                  = '';
$jsBsTab                        = '1';
$jsBsToast                      = '';
// plugins
$jsOptiscroll                   = '1';
$jsLab                          = '1';
$jsOwl                          = '1';

La nouvelle charte graphique devant cohabiter avec le site existant, certains arbitrages et ajustements ont été mis en place. Les éléments suivants ont été "hackés" dans la nouvelle charte sur la base de bootstrap 4 :

• .container > .container2 + déclinaisons
• .row > .row2 + déclinaisons
• .btn > .btn2 + déclinaisons