Top 5 des alternatives Bootstrap

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 conteneur-fluide, ligne, col-sm-6, etc., qu’il est difficile d’imaginer qu’un autre style de développement frontal soit même possible. Et donc quand nous devons construire le prochain projet, nous atteignons inconsciemment Bootstrap. Cela dit, la popularité ne fait pas de Bootstrap une solution adaptée à tous les projets et besoins.

En fait, pour les frontaux vraiment allégés, le chargement de tous les Bootstrap CSS et JS peut provoquer des ballonnements majeurs.

Cet article a deux objectifs:

  1. Fournir des alternatives live non Bootstrap à Bootstrap
  2. Expliquez pourquoi vous pourriez envisager ces alternatives par rapport à Bootstrap

Je pense que la partie explication est vraiment importante parce que dans la plupart des cas, les gens ne réalisent même pas qu’ils ont un problème ou qu’ils rendent leur travail plus difficile en choisissant Bootstrap. Enfin, veuillez noter qu’il ne s’agit en aucun cas d’un article anti-Bootstrap. 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; aussi, 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 construction de mes front-ends.

Et avec cela, regardons quelles alternatives nous avons.

Grille Flexbox

Pensez-y une minute: la principale raison pour laquelle vous avez commencé à utiliser Bootstrap et l’utilisez toujours est son système de grille. Bien sûr, il a fallu un certain temps pour s’habituer aux classes row, col-md-6, etc., 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 dans Bootstrap est un peu une corvée avec laquelle travailler. 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 n’utilisez souvent Bootstrap que 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, de sorte que vous vous concentrez 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 voulez dans Bootstrap 4, ce qui signifie que le basculement entre ces deux outils ne nécessite aucune friction mentale. Par exemple, voici à quoi ressemble le code de «l’espace autour» dans la grille Flexbox:

environ

environ

environ

Le fichier CSS réduit 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. Ces jours-ci, la Flexbox Grid est mon préféré car je ne veux pas lutter contre Bootstrap pour le personnaliser entièrement. J’aime commencer par les éléments vanille et les styliser moi-même, en utilisant la Flexbox Grid partout où je dois.

Apprendre Flexbox ici, en ligne.

PureCSS

Ce ne serait pas bien si Bootstrap était divisé en modules et que vous ne pouviez importer que le module dont vous aviez besoin?

bien, PureCSS est allé de l’avant et a 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 compressés sont de 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 des appareils mobiles à l’esprit, et donc chaque ligne de CSS a été soigneusement examinée pour son efficacité avant d’être incluse.

Supposons donc que vous n’ayez besoin que du module grille et formulaires. Eh bien, il vous suffit de télécharger ces deux (avec le module de base), et vous auriez terminé en moins de 3,4 Ko! Pas besoin d’inclure le CSS des modules Boutons, Tableaux et Menus si vous ne les utilisez pas.

PureCSS a ses classes, cependant, et le code résultant ne reproduit pas le Bootstrap auquel vous pourriez être habitué:

Lorem Ipsum

Dolor Sit Amet

Proident laborum

Praesent consectetur

Vous remarquerez qu’il n’y a plus de grille à 12 colonnes. PureCSS a son système de grille qui spécifie la largeur d’une colonne. Ainsi, pure-u-lg-1-4 signifie que cet élément devrait prendre 1/4 ou 25% de la largeur disponible sur les grands écrans. Des largeurs en multiples de 1/5 sont également disponibles.

Dans l’ensemble, PureCSS est un outil CSS libérateur et étonnant (framework?) Que vous pouvez choisir selon vos besoins. Cela dit, il 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 style par défaut, donc en ce sens, il n’est pas trop différent de Bootstrap.

Zimit

le Zimit cadre est une sorte de bizarre dans cette liste. Oui, c’est un cadre pour créer des interfaces utilisateur, mais il vise 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 avancés de wireframing (Moqups, Blasmic, etc., pensez à). Les pages seraient parfaites en pixels, le schéma de couleurs élégant et bien choisi, 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 attrayants, car les coder vous-même prendra beaucoup de temps.

Vue arborescente

Miette de pain

Onglets

Il y a beaucoup plus de goodies à explorer. Vérifie-les ici.

Voyons à quoi ressemble le code. Voici comment vous utiliseriez le système de grille dans Zimit:

4 colonnes
4 colonnes

4 colonnes
4 colonnes

Le «c» signifie ici «colonne», donc «c4» signifie une colonne qui s’étend sur quatre unités (la grille étant de 12 tailles, tout comme celle de Bootstrap). Très similaire à Bootstrap, et très intuitif, à mon avis.

Dans l’ensemble, Zimit est un cadre complet et facile pour développer des prototypes d’interface utilisateur qui sont réactifs et bien paraître 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 bien collante.

HTML KickStart

Dans la plupart des projets que vous construisez, la vitesse est essentielle. Le plus grand obstacle à l’accélération du développement Web est la partie frontale, et le plus grand «delayer» dans le développement frontal est la nécessité de coder des composants interactifs élégants. Puisqu’il existe de nombreuses façons dont un composant peut se comporter, 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.

HTML KickStart offre une alternative.

Mettre tout simplement; c’est une collection de composants vraiment élégants que vous pouvez simplement déposer dans vos projets et réduire considérablement le temps de développement. Voici quelques jolis composants que j’ai trouvés:

Menu déroulant

Boutons

Onglets (centrés et avec des icônes)

Se concrétiser

Si vous aimez Bootstrap pour le fait qu’il a 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 de matériaux, vous devriez essayer Se concrétiser.

Materialise est principalement semblable à Bootstrap – système de grille à 12 points, décalages et composants familiers comme les formulaires, les cartes, etc. Cependant, il a certains avantages qui peuvent plaire à de nombreux.

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 disposition est différente de l’ordre des éléments.

Ce div fait 7 colonnes de large sur poussé vers la droite de 5 colonnes.
5 colonnes de large tirées vers la gauche par 7 colonnes.

Cela se traduit par 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

De nombreuses fonctionnalités et effets JavaScript sont fournis avec Materialise. Les info-bulles, 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 évidence un élément sur la page 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 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 «conception avant tout mobile» et a montré comment cela pouvait être fait. Mais alors que Bootstrap fait le travail la plupart du temps, il ne suffit pas toujours de le faire. Si vous pensez que Bootstrap vous restreint et que vos besoins sont spéciaux, l’une des options répertoriées ici vous aidera. ��

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map