Al­ter­na­tives à Bootstrap : tour d’horizon des meilleurs fra­me­works frontend

Lorsque l’on souhaite créer un frontend Web, il y a plusieurs défis à relever : il s’agit de doter  l’interface d’un aspect visuel sa­tis­fai­sant, tout en ne perdant jamais de vue l’uti­li­sa­bi­lité. En raison des dif­fé­rents na­vi­ga­teurs et des dif­fé­rents appareils que l’on utilise de nos jours pour trouver du contenu sur le Web, les visuels et les éléments tech­niques que l’on choisit doivent pouvoir fonc­tion­ner à travers des pla­te­formes multiples.

Pour ne pas avoir à commencer le dé­ve­lop­pe­ment d’une interface Web à zéro, de nombreux pro­gram­meurs utilisent UI-Fra­me­works (User Interface). Le choix se porte souvent sur celui conçu par Twitter, Bootstrap, dont les com­po­sants, optimisés pour la recherche mobile et les na­vi­ga­teurs les plus utilisés, sont fa­ci­le­ment adap­tables en fonction de ses propres besoins. La con­sé­quence de cette crois­sance, c’est qu’il existe sur le Net de nombreux sites cons­truits avec les codes standard de Bootstrap, et qu’ils sont tous très si­mi­laires pour cette raison. Une autre petite critique à l’égard de Bootstrap est la com­plexité du framework frontend, largement basé sur CSS et Ja­vaS­cript : ceci rend les balises HTML plus complètes, et donc le projet Web plus long à charger. Il est possible de té­lé­char­ger des scripts et des fichiers CSS réduits, qui ne con­tien­nent que les éléments utiles à Bootstrap. Cependant, il est né­ces­saire de se pencher davantage sur le sujet lorsque l’on choisit cette option. On perd alors en sim­pli­cité et gain de temps, qui devraient être permis par l’uti­li­sa­tion du framework. Certains dé­ve­lop­peurs dé­con­seil­lent sim­ple­ment l’uti­li­sa­tion d’un framework UI, c’est pourquoi il peut être sensé d’envisager des al­ter­na­tives à Bootstrap. Une gageure, compte-tenu du vaste choix dis­po­nible.

Nous vous pré­sen­tons ci-dessous cinq fra­me­works frontend, qu’il est possible d’utiliser à la place de celui de Twitter, pour dé­ve­lop­per un frontend Web fonc­tion­nel et complet. Nous pré­sen­tons également leurs avantages, in­con­vé­nients et dif­fé­rences par rapport à Bootstrap, ainsi que l’étendue des dif­fé­rents codes, et pour quel type de dé­ve­lop­peurs ils sont par­ti­cu­liè­re­ment adaptés. Nous verrons enfin comment fonc­tionne le dé­ve­lop­pe­ment avec chacune des al­ter­na­tives à Bootstrap.

Le framework modulable de Foun­da­tion trouve son origine dans un guide de style que l’agence de design Web ZURB utilisait d’abord ex­clu­si­ve­ment pour ses clients. Par la suite, ZURB a combiné et publié de nombreux com­po­sants HTML, CSS et Ja­vaS­cript au framework open-source. Le cœur du framework est une grille flexible composée de douze colonnes : elle permet un de créer une mise en page res­pon­sive, qui s’adapte au­to­ma­ti­que­ment à la taille des dif­fé­rents visuels et à la ré­so­lu­tion des dif­fé­rents terminaux. Outre ce système de grille, Foun­da­tion propose les services suivants :

• Dia­po­si­tives

• Boutons

• Ty­po­gra­phie

• Barre de menus et menus

• Con­te­neurs média

• Classes flot­tantes intégrées et de vi­si­bi­lité

