Alternatives à Bootstrap : tour d’horizon des meilleurs frameworks 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 satisfaisant, tout en ne perdant jamais de vue l’utilisabilité. En raison des différents navigateurs et des différents appareils que l’on utilise de nos jours pour trouver du contenu sur le Web, les visuels et les éléments techniques que l’on choisit doivent pouvoir fonctionner à travers des plateformes multiples.

Pour ne pas avoir à commencer le développement d’une interface Web à zéro, de nombreux programmeurs utilisent UI-Frameworks (User Interface). Le choix se porte souvent sur celui conçu par Twitter, Bootstrap, dont les composants, optimisés pour la recherche mobile et les navigateurs les plus utilisés, sont facilement adaptables en fonction de ses propres besoins. La conséquence de cette croissance, c’est qu’il existe sur le Net de nombreux sites construits avec les codes standard de Bootstrap, et qu’ils sont tous très similaires pour cette raison. Une autre petite critique à l’égard de Bootstrap est la complexité du framework frontend, largement basé sur CSS et JavaScript : ceci rend les balises HTML plus complètes, et donc le projet Web plus long à charger. Il est possible de télécharger des scripts et des fichiers CSS réduits, qui ne contiennent que les éléments utiles à Bootstrap. Cependant, il est nécessaire de se pencher davantage sur le sujet lorsque l’on choisit cette option. On perd alors en simplicité et gain de temps, qui devraient être permis par l’utilisation du framework. Certains développeurs déconseillent simplement l’utilisation d’un framework UI, c’est pourquoi il peut être sensé d’envisager des alternatives à Bootstrap. Une gageure, compte-tenu du vaste choix disponible.

Nous vous présentons ci-dessous cinq frameworks frontend, qu’il est possible d’utiliser à la place de celui de Twitter, pour développer un frontend Web fonctionnel et complet. Nous présentons également leurs avantages, inconvénients et différences par rapport à Bootstrap, ainsi que l’étendue des différents codes, et pour quel type de développeurs ils sont particulièrement adaptés. Nous verrons enfin comment fonctionne le développement avec chacune des alternatives à Bootstrap.

Le framework modulable de Foundation trouve son origine dans un guide de style que l’agence de design Web ZURB utilisait d’abord exclusivement pour ses clients. Par la suite, ZURB a combiné et publié de nombreux composants HTML, CSS et JavaScript 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 responsive, qui s’adapte automatiquement à la taille des différents visuels et à la résolution des différents terminaux. Outre ce système de grille, Foundation propose les services suivants :

• Diapositives

• Boutons

• Typographie

• Barre de menus et menus

• Conteneurs média

• Classes flottantes intégrées et de visibilité

Foundation, 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 modification 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 JavaScript et de snippets CSS sont quasiment équivalents, Foundation présente moins de modèles, et une compatibilité réduite avec les autres plateformes. Le framework de ZURB surpasse celui de twitter en ce qui concerne le développement individuel de frontends. Le code CSS sous-jacent donne accès à un design compact, qui peut facilement être adapté à des besoins spécifiques. Contrairement à Bootstrap, certaines classes sont directement intégrées sans que l’on ait besoin de les ajouter au préalable. Un autre avantage : ZURB propose différents cours, un soutien personnalisé pour votre projet de frontend, ainsi qu’une version spéciale du framework pour la création de newsletters. Si vous souhaitez utiliser Foundation pour développer votre interface Web, il est possible de télécharger gratuitement soit l’ensemble complet, soit une sélection de composants de votre choix, à partir du site Web.

Yahoo a publié en 2013 Pure.CSS, une structure basique pour le développement de frontends. Il s’agit une bonne alternative à Bootstrap, mais elle peut aussi être utilisée en combinaison avec le framework de Twitter. Il est basé sur le SMACSS (Scalable and Modular Architecture for CSS, soit architecture évolutive et modulable des CSS), un système qui veille à ce que les éléments récurrents (tableaux, boutons ou formulaires) soient séparés des éléments de mise en page de base (police, layout, etc.), et bénéficient de leurs propres codes. Dans le framework de Yahoo, chaque module a un nom de classe par défaut commençant par le préfixe « pure- » pour les modules habituels, auquel s’ajoutent d’autres noms de classe pour des règles spécifiques qui s’appliquent à des sous-modules. Le framework frontend, qui peut être téléchargé en version responsive ou non, contient les six modules suivants. Ils pèsent environ 4 KB lorsqu’ils sont compressés sous forme de fichier .zip (16 KB lorsqu’ils sont décompressés) :

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

• Grids (grids-responsive-min.css): système de grille flexible et responsive

• Forms (forms-min.css/forms-nr-min.css): formulaires

• Buttons (buttons-min.css): différents boutons

