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.
Pourquoi Bootstrap n’est pas toujours la bonne solution
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.
Présentation rapide des meilleures alternatives à Bootstrap
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.
ZURB Foundation
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é
Avantages | Inconvénients |
---|---|
Programme de code facile | Seulement quelques modèles disponibles |
Classes CSS implémentées | Problèmes avec les anciennes versions d’Internet explorer |
Assistance disponible | Pas de compatibilité avec Less |
Pure.CSS
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
Avantages | Inconvénients |
---|---|
Design minimaliste | Très peu de modèles disponibles |
Compatible avec différents navigateurs | Pas de snippets JavaScript |
Ne nécessite pas un auto-hébergement | Pas compatible avec Less/Sass |
Architecture SMACSS |
Semantic UI
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
Avantages | Inconvénients |
---|---|
Plus de 3000 classes sémantiques CSS | Très complexe |
Compatible avec Sass et Less | Une large partie des composants CSS fonctionne seulement avec JavaScript |
Excellentes possibilités d’intégration (React, Ember, Meteor, PHP, Gulp) |
UIkit
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 :
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é.
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
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é.
Avantages | Inconvénients |
---|---|
Composants additionnels pour interfaces Web complexes | Peu intuitif |
Compatible avec Sass et Less | |
Outil de personnalisation des thèmes |
Materialize
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.
Avantages | Inconvénients |
---|---|
Construit à partir du material design de Google | Peu de modèles et d’extensions disponibles |
Large choix de composants récents | Compatible seulement avec les versions les plus récentes des navigateurs |
Version Sass disponible | Spécifications graphiques très strictes |
Comment trouver la bonne alternative à Bootstrap : récapitulatif
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.) ?