Foun­da­tion, tout comme Bootstrap à partir de sa version 4, est basé sur Sass, un langage de feuilles de style qui facilite la création et la mo­di­fi­ca­tion des fichiers CSS. Le framework de ZURB souffre cependant de l’absence de Less, un autre langage de feuilles de style, proposé par Bootstrap. Si le nombre de plugins Ja­vaS­cript et de snippets CSS sont quasiment équi­va­lents, Foun­da­tion présente moins de modèles, et une com­pa­ti­bi­lité réduite avec les autres pla­te­formes. Le framework de ZURB surpasse celui de twitter en ce qui concerne le dé­ve­lop­pe­ment in­di­vi­duel de frontends. Le code CSS sous-jacent donne accès à un design compact, qui peut fa­ci­le­ment être adapté à des besoins spé­ci­fiques. Con­trai­re­ment à Bootstrap, certaines classes sont di­rec­te­ment intégrées sans que l’on ait besoin de les ajouter au préalable. Un autre avantage : ZURB propose dif­fé­rents cours, un soutien per­son­na­lisé pour votre projet de frontend, ainsi qu’une version spéciale du framework pour la création de news­let­ters. Si vous souhaitez utiliser Foun­da­tion pour dé­ve­lop­per votre interface Web, il est possible de té­lé­char­ger gra­tui­te­ment soit l’ensemble complet, soit une sélection de com­po­sants de votre choix, à partir du site Web.

Yahoo a publié en 2013 Pure.CSS, une structure basique pour le dé­ve­lop­pe­ment de frontends. Il s’agit une bonne al­ter­na­tive à Bootstrap, mais elle peut aussi être utilisée en com­bi­nai­son avec le framework de Twitter. Il est basé sur le SMACSS (Scalable and Modular Ar­chi­tec­ture for CSS, soit ar­chi­tec­ture évolutive et modulable des CSS), un système qui veille à ce que les éléments ré­cur­rents (tableaux, boutons ou for­mu­laires) soient séparés des éléments de mise en page de base (police, layout, etc.), et bé­né­fi­cient de leurs propres codes. Dans le framework de Yahoo, chaque module a un nom de classe par défaut com­men­çant par le préfixe « pure- » pour les modules habituels, auquel s’ajoutent d’autres noms de classe pour des règles spé­ci­fiques qui s’ap­pli­quent à des sous-modules. Le framework frontend, qui peut être té­lé­chargé en version res­pon­sive ou non, contient les six modules suivants. Ils pèsent environ 4 KB lorsqu’ils sont com­pres­sés sous forme de fichier .zip (16 KB lorsqu’ils sont dé­com­pres­sés) :

• Base (base-min.css): base du framework, incluant les règles

• Grids (grids-res­pon­sive-min.css): système de grille flexible et res­pon­sive

• Forms (forms-min.css/forms-nr-min.css): for­mu­laires

• Buttons (buttons-min.css): dif­fé­rents boutons

• Tables (tables-min.css): tableaux

• Menus (menus-min.css/menus-nr-min.css): menus

Tous les modules sont cons­truits à partir de la feuille de style open-source Normalize.css, tout comme Bootstrap et de nombreux autres fra­me­works CSS. Cette feuille de style remplace les styles par défaut des éléments HTML par des styles optimisés et com­pa­tibles avec tous les na­vi­ga­teurs. En com­pa­rai­son avec Bootstrap, le pendant de Yahoo ne contient pas d’ap­pli­ca­tions Ja­vaS­cript, même s’il est possible d’en ajouter soi-même. Pure.CSS est moins un frontend complet qui doit être adapté à vos propres besoins qu’un point de départ pour votre projet, qui garantit donc plus de liberté. Yahoo héberge le framework sur son propre Content Delivery network (Yahoo CDN), de sorte qu’il soit possible de l’intégrer en section <head> de votre projet avec un simple lien. Bien sûr, il est également possible de té­lé­char­ger Pure.CSS et de l’héberger soi-même. Le lien actuel vers le CDN et les fichiers té­lé­char­geables se trouvent sur le site officiel purecss.io.

En 2013, le pro­gram­meur Jack Lukic a publié son framework pour frontend et dé­ve­lop­pe­ment, sous le nom de Semantic UI. L’objectif central de cet ensemble est de sim­pli­fier l’écriture du code HTML grâce à des con­ven­tions in­tui­tives et con­vi­viales. Semantic UI contient à cette fin plus de 3000 classes sé­man­tiques en CSS, faciles d’uti­li­sa­tion et conçues pour optimiser le processus de dé­ve­lop­pe­ment. Si la formule de base de Bootstrap ne contient qu’un seul thème, celle de Semantic IU offre plus de 20 modèles de design. L’étendue est un peu plus complexe qu’avec le framework de Twitter : en plus des CSS et des fichiers Ja­vaS­cript élé­men­taires, l’ensemble de base inclut des polices, le lot PHP Composer, le ges­tion­naire de paquets Bower, ainsi que le ges­tion­naire de tâches Gulp.  Les com­po­sants in­di­vi­duels sont classés selon ces 6 domaines :

