Bootstrap est partout, mais ce n'est pas toujours le bon outil pour le travail. Voici quelques bonnes alternatives!
Si vous vérifiez le code source du front-end d'un site Web au hasard ces jours-ci, il y a de fortes chances que vous trouviez Bootstrap en dessous.
Nous sommes tous devenus tellement habitués à des concepts tels que container-fluid, row, col-sm-6, etc., qu'il est difficile d'imaginer qu'un autre style de développement frontal soit même possible. Et donc, lorsque nous devons construire le prochain projet, nous recherchons inconsciemment Bootstrap. Cela dit, la popularité ne fait pas de Bootstrap un bon choix pour tous les projets et besoins.
En fait, pour des frontends vraiment allégés, charger tous les CSS d'amorçage et JS peut causer des ballonnements importants.
Cet article a deux objectifs:
- Fournir des alternatives en direct non-Bootstrap à Bootstrap
- Expliquez pourquoi vous voudrez peut-être envisager ces alternatives par rapport à Bootstrap
Je pense que la partie explication est vraiment importante car dans la plupart des cas, les gens ne se rendent même pas compte qu'ils ont un problème ou qu'ils compliquent leur travail en prenant Bootstrap. Enfin, veuillez noter que c'est pas un post anti-Bootstrap par tous les moyens.
J'adore Bootstrap 4 et je l'utilise chaque fois que je le peux. Mais, alors, je suis un développeur individuel qui doit penser à utiliser la solution la plus populaire ; De plus, je ne suis pas un développeur d'interface utilisateur en soi, donc je ne m'inquiète pas de trop de choses lors de la création de mes interfaces.
Et avec cela, regardons quelles alternatives nous avons.
Flexbox Grid
Pensez-y une minute: la principale raison pour laquelle vous avez commencé à utiliser Bootstrap et que vous l'utilisez toujours est son système de grille. Bien sûr, il a fallu un certain temps pour s'habituer à row, col-md-6, etc., des classes, mais maintenant c'est une seconde nature de penser une mise en page en termes de lignes, de colonnes, de décalages, etc.
Et si vous êtes honnête avec vous-même, vous constaterez que tout le reste de Bootstrap est un peu une corvée à gérer.
Il y a des tonnes de classes à retenir, que vous fassiez des formulaires, de la navigation, des boutons, des tableaux ou autre chose. Si vous êtes comme moi, vous ne vous êtes toujours pas habitué à toutes les classes et à ce qu'elles font, et vous utilisez souvent Bootstrap uniquement pour la grille et écrivez vous-même tous les autres CSS.
Si oui, vous pourriez faire beaucoup mieux avec Grille Flexbox.
La Flexbox Grid, comme son nom l'indique, est un système de grille basé sur le CSS Flexbox propriétés. Cependant, contrairement à la technique CSS, toute la complexité est bien abstraite afin que vous vous concentriez uniquement sur le placement des éléments comme vous le souhaitez.
La meilleure partie est que tous les noms de code et de classe imitent ce que vous voudriez dans Bootstrap 4, ce qui signifie que basculer entre ces deux outils ne nécessite aucune friction mentale. Par exemple, voici à quoi ressemble le code pour "l'espace autour" dans la Flexbox Grid :
<div class="row around-xs">
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
</div>Le fichier CSS minifié pour ce système de grille ne représente que 10.7 Ko, ce qui vous permet d'économiser plusieurs centaines de Ko dans la taille de téléchargement finale. De nos jours, la Flexbox Grid est ma préférée car je ne veux pas me battre contre Bootstrap pour la personnaliser complètement. J'aime commencer avec des éléments vanille et les styliser moi-même, en utilisant la Flexbox Grid partout où j'en ai besoin.
Apprendre Flexbox ici, en ligne.
PureCSS
Ne serait-il pas agréable que Bootstrap soit divisé en modules et que vous ne puissiez importer que le module dont vous avez besoin?
Eh bien, PureCSS est allé de l'avant et fait exactement cela - c'est un ensemble de modules couvrant différents domaines fonctionnels d'un site Web. Vous pouvez choisir d'en télécharger un ou tous, et pourtant la taille du téléchargement ne dépassera pas 3.7 Ko!
Oui, tu l'as bien lu.
Tous les modules lorsqu'ils sont regroupés et gzippés pèsent 3.7 Ko, bien qu'individuellement, ils représentent plus. Le module de grille ne fait que 0.8 Ko, tandis que le module de base est de 1.0 Ko. L'équipe derrière PureCSS dit qu'il a été entièrement construit avec les appareils mobiles à l'esprit, et ainsi chaque ligne de CSS a été soigneusement examinée pour son efficacité avant d'être incluse.
Disons que vous n'avez besoin que du module de grille et de formulaires. Eh bien, téléchargez simplement ces deux (avec le module de base), et vous le feriez en moins de 3.4 Ko! Inutile d'inclure le CSS des modules Buttons, Tables et Menus si vous n'allez pas les utiliser.
PureCSS a ses classes, cependant, et le code qui en résulte n'imite pas le Bootstrap auquel vous pourriez être très habitué:
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Lorem Ipsum</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Dolor Sit Amet</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Proident laborum</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Praesent consectetur</h3>
</div>
</div>
</div>Vous remarquerez qu'il n'y a plus de grille à 12 colonnes. PureCSS a son système de grille qui spécifie la largeur qu'une colonne doit prendre. Alors, pure-u-lg-1-4 signifie que cet élément doit occuper 1/4 ou 25% de la largeur disponible sur les grands écrans. Des largeurs multiples de 1/5 sont également disponibles.
Dans l'ensemble, PureCSS est un outil CSS libérateur et étonnant (cadre?) que vous pouvez choisir selon vos besoins. Cela dit, cela s'accompagne d'une bonne dose d'adhésion et d'une courbe d'apprentissage, car vous devez apprendre une nouvelle façon (légèrement différente) de faire les choses.
PureCSS a également ses propres classes et son style par défaut, donc en cela, ce n'est pas trop différent de Bootstrap.
Zimit
Le Zimit framework est une sorte de bizarre dans cette liste. Oui, c'est un cadre pour créer des interfaces utilisateur, mais il est destiné à des types particuliers d'interface utilisateur: les maquettes.
Il y a des moments où vous devez développer le front-end pour montrer le fonctionnement du produit. La façon idéale de le faire, bien sûr, serait d'impliquer un concepteur/développeur d'interface utilisateur et de créer les maquettes sur l'un des outils de wireframing avancés (Moqups, Blasmic, etc., me viennent à l'esprit).
Les pages seraient parfaites au pixel près, la palette de couleurs élégante et bien choisie, et les pages seraient ouvertes à la participation, aux critiques, aux commentaires, etc.
Mais la vraie vie n'est pas idéale, et souvent vous êtes le seul homme au travail et devez porter tous les chapeaux et faire le travail. À ces moments-là, vous voulez un cadre qui:
- Vous permet de coder en HTML / CSS
- Est léger
- Possède une vaste collection de composants fondamentaux
- A un langage de style décent et cohérent
- Si possible, ressemble au ton «grisâtre» de la conception filaire
- Est facile à apprendre
- A un préprocesseur CSS intégré
Zimit coche toutes ces cases. Il ne fait que 84 Ko et propose un large éventail de composants. Voici quelques exemples que j'ai trouvés vraiment intéressants, car les coder vous-même prendra beaucoup de temps.
Arborescence
Navigation
Tabs
Il y a beaucoup d'autres goodies à explorer. Vérifie-les ici.
Regardons à quoi ressemble le code. Voici comment vous utiliseriez le système de grille dans Zimit:
<div class="row">
<div class="c12">
<div class="row">
<div class="c4">4 columns</div>
<div class="c4">4 columns</div>
</div>
<div class="row">
<div class="c4">4 columns</div>
<div class="c4">4 columns</div>
</div>
</div>
</div>Le «c» signifie ici «colonne», donc «c4» signifie une colonne qui s'étend sur quatre unités (la grille étant de taille 12, tout comme celle de Bootstrap). Très similaire à Bootstrap, et très intuitif, à mon avis.
Dans l'ensemble, Zimit est un cadre complet et simple pour développer des prototypes d'interface utilisateur qui sont réactifs et qui ont l'air bien rapidement. C'est mieux que Bootstrap (en ce qui concerne le prototypage) car Bootstrap est un téléchargement beaucoup plus volumineux et la conception qui en résulte est, eh bien, collante.
Tailwind
Tailwind CSS crée des classes utilitaires au lieu de styles de composants prédéfinis.
Ce cadre permet aux développeurs d'utiliser des classes utilitaires pour contrôler les ombres, la typographie, la mise en page, l'espacement, etc., en créant des conceptions de composants personnalisées sur des fichiers HTML sans écrire de code.
Vous pouvez créer un formulaire simple qui permet aux utilisateurs de s'inscrire comme suit ;
<div>
<form class="m-4 flex">
<input class="rounded-l-lg p-4 border-t mr-0 border-b border-l text-gray-800 border-gray-200 bg-white" placeholder="email address"/>
<button class="px-8 rounded-r-lg bg-green-400 text-gray-800 font-bold p-4 uppercase border-yellow-500 border-t border-b border-r">Subscribe</button>
</form>
</div>
Vous pouvez personnaliser différentes choses telles que la couleur du texte, la couleur d'arrière-plan et la taille de la bordure en fonction de vos besoins.
Pourquoi Tailwind CSS ?
- Faible spécificité : Les sélecteurs de Tailwind sont moins spécifiques, ce qui les rend moins susceptibles de remplacer ou d'entrer en conflit avec d'autres styles. Vous pouvez ainsi écrire moins de code lorsque vous utilisez les classes utilitaires de Tailwind tout en produisant du code maintenable.
- Opiniâtre et flexible : Tailwind est conçu pour trouver un équilibre entre un cadre personnalisable et flexible. Ce cadre recommande d'utiliser une palette de couleurs, une échelle d'espacement et une typographie cohérentes. Cependant, vous pouvez toujours personnaliser certaines valeurs par défaut en fonction de vos besoins.
- Just-In-Time (JIT) améliore le temps de construction : La fonctionnalité JIT offre un moyen efficace et plus rapide de générer le code CSS final. Avec cette fonctionnalité, Tailwind ne génère que les styles utilisés dans votre code HTML. Fondamentalement, chaque fois que vous chargez une page Web, votre navigateur enverra une demande au serveur JIT, qui générera un code CSS optimisé pour ce fichier spécifique et le renverra au navigateur.
Tailwind CSS convient si vous recherchez un cadre moins spécifique, vous souhaitez créer des conceptions personnalisées tout en bénéficiant de flexibilité.
Bulma
Bulma est un framework d'interface utilisateur open source basé sur Flexbox. Le framework dispose d'une variété de composants frontaux prêts à l'emploi que vous pouvez combiner pour créer visuellement àtractive et des interfaces réactives.
La facilité de configuration est l'une des raisons pour lesquelles Bulma gagne en popularité parmi les développeurs d'interface utilisateur.
Pour montrer comment cela fonctionne, nous allons créer plusieurs onglets à l'aide de ce code ;
<div class="tabs">
<ul>
<li class="is-active"><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
</div>La page rendue apparaîtra comme suit ;
Vous pouvez continuer et personnaliser les onglets comme bon vous semble. Par exemple, vous pouvez changer les liens actifs en inactifs, centrer les onglets, modifier le texte des onglets, etc.
Pourquoi Bulma ?
- Bulma dispose d'un système de grille à 12 colonnes, vous permettant de diviser votre page en colonnes de largeur égale. La beauté est que ces grilles s'ajustent automatiquement en fonction de la taille de l'écran.
- Si vous avez hâte de personnaliser votre application, Bulma est parfait puisqu'il est livré avec quelques défauts.
- Ce framework offre également beaucoup de flexibilité puisqu'il est basé sur Flexbox.
- Bulma est léger, car il utilise un minimum de JavaScript, ce qui donne des applications plus petites.
Bulma convient aux développeurs à la recherche d'un cadre d'interface utilisateur simple mais puissant. La touche moderne des composants de Bulma convient aux concepteurs qui ne souhaitent pas utiliser des conceptions Bootstrap génériques et à l'ancienne.
UIkit
UIkit est un cadre léger et modulaire pour développer des interfaces Web puissantes. Vous pouvez utiliser ce framework avec CSS, Less et Sass. Ce sera l'alternative Bootstrap idéale si vous voulez une plate-forme avec des composants HTML, CSS et JavaScript solides.
Pour utiliser UIkit dans votre code, incluez son lien CDN dans le <head> section. Vous pouvez également compiler le code source depuis GitHub.
Une fois l'installation terminée, vous pouvez commencer à utiliser divers composants. Par exemple, vous pouvez ajouter un uk-button composant comme suit ;
<button className="uk-button uk-button-primary">My Button</button>
Pourquoi UIkit
- Architecture modulaire : Les composants de UIkit sont autosuffisants. Ainsi, vous pouvez inclure uniquement ce dont vous avez besoin dans votre application. Une telle approche réduit la taille de vos fichiers JavaScript et CSS.
- Plugins JavaScript intégrés : Vous pouvez étendre les fonctionnalités d'UIkit grâce à ses plugins JavaScript, tels que les onglets, les modaux et les curseurs.
- Personnalisation: La disponibilité des variables Sass et des mixins donne plus de place à la personnalisation. Vous pouvez ainsi proposer des conceptions uniques qui correspondent aux besoins de votre application.
- Outils d'auto-complétion UIkit pour votre éditeur : Vous pouvez ajouter des plugins UIkit ou des extraits de code à votre éditeur de code préféré, tels que Code Visual Studio, Sublime Text 3, ou Atome, et obtenez une aide pour générer des classes UIkit et le balisage.
UIkit sera une option parfaite pour les développeurs à la recherche d'un design moderne et distinct. UIkit autocomplete pour votre éditeur
HTML KickStart
Dans la plupart des projets que vous construisez, la vitesse est essentielle. Le plus grand obstacle à la rapidité du développement Web est la partie frontale, et le plus grand "retard" dans le développement frontal est la nécessité de coder des composants interactifs élégants.
Étant donné qu'un composant peut se comporter de nombreuses manières et qu'il existe de nombreuses tailles d'écran à gérer, le codage et la gestion des composants peuvent devenir un cauchemar pour le développeur.
Coup d'envoi HTML offre une alternative.
Mettre tout simplement; c'est une collection de composants vraiment élégants que vous pouvez simplement insérer dans vos projets et réduire considérablement le temps de développement. Voici quelques jolis composants que j'ai trouvés:
Déroulante
Boutons
Onglets (centrés et avec des icônes)
Materialize
Si vous aimez Bootstrap pour le fait qu'il propose une solution prête à l'emploi pour tous les problèmes de conception Web courants, mais que vous êtes un fan du style de conception matérielle, vous devriez essayer Matérialiser.
Materialise est principalement comme Bootstrap - système de grille à 12 points, décalages et composants familiers comme les formulaires, les cartes, etc. Cependant, il contient certains avantages qui peuvent plaire à beaucoup.
Pousser tirer
La fonction push/pull de Materialise CSS vous permet de réorganiser les colonnes. Cela rappelle la nouvelle norme CSS Grid, où la mise en page est différente de l'ordre des éléments.
<div class="row">
<div class="col s7 push-s5"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
<div class="col s5 pull-s7"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span></div>
</div>Il en résulte ce qui suit:
Vous remarquerez que les colonnes ont changé de place, ce qui est peut-être impossible dans le CSS traditionnel basé sur Bootstrap.
Goodies JavaScript
Il existe de nombreuses fonctionnalités et effets JavaScript fournis avec Materialise. Les infobulles, les toasts (notifications éphémères de type Android), Parallex, Pushpin, etc., en font partie.
Un effet vraiment étonnant que j'ai aimé est FeatureDiscovery, qui vous permet essentiellement de mettre en surbrillance un élément sur la page lors d'un événement (par exemple, appuyer sur un bouton) pour attirer l'attention de l'utilisateur sur cet élément. Il est difficile de le décrire pleinement avec des mots, alors rendez-vous sur https://materializecss.com/feature-discovery.html pour voir ce que je veux dire.
Dans l'ensemble, Materialise est une excellente alternative à Bootstrap ou pour ceux qui cherchent à adopter un framework CSS Material complet.
Conclusion
Bootstrap est synonyme de design réactif. C'est Bootstrap qui a popularisé le terme « mobile-first design » et montré comment cela pouvait être fait. Mais alors que Bootstrap fait le travail la plupart du temps, il ne suffit pas toujours de faire le travail.
Si vous pensez que Bootstrap vous limite et que vos besoins sont particuliers, l'une des options répertoriées ici vous aidera.
Vous pouvez également lire comment ajouter Bootstrap à Angular.
