Framework Bootstrap - Version LESS/SASS
Introduction
Il y a quelques années, lorsque nous avons décidé de faire une grosse migration technologique sur l'ensemble de nos nouveaux produits, nous avons également été confrontés au besoin grandissant de structurer toute la partie développement Front-End, et y intégrer la notion de responsive, avec l'explosion de la navigation mobile et tablette.Nous utilisions déjà Bootstrap pour certaines interfaces admin en interne, et avons naturellement pensé à l'implémenter sur nos nouveaux produits, sachant qu'à ce moment là, nous étions aussi en train de repenser tout notre CMS, afin entre autre de proposer la gestion des différents affichages des éléments selon la taille des terminaux. C'était donc le moment idéal pour créer un nouvel environnement de travail en cohérence avec toutes les nouveautés de ce CMS.
Pourquoi nous avons choisi d'utiliser Bootstrap ?
Nous avions besoin d'un framework complet, qui utilise tout d'abord un modèle de grilles CSS simple à manipuler, nous souhaitions également faciliter l'intégration CSS en passant sur la technologie LESS, notamment pour les produits que nous allions proposer à un large panel d'utilisateurs. En effet, nous voulions avoir la possibilité de personnaliser très simplement les couleurs d'une interface, en fonction des besoins clients, tout en utilisant toujours la même base de style. Cela nous permettait donc de créer très rapidement un grand nombre de templates, en changeant uniquement 2 variables de couleurs dans le code...Enfin, alors que nous utilisions auparavant une multitude de petits plugins pour faire des effets divers et variés, et que nos CSS manquaient d'une base solide pour démarrer les projets, Bootstrap nous a considérablement simplifié la tache, grâce à sa bibliothèque d'effets jQuery pré-intégrés, et une base CSS responsive relativement complète et surtout adaptable.
Je vous invite donc, pour continuer cet article, à faire un petit tour des éléments que nous utilisons le plus au quotidien.
Prise en main de Bootstrap
Pour utiliser Bootstrap dans son environnement le plus basique, c'est à dire avec des couleurs prédéfinies, le système de grille, le responsive, dans un rendu classique, avec quelques effets, il suffit d'appeler le CSS proposé dans le framework, directement dans la balise <head> de notre page.
<head> … <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> </head>
LESS/SASS - variables et mixins
En ce qui nous concerne, nous avons utilisé le LESS dans un premier temps.Pour cela, rien de plus simple, comme pour le CSS :
<head> … <link href="bootstrap/less/bootstrap.less" rel="stylesheet" type="text/less" /> <script src="less.js" type="text/javascript"></script> </head>
Il faut savoir que seul le CSS est reconnu par les différents navigateurs. Vous noterez donc que pour lire le fichier LESS, j'ai ajouté un fichier javascript juste en dessous : less.js qui est un compilateur. Il s'occupe donc de transformer le fichier .less en CSS interprétable par le navigateur.
En 2015, Bootstrap a annoncé la sortie d'une version 4 alpha de son framework, avec son lot de nouveautés, et le changement qui a fait mouche, c'est l'abandon du LESS au profit du SASS.
En terme d'utilisation, on retrouve le même principe que le LESS avec quasiment la même syntaxe, mais il est plus performant et dispose d'une communauté plus importante, pour citer les raisons principales de ce changement...
Nous avons donc basculé en 2016 sur SASS, afin d'être prêts lorsque la version 4 de Bootstrap sera stabilisé et utilisable sur nos projets.
En passant sur SASS, nous avons mis en place un système de compilation en temps réel sur Visual Studio (WebCompiler), qui nous a permis d'envoyer en production uniquement le fichier .css déjà généré en local. A chaque sauvegarde d'un fichier .scss, l'outil WebCompiler met à jour le CSS. Cela permet d'éviter la compilation des feuilles de style côté client et le chargement d'un compiler javascript, et améliore le temps de chargement des pages, tout en gardant la souplesse et les avantages des feuilles de styles dynamiques pour la phase de dev.Pour illustrer, voici à quoi ressemble l'arborescence classique des fichiers bootstrap .scss:
Côté projet, ça marche comme pour le LESS, on appelle tous les fichiers dans bootstrap.scss, et WebCompiler s'occupe de tout mettre en commun et de transformer ces fichiers en un CSS. Ci-dessous, un début de ce fichier :
// Reset and dependencies @import "../bootstrap/variables"; @import "../bootstrap/normalize"; @import "../bootstrap/print"; // Core CSS @import "../bootstrap/scaffolding"; @import "../bootstrap/type"; @import "../bootstrap/code"; @import "../bootstrap/grid"; @import "../bootstrap/tables"; @import "../bootstrap/forms";
Nous créons ensuite un dossier comprenant tous les fichiers propres au projet, pour bien les différencier des fichiers natifs de bootstrap, en prenant soin de bien les catégoriser selon leur rôle. Par exemple, un formulaire de recherche aura son propre fichier .scss => _search-form.scss
Cela permet de se retrouver plus facilement dans les différents styles, et éviter les conflits si un autre intégrateur touche au style du site en même temps.
Une fois que tout cela est mis en place, le nerf de la guerre si l'on peut dire, se trouve dans le fichier variables.scss, il permet de poser toutes les valeurs des variables qui sont répercutées dans tous les fichiers .scss. En gros, si on veut que les erreurs soient affichées en fushia sur tout le site, c'est ici qu'on le déclare :
$brand-success: #5cb85c !default; $brand-info: #5bc0de !default; $brand-warning: #f0ad4e !default; $brand-danger: #d9534f !default; //== Scaffolding // //## Settings for some of the most global styles. //** Background color for `<body>`. $body-bg: #fff !default;
//** Global text color on `<body>`. $text-color: $gray-dark !default;
On peut donc utiliser des variables pré-existantes pour les modifier et ainsi changer une couleur ou une taille de police par exemple, et si l'on veut en créer d'autres pour une raison x ou y, il faut l'écrire dans ce fichier. C'est en tout cas plus logique et propre.
Sur nos projets en général, nous renommons les fichiers bootstrap.scss et variables.scss en y ajoutant le nom du projet, cela nous permet de bien les identifier, et d'éviter qu'ils soient écrasés le jour où l'on mettra à jour tout le package.
Un autre aspect qui nous a beaucoup rendu service également, c'est le principe de mixins. En effet, la diversité d'interprétations du CSS propre à chaque navigateur nous oblige régulièrement à écrire le même style sur plusieurs lignes, avec une syntaxe différente. Les mixins sont là pour nous mâcher le travail en nous proposant ces différentes syntaxes sous forme de "fonction". Il nous suffit de l'inclure dans le style par un @include, en lui attribuant tous les paramètres :
1 2 3 | .bg-container { @include transition(height, .3s, linear); } |
...et le mixin s'occupe de réécrire le code pour les différents navigateurs :
1 2 3 4 5 | .bg-container { -webkit-transition: height,.3s,linear; -o-transition: height,.3s,linear; transition: height,.3s,linear; } |
Colonnes (grilles CSS)
Pour créer un projet avec Bootstrap, et donc utiliser les systèmes de grilles, il faut bien intégrer l'idée de colonnes et la comprendre, pour ensuite la décliner sur les différentes tailles. On pense donc obligatoirement notre création graphique en fonction de ces contraintes là, c'est à dire que l'on essaie d'agencer les éléments qui composent la page, de manière à coller sur ce système de colonnes.Bootstrap fonctionne sur 12 colonnes, nous sommes donc restés sur ce principe pour la plupart de nos projets.
Voici d'après le site officiel de getbootstrap.com, comment fonctionne ce système, avec les classes css adéquates :
Ces classes nous permettent de dire à un bloc quel pourcentage il doit représenter sur la largeur du container. On lui attribue ensuite la classe css en conséquence, en tenant compte de la taille de l'écran (col-lg => écran supérieur à 1200px, col-md => écran entre 992 et 1199px, etc...). Ceci nous permet ensuite de gérer efficacement et rapidement ces mêmes blocs en mode responsive.
Pour voir le code de la ligne 3 du schéma par exemple, c'est par ici :
1 2 3 4 5 | <div class="container"> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">Bloc 1</div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">Bloc 2</div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">Bloc 3</div> </div> |
La ligne sera donc partagée en 3 jusqu'aux écrans de largeur 992px, puis en 2 sur les tablettes, et enfin en 100% sur les mobiles.
Plugins javascript (via jQuery) - Tooltip - Popover - ScrollSpy
Parmi les plugins bootstrap que nous utilisons régulièrement sur nos produits, nous pouvons citer tooltip.js, qui permet d'ouvrir un petit encart informatif au survol d'un élément, et son grand frère, popover.js, qui permet également d'ouvrir un encart informatif mais qui pour sa part fonctionne au clic. Nous utilisons également scrollspy.js qui permet de son côté de surveiller le scroll de la page, et détecter devant quel élément on se trouve, afin par exemple d'animer un menu et montrer à l'utilisateur qu'il est positionné à un certain niveau du menu de la page.Ce sont donc des petits outils qui facilitent le développement de nos produits et nous évitent d'aller chercher ou créer systématiquement des plugins externes.
Après 4 ans d'utilisation et d'évolutions, notre bilan
Les technologies ont beaucoup évolué en peu de temps, et le responsive n'est plus une option mais un enjeu incontournable dans l'intégration Front-End. Bootstrap nous a donc beaucoup aidé à appréhender et maîtriser le responsive, en nous apportant une approche structurée du développement CSS, grâce à l'utilisation des grilles, et la simplification du code via les langages dynamiques de génération de feuilles de styles CSS (LESS/SASS).Nous avons eu l'occasion de mettre en place Bootstrap au bon moment, et avons appris à le maitriser, et y adapter nos propres besoins.
Nous pourrions envisager aujourd'hui, avec les connaissance que nous avons dans le domaine, de migrer vers un framework simplifié. En effet, nous nous apercevons avec le temps que nous profitons principalement du confort que nous apporte toute la base de code Bootstrap, mais notre environnement métier nous poussent à laisser de côté une grosse partie des possibilités de ce framework tout en créant nos propres fonctionnalités à côté pour nos besoins spécifiques. Le réel enjeu d'un abandon de Bootstrap au profit d'une solution simplifiée serait avant tout de réduire le temps de chargement de nos sites en enlevant tout le code superficiel. Ceci est encore au stade de la réfexion, mais pourrait faire l'objet d'une prochaine vague d'améliorations Front-End.
Commentaires
Enregistrer un commentaire