Top 8 des alternatives Bootstrap
By
Ankush
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.
In fact, for really lean frontends, loading all the 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
I think the explanation part is really important because in most cases, people don’t even realize they have a problem or that they’re making their job harder by picking up Bootstrap. Finally, please note that this is 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.
Fléchirbox Grille
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., classes, but now it’s second nature to think of a layout in terms of rows, columns, offsets, etc.
And if you’re honest with yourself, you’ll find that everything else in Bootstrap is a bit of a chore to work with.
There are tons of classes to remember, whether you’re doing forms, navigation, buttons, tables, or anything else. If you’re like me, you’ve still not gotten used to all the classes and what they do, and you often use Bootstrap only for the grid and write all the other CSS yourself.
Si oui, vous pourriez faire beaucoup mieux avec Fléchirbox Grille.
Le Flexbox Grid, as the name suggests, is a grid system based on the CSS Fléchirbox properties. However, unlike the CSS technique, all the complexity is nicely abstractépargné pour que vous vous concentriez uniquement sur le placement des éléments comme vous le souhaitez.
The best part is that all the code and class names mimic what you’d want in Bootstrap 4, which means switching between these two tools requires zero mental friction. For instance, here’s what code for the “space around” looks like in the Flexbox La grille:
<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>The minified CSS file for this grid system is a mere 10.7 KB saving you several hundred KB in the final download size. These days the Flexbox Grid is my favorite as I don’t want to fight Bootstrap to customize it fully. I like to start with vanilla elements and style them myself, using the Flexbox Grid whereveuh, j'en ai besoin.
Apprendre Fléchirbox here, online.
PureCSS
Ne serait-il pas nice if Bootstrap was split into modules and you could import only the module you needed?
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 the modules when bundled together and gzipped are 3.7 KB, although individually they amount to more. The grid module is just 0.8 KB, while the Base module is 1.0 KB. The team behind PureCSS says that it was built entirely with mobile devices in mind, and so every line of CSS was carefully scrutinized for efficiency before being included.
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
L’ENTREPRISE 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.
There are times when you have to develop the front-end to show the functioning of the product. The ideal way to do this, of course, would be to get a UI designer/developer involved and create the mockups on one of the advanced wireframing tools (Moqups, Blasmic, etc., come to mind).
Les pages seraient parfaites au pixel près, la palette de couleurs élégante et bien choisie, et les pages seraient ouvertes à la participation, revopinions, 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
- Has some CSS preprocessou intégré
Zimit checks all these boxes. It’s just 84 KB in size and has a wide range of components to choose from. Here are some examples that I found really appealing, as coding them on your own will take a lot of time.
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 creates utility classes instead of pre-defined component styles.
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éerate a simple form that allows users to opt-in as follow;
<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.
- Opinionated and 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 : The JIT feature offers an efficient and faster way to generate the final CSS code. With this feature, Tailwind only generates styles that are used in your HTML code. Basically, whenever you load a web page, your browser will send a request to the JIT server, which will generate an optimized CSS code for that specific file and send it back to the browser.
Tailwind CSS is suitable if you are looking for a framework with less specificity, you want to create custom designs and still enjoy flexibility.
Bulma
Bulma is an open-source UI framework based on Flexbox. The framework has a variety of ready-to-use frontend components that you can combine to create scieally attractinterfaces vivantes et 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 démontrerate how it works, we will create several tabs using this 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.
- This framework also offers much flexibility since it is based on 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 is a lightweight and modular framework for developing powerful web interfaces. You can use this framework with CSS, Less, and Sass. This will be the ideal Bootstrap alternative if you want a platform with solid HTML, CSS, and JavaScript components.
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 : The components from UIkit are self-sufficient. Thus, you can include only what you need in your app. Such an approach reduces the size of your JavaScript and CSS files.
- 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 Visual Studio Code, Sublime Text 3, ou Atom, 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
Coup d'envoi HTML
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.
Put simply; it’s a collection of really sleek components that you can just drop into your projects and cut down the development time drasticallyVoici quelques céréales complètes courantes nice components I found:
Déroulante
Boutons
Onglets (centrés et avec des icônes)
Materialiser
If you like Bootstrap for the fact that it has a readymade solution for all common web design problems, but you’re a fan of Material design style, you should try out Materialiser.
Materialize is mostly just like Bootstrap — 12-point grid system, offsets, and familiar components like forms, cards, etc. However, it does have certain goodies that can appeal to many.
Pousser tirer
The push/pull feature of Materialize CSS allows you to reorder columns. This is reminiscent of the new CSS Grid standard, where the layout is different from the element order.
<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
There are quite a few JavaScript features and effects that ship with Materialize. Tooltips, Toasts (Android-like ephemeral notifications), Parallex, Pushpin, etc., are some of them.
Un really amazing effect I liked is FeatureDiscovery, which basically allows you to highlight an element on the page on some event (say, button press) to bring the user’s attention to that element. It’s hard to describe it in words fully, so head over to https://materializecss.com/feature-discovery.html to see what I mean.
All in all, Materialize is a great alternative to Bootstrap or for those looking to adopt a full-featured Material CSS framework.
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.