• Globals : dé­fi­ni­tions de styles basées sur Normalize.css ; ty­po­gra­phie et bases

• Elements : com­po­sants généraux de frontend, tels que boutons, icônes, con­te­neurs, etc.

• Col­lec­tions : contenu struc­tu­rel, comme les systèmes de grilles, menus, tableaux et for­mu­laires

• Views : éléments in­te­rac­tifs comme les zones de com­men­taires, les fils d’actualité et les bannières pu­bli­ci­taires

• Modules : widgets comme les menus dé­rou­lants, les fenêtres pop-up et les boutons checkbox

• Behaviors : in­ter­faces pour la pro­gram­ma­tion Ja­vaS­cript

Pour les débutants, le système de noms de Semantic UI peut être sur­pre­nant à première vue, et requiert un temps d’adap­ta­tion. Les efforts sont toutefois ré­com­pen­sés puisque le code HTML de votre frontend Web est bien plus facile à lire qu’avec Bootstrap ou des fra­me­works com­pa­rables, qui peuvent être avan­ta­geux dans des versions an­té­rieures. Semantic IU n’existe pas pour les versions CSS, mais il existe une version Less. Il existe aussi une version Sass, dans laquelle Semantic IU est com­pa­rable au framework de Twitter. L’un des in­con­vé­nients majeurs de cette al­ter­na­tive à Bootstrap est que de nombreux com­po­sants dépendent de Ja­vaS­cript et ne fonc­tion­nent pas avec d’autres langages de script. Il est possible de té­lé­char­ger Semantic IU sur la section des té­lé­char­ge­ments du site Web officiel, d’intégrer les fichiers sur le Content Delivery Network JSDELIVR via un lien, ou d’accéder à un snippet in­di­vi­duel du framework sur la pla­te­forme GitHub.

Uikit est une solution de pro­gram­ma­tion open-source. Elle a été dé­ve­lop­pée par l’en­tre­prise YOOtheme, basée à Hambourg, qui jouit d’une grande expertise dans le domaine du dé­ve­lop­pe­ment d’ap­pli­ca­tions Web et de thèmes pour Wordpress, Joomla et l’outil de création de sites qu’elle a elle-même développé, YOOtheme Pro. La large gamme de com­po­sants HTML, CSS, Ja­vaS­cript dépend de la licence gratuite MIT et peut donc fa­ci­le­ment être utilisée et modifiée. Tous les snippets CSS sont dis­po­nibles en version Less et en version Sass, afin de pouvoir adapter les modèles de styles aux besoins de pro­gram­meurs ex­pé­ri­men­tés. Il existe plus de 30 modules de cette al­ter­na­tive à Bootstrap, créés sur Normalize.css, tout comme Bootstrap et les exemples de fra­me­works pré­cé­dents. C’est la raison pour laquelle les projets Web créés avec Ulkit s’affichent sans problème dans les na­vi­ga­teurs actuels.

Les com­po­sants centraux sont divisés selon les six ca­té­go­ries suivantes :

• Defaults : base pour la nor­ma­li­sa­tion des éléments HTML, qui les rend com­pa­tibles avec tous les na­vi­ga­teurs, et leur applique des principes sty­lis­tiques de base

• Layout : outils de design du frontend, notamment le système de grille, les boites de contenu, et les classes CSS né­ces­saires au contenu récurrent

• Na­vi­ga­tions : tous les éléments qui aident les visiteurs à utiliser l’interface Web, comme la nu­mé­ro­ta­tion des pages et les barres de na­vi­ga­tion

• Elements : styles pour les blocs de contenus autonomes, comme les tableaux, les listes et les for­mu­laires

• Common : com­po­sants utilisés au sein du contenu, comme les boutons, icônes, badges ou ani­ma­tions

• Ja­vaS­cript : es­sen­tiel­le­ment des modules Ja­vaS­cript pour l‘im­plé­men­ta­tion des éléments in­te­rac­tifs

Ulkit dispose de plusieurs classes res­pon­sives pour adapter le contenu à dif­fé­rentes tailles de pré­sen­ta­tion. Les points de rupture pré­dé­fi­nis (par exemple 1200 pixels pour un grand écran ou 479 pixels pour un écran de smart­phone) peuvent être adaptés à chaque thème grâce à l’outil de per­son­na­li­sa­tion en ligne, Customize. Pour éviter des com­pli­ca­tions avec d’autres snippets de CSS ou des fra­me­works, toutes les classes sont iden­ti­fiées par le profil « uk ». Les CSS ad­di­tion­nels et les éléments Ja­vaS­cript ne sont pas intégrés dans le cœur du framework mais peuvent être ajoutés en option. Ces éléments sont né­ces­saires pour im­plé­men­ter des in­ter­faces Web plus complexes si celles-ci sont équipées d’une section ad­mi­nis­tra­teur incluant un iden­ti­fiant, de l’édition HTML et des fichiers à té­lé­char­ger.

En dépit du grand nombre de fonctions, le poids in­di­vi­duel de chaque fichier ainsi que celui de l’ensemble du framework est éton­nam­ment léger. Il peut être étendu grâce à une do­cu­men­ta­tion très détaillée qui facilite con­si­dé­ra­ble­ment les débuts (bien que Bootstrap soit en tête en ce qui concerne la sélection de thèmes et le nombre de tutoriels). Ulkit dispose d’environ 1500 forks sur GitHub, où l’on peut trouver et té­lé­char­ger chacun des modules. L’ensemble complet peut aussi être té­lé­chargé à partir du site officiel d’Ulkit. Il n’est toutefois pas possible de dé­sé­lec­tion­ner les modules à l’avance : il faut les retirer ensuite du dossier dé­com­pressé.

Ma­te­ria­lize est un framework CSS basé sur le principe du material design, publié en 2015 par Google et utilisé depuis dans la plupart de ses ap­pli­ca­tions. Le concept repose sur des surfaces res­sem­blant à des cartes, au graphisme mi­ni­ma­liste (« flat design »), mises en lumière grâce à des ani­ma­tions et des ombres. Les effets de pro­fon­deur ainsi produits aident l’uti­li­sa­teur de l’interface Web à ap­pré­hen­der fa­ci­le­ment les in­for­ma­tions im­por­tantes et les éléments in­te­rac­tifs. Ce framework UI à licence MIT a été développé par Alvin Wang, Alan Chang, Alex Mark et Kevin Louie, quatre étudiants de la Carnegie Mellon Uni­ver­sity en Penn­syl­va­nie. Cette al­ter­na­tive à Bootstrap qui, comme le framework de Twitter, comporte un système de grille à 12 colonnes, contient dif­fé­rents com­po­sants CSS et Ja­vaS­cript, plus de 700 symboles officiels dans une base de données ty­po­gra­phiques, ainsi que Roboto, la police standard de Google. Outre les fichiers CSS habituels, dis­po­nibles en version standard ou allégée, il est possible d’accéder à des fichiers sources SCSS écrits en Sass, ce qui simplifie le design in­di­vi­duel des in­ter­faces Web. Quelle que soit votre sélection, il y a environ 30 éléments dis­po­nibles :

• CSS: le composant CSS élé­men­taire est le système de grille res­pon­sive, exac­te­ment comme pour Bootstrap et les autres fra­me­works. Il fournit les bases d’une interface Web capable de fonc­tion­ner avec tous les appareils. La grille de Ma­te­ria­lize comprend trois tailles d’affichage pré­dé­fi­nies : moins de 600 pixels pour les appareils mobiles, jusqu’à 992 pixels pour les tablettes, et plus de 992 pixels pour les or­di­na­teurs de bureau. Parmi les autres snippets CSS on compte une palette de couleurs basée sur les couleurs du material design, la police Roboto, et plusieurs classes appelées « helpers », qui aident à aligner le contenu.

• Com­po­sants : les com­po­sants sont les parties du frontend dont on a besoin pour im­plé­men­ter les éléments de na­vi­ga­tion et les zones in­te­rac­tives. En plus des com­po­sants habituels pour la pa­gi­na­tion, les for­mu­laires, les menus de na­vi­ga­tion ou les icônes, on trouve des modules très im­por­tants pour l’im­plé­men­ta­tion du matériel graphique. Ceci comprend notamment des cartes, c’est-à-dire les boites d’objets utilisées pour la pré­sen­ta­tion du contenu, et des « chips », qui per­met­tent d’afficher les tags et les contacts.

• Ja­vaS­cript : en ce qui concerne les ap­pli­ca­tions de Ja­vaS­cript, Ma­te­ria­lize est in­dé­nia­ble­ment l’une des meil­leures al­ter­na­tives à Bootstrap. Que vous sou­hai­tiez afficher vos visuels dans un carrousel, ajouter des fenêtres de dialogue in­te­rac­tives, intégrer des menus en accordéon, ou rendre l’interface plus in­té­res­sante grâce à des effets de dé­fi­le­ment parallaxe, tous les snippets Ja­vaS­cript sont dis­po­nibles et prêts à l’emploi. C’est idéal pour créer des in­ter­faces Web con­vi­viales pour l’uti­li­sa­teur, tant sur mobile que sur or­di­na­teur.

Les fichiers du projet Ma­te­ria­lize sont dis­po­nibles sur GitHub, ou té­lé­char­geables sur le site Web ma­te­ria­li­zecss.com. On y trouve également des modèles « Starter » et « Parallax », ainsi que les codes de balisage per­met­tant de ré­fé­ren­cer les fichiers du projet via le content delivery network cdnjs.

Les solutions al­ter­na­tives ont en général beaucoup en commun avec le framework de Twitter : dans tous les cas, le composant central est un système de grille flexible qui permet de créer une interface Web com­pa­tible avec tous les appareils. Bien que les tailles minimales et maximales pré­dé­fi­nies pour chaque type d’appareil varient selon les fra­me­works, le dé­ve­lop­peur dispose toujours d’une large marge de manœuvre pour les adapter. Ceci ne s’applique pas seulement aux grilles mais aussi aux éléments CSS, qui dans certains cas peuvent être intégrés de façon intuitive (ce qui n’est pas toujours possible avec Bootstrap). Il existe aussi des dif­fé­rences dans les systèmes de classes des al­ter­na­tives à Bootstrap, en par­ti­cu­lier avec Semantic IU. À la place des classes CSS ha­bi­tuelles, le framework IU a intégré son nom dans plus de 3000 classes sé­man­tiques qui rendent la pro­gram­ma­tion du code encore plus intuitive. La sim­pli­fi­ca­tion du code permet aussi à plusieurs col­lec­tions d’être com­pa­tibles avec les langages de feuilles de styles Less et Sass. Ceci signifie que l’on peut fa­ci­le­ment per­son­na­li­ser des feuilles de style de son interface Web avant de les convertir en format CSS classique, qui seront cor­rec­te­ment lues et in­ter­pré­tés par le na­vi­ga­teur du visiteur. Seul Pure.css n’utilise pas de pré-pro­ces­seurs CSS, mais le système SMACCS propose une uti­li­sa­tion in­té­res­sante du CSS. Les dif­fé­rentes al­ter­na­tives à Bootstrap ont chacune leurs forces et leurs fai­blesses, ce qui rend difficile le choix d’une solution parfaite pour la pro­gram­ma­tion frontend. Il faut donc baser sa décision sur les besoins spé­ci­fiques de son projet Web, et se poser les questions suivantes :

• Les com­po­sants sont-ils struc­tu­rés de manière at­trac­tive ?

• Le système de grille propose-t-il les options sou­hai­tées ?

• Dans quelle mesure le framework est-il com­pa­tible avec les anciens na­vi­ga­teurs ?

• La gamme de modules CSS et Ja­vaS­cript cor­res­pond-elle à vos attentes ?

• La taille des codes (com­pres­sés et non com­pres­sés) est-elle pro­por­tion­nelle ?

• Avez-vous besoin de marge de manœuvre en ce qui concerne l’adap­ta­tion des codes ? Le cas échéant, quelles pos­si­bi­li­tés offre le framework UI ? 

• Est-ce important pour vous de bé­né­fi­cier du soutien d’une vaste com­mu­nauté ? (dé­ve­lop­pe­ments, ex­ten­sions, modèles, forums, tutoriels, etc.) ?

Lorsque l’on hésite entre plusieurs al­ter­na­tives à Bootstrap, il est conseillé de consulter des manuels en ligne. Les modules y sont souvent présentés avec des exemples de code. On peut aussi consulter les pos­si­bi­li­tés de four­nis­seurs in­di­vi­duels en les essayant grâce à l’outil en ligne Codeply. Cet outil apporte une aide précieuse puisqu’il permet de tester les dif­fé­rents com­po­sants des fra­me­works IU di­rec­te­ment dans le na­vi­ga­teur, sans avoir à té­lé­char­ger le moindre fichier.