• Tables (tables-min.css): tableaux

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

Tous les modules sont construits à partir de la feuille de style open-source Normalize.css, tout comme Bootstrap et de nombreux autres frameworks CSS. Cette feuille de style remplace les styles par défaut des éléments HTML par des styles optimisés et compatibles avec tous les navigateurs. En comparaison avec Bootstrap, le pendant de Yahoo ne contient pas d’applications JavaScript, 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écharger Pure.CSS et de l’héberger soi-même. Le lien actuel vers le CDN et les fichiers téléchargeables se trouvent sur le site officiel purecss.io.

En 2013, le programmeur Jack Lukic a publié son framework pour frontend et développement, sous le nom de Semantic UI. L’objectif central de cet ensemble est de simplifier l’écriture du code HTML grâce à des conventions intuitives et conviviales. Semantic UI contient à cette fin plus de 3000 classes sémantiques en CSS, faciles d’utilisation et conçues pour optimiser le processus de développement. 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 JavaScript élémentaires, l’ensemble de base inclut des polices, le lot PHP Composer, le gestionnaire de paquets Bower, ainsi que le gestionnaire de tâches Gulp.  Les composants individuels sont classés selon ces 6 domaines :

• Globals : définitions de styles basées sur Normalize.css ; typographie et bases

• Elements : composants généraux de frontend, tels que boutons, icônes, conteneurs, etc.

• Collections : contenu structurel, comme les systèmes de grilles, menus, tableaux et formulaires

• Views : éléments interactifs comme les zones de commentaires, les fils d’actualité et les bannières publicitaires

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

• Behaviors : interfaces pour la programmation JavaScript

Pour les débutants, le système de noms de Semantic UI peut être surprenant à première vue, et requiert un temps d’adaptation. Les efforts sont toutefois récompensés puisque le code HTML de votre frontend Web est bien plus facile à lire qu’avec Bootstrap ou des frameworks comparables, qui peuvent être avantageux dans des versions anté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 comparable au framework de Twitter. L’un des inconvénients majeurs de cette alternative à Bootstrap est que de nombreux composants dépendent de JavaScript et ne fonctionnent pas avec d’autres langages de script. Il est possible de télécharger Semantic IU sur la section des téléchargements du site Web officiel, d’intégrer les fichiers sur le Content Delivery Network JSDELIVR via un lien, ou d’accéder à un snippet individuel du framework sur la plateforme GitHub.

Uikit est une solution de programmation open-source. Elle a été développée par l’entreprise YOOtheme, basée à Hambourg, qui jouit d’une grande expertise dans le domaine du développement d’applications 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 composants HTML, CSS, JavaScript dépend de la licence gratuite MIT et peut donc facilement être utilisée et modifiée. Tous les snippets CSS sont disponibles en version Less et en version Sass, afin de pouvoir adapter les modèles de styles aux besoins de programmeurs expérimentés. Il existe plus de 30 modules de cette alternative à Bootstrap, créés sur Normalize.css, tout comme Bootstrap et les exemples de frameworks précédents. C’est la raison pour laquelle les projets Web créés avec Ulkit s’affichent sans problème dans les navigateurs actuels.

Les composants centraux sont divisés selon les six catégories suivantes :

• Defaults : base pour la normalisation des éléments HTML, qui les rend compatibles avec tous les navigateurs, et leur applique des principes stylistiques de base

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

• Navigations : tous les éléments qui aident les visiteurs à utiliser l’interface Web, comme la numérotation des pages et les barres de navigation

• Elements : styles pour les blocs de contenus autonomes, comme les tableaux, les listes et les formulaires

• Common : composants utilisés au sein du contenu, comme les boutons, icônes, badges ou animations

• JavaScript : essentiellement des modules JavaScript pour l‘implémentation des éléments interactifs

Ulkit dispose de plusieurs classes responsives pour adapter le contenu à différentes tailles de présentation. Les points de rupture prédéfinis (par exemple 1200 pixels pour un grand écran ou 479 pixels pour un écran de smartphone) peuvent être adaptés à chaque thème grâce à l’outil de personnalisation en ligne, Customize. Pour éviter des complications avec d’autres snippets de CSS ou des frameworks, toutes les classes sont identifiées par le profil « uk ». Les CSS additionnels et les éléments JavaScript ne sont pas intégrés dans le cœur du framework mais peuvent être ajoutés en option. Ces éléments sont nécessaires pour implémenter des interfaces Web plus complexes si celles-ci sont équipées d’une section administrateur incluant un identifiant, de l’édition HTML et des fichiers à télécharger.

En dépit du grand nombre de fonctions, le poids individuel de chaque fichier ainsi que celui de l’ensemble du framework est étonnamment léger. Il peut être étendu grâce à une documentation très détaillée qui facilite considérablement 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écharger 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électionner les modules à l’avance : il faut les retirer ensuite du dossier décompressé.

Materialize est un framework CSS basé sur le principe du material design, publié en 2015 par Google et utilisé depuis dans la plupart de ses applications. Le concept repose sur des surfaces ressemblant à des cartes, au graphisme minimaliste (« flat design »), mises en lumière grâce à des animations et des ombres. Les effets de profondeur ainsi produits aident l’utilisateur de l’interface Web à appréhender facilement les informations importantes et les éléments interactifs. 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 University en Pennsylvanie. Cette alternative à Bootstrap qui, comme le framework de Twitter, comporte un système de grille à 12 colonnes, contient différents composants CSS et JavaScript, plus de 700 symboles officiels dans une base de données typographiques, ainsi que Roboto, la police standard de Google. Outre les fichiers CSS habituels, disponibles 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 individuel des interfaces Web. Quelle que soit votre sélection, il y a environ 30 éléments disponibles :

• CSS: le composant CSS élémentaire est le système de grille responsive, exactement comme pour Bootstrap et les autres frameworks. Il fournit les bases d’une interface Web capable de fonctionner avec tous les appareils. La grille de Materialize comprend trois tailles d’affichage prédéfinies : moins de 600 pixels pour les appareils mobiles, jusqu’à 992 pixels pour les tablettes, et plus de 992 pixels pour les ordinateurs 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.

• Composants : les composants sont les parties du frontend dont on a besoin pour implémenter les éléments de navigation et les zones interactives. En plus des composants habituels pour la pagination, les formulaires, les menus de navigation ou les icônes, on trouve des modules très importants pour l’implémentation du matériel graphique. Ceci comprend notamment des cartes, c’est-à-dire les boites d’objets utilisées pour la présentation du contenu, et des « chips », qui permettent d’afficher les tags et les contacts.

• JavaScript : en ce qui concerne les applications de JavaScript, Materialize est indéniablement l’une des meilleures alternatives à Bootstrap. Que vous souhaitiez afficher vos visuels dans un carrousel, ajouter des fenêtres de dialogue interactives, intégrer des menus en accordéon, ou rendre l’interface plus intéressante grâce à des effets de défilement parallaxe, tous les snippets JavaScript sont disponibles et prêts à l’emploi. C’est idéal pour créer des interfaces Web conviviales pour l’utilisateur, tant sur mobile que sur ordinateur.

Les fichiers du projet Materialize sont disponibles sur GitHub, ou téléchargeables sur le site Web materializecss.com. On y trouve également des modèles « Starter » et « Parallax », ainsi que les codes de balisage permettant de référencer les fichiers du projet via le content delivery network cdnjs.

Les solutions alternatives 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 compatible avec tous les appareils. Bien que les tailles minimales et maximales prédéfinies pour chaque type d’appareil varient selon les frameworks, le développeur 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 différences dans les systèmes de classes des alternatives à Bootstrap, en particulier avec Semantic IU. À la place des classes CSS habituelles, le framework IU a intégré son nom dans plus de 3000 classes sémantiques qui rendent la programmation du code encore plus intuitive. La simplification du code permet aussi à plusieurs collections d’être compatibles avec les langages de feuilles de styles Less et Sass. Ceci signifie que l’on peut facilement personnaliser des feuilles de style de son interface Web avant de les convertir en format CSS classique, qui seront correctement lues et interprétés par le navigateur du visiteur. Seul Pure.css n’utilise pas de pré-processeurs CSS, mais le système SMACCS propose une utilisation intéressante du CSS. Les différentes alternatives à Bootstrap ont chacune leurs forces et leurs faiblesses, ce qui rend difficile le choix d’une solution parfaite pour la programmation frontend. Il faut donc baser sa décision sur les besoins spécifiques de son projet Web, et se poser les questions suivantes :

• Les composants sont-ils structurés de manière attractive ?

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

• Dans quelle mesure le framework est-il compatible avec les anciens navigateurs ?

• La gamme de modules CSS et JavaScript correspond-elle à vos attentes ?

• La taille des codes (compressés et non compressés) est-elle proportionnelle ?

• Avez-vous besoin de marge de manœuvre en ce qui concerne l’adaptation des codes ? Le cas échéant, quelles possibilités offre le framework UI ? 

• Est-ce important pour vous de bénéficier du soutien d’une vaste communauté ? (développements, extensions, modèles, forums, tutoriels, etc.) ?

Lorsque l’on hésite entre plusieurs alternatives à 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 possibilités de fournisseurs individuels en les essayant grâce à l’outil en ligne Codeply. Cet outil apporte une aide précieuse puisqu’il permet de tester les différents composants des frameworks IU directement dans le navigateur, sans avoir à télécharger le moindre fichier.