Les 5 meilleures alternatives d'amorçage

Bootstrap est omniprésent, mais il n'est pas toujours l'outil le plus adapté. Voici quelques alternatives de choix !

Si vous examinez le code source d'un site web quelconque aujourd'hui, il y a de fortes chances que vous y trouviez Bootstrap. Nous nous sommes tellement habitués à des concepts comme container-fluid, row, col-sm-6, etc., qu'il est difficile d'imaginer une autre façon de développer le front-end. Par conséquent, lorsque nous devons créer un nouveau projet, nous nous tournons instinctivement vers Bootstrap. Cependant, sa popularité ne fait pas de Bootstrap un choix judicieux pour tous les projets et toutes les exigences.

En effet, pour des interfaces très légères, le chargement de l'intégralité du CSS et JS de Bootstrap peut entraîner un gonflement notable.

Cet article vise deux objectifs :

Proposer des alternatives à Bootstrap qui ne lui ressemblent pas directement.
Expliquer pourquoi vous pourriez envisager ces alternatives plutôt que Bootstrap.

Je pense que la partie explication est essentielle, car souvent, les gens ne réalisent même pas qu'ils ont un problème ou qu'ils compliquent leur tâche en choisissant Bootstrap. Pour finir, veuillez noter qu'il ne s'agit absolument pas d'un message anti-Bootstrap. J'apprécie énormément Bootstrap 4 et je l'utilise dès que possible. Mais je suis un développeur indépendant qui doit utiliser la solution la plus populaire ; de plus, je ne suis pas un développeur d'interface utilisateur à part entière, donc je n'ai pas trop de contraintes lors de la création de mes interfaces.

Ceci étant dit, voyons quelles alternatives s'offrent à nous.

Grille Flexbox

Réfléchissez un instant : la raison principale pour laquelle vous avez commencé à utiliser Bootstrap et que vous continuez de l'utiliser est son système de grille. Bien sûr, il a fallu un peu de temps pour s'habituer aux classes row, col-md-6, etc., mais maintenant, il est devenu naturel 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 fastidieux à gérer. Il existe une multitude de classes à mémoriser, que vous travailliez sur des formulaires, la navigation, des boutons, des tableaux ou autre chose. Si vous êtes comme moi, vous ne vous êtes toujours pas familiarisé avec toutes les classes et leur fonctionnement, et vous utilisez souvent Bootstrap uniquement pour la grille, en écrivant vous-même le reste du CSS.

Si c'est votre cas, vous pourriez obtenir de bien meilleurs résultats avec Flexbox Grid.

Flexbox Grid, comme son nom l'indique, est un système de grille basé sur les propriétés CSS Flexbox. Cependant, contrairement à l'utilisation directe du CSS, toute la complexité est bien abstraite, vous permettant de vous concentrer uniquement sur le positionnement des éléments comme vous le souhaitez. Le plus intéressant est que tous les noms de code et de classe sont similaires à ceux que vous utiliseriez dans Bootstrap 4, ce qui signifie que le passage d'un outil à l'autre ne nécessite aucun effort mental. Par exemple, voici à quoi ressemble le code pour "l'espace autour" dans 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 fait que 10,7 Ko, ce qui vous permet d'économiser plusieurs centaines de Ko dans la taille finale du téléchargement. Actuellement, Flexbox Grid est mon préféré car je n'ai pas envie de batailler avec Bootstrap pour le personnaliser entièrement. J'aime commencer avec des éléments vanille et les styliser moi-même, en utilisant Flexbox Grid là où j'en ai besoin.

Apprenez Flexbox ici, en ligne.

PureCSS

Ne serait-il pas agréable que Bootstrap soit divisé en modules et que vous puissiez importer uniquement ceux dont vous avez besoin ?

Et bien, PureCSS a anticipé cela et l'a fait exactement – c'est un ensemble de modules couvrant différents aspects fonctionnels d'un site web. Vous pouvez choisir d'en télécharger un ou tous, et la taille du téléchargement ne dépassera pas 3,7 Ko !

Oui, vous avez bien lu.

Tous les modules, lorsqu'ils sont regroupés et compressés avec gzip, font 3,7 Ko, bien qu'individuellement, ils soient plus volumineux. Le module de grille ne fait que 0,8 Ko, tandis que le module de base fait 1,0 Ko. L'équipe derrière PureCSS affirme qu'il a été entièrement conçu pour les appareils mobiles, et donc chaque ligne de CSS a été soigneusement examinée pour son efficacité avant d'être incluse.

Supposons que vous n'ayez besoin que des modules de grille et de formulaires. Eh bien, téléchargez simplement ces deux modules (avec le module de base), et le tour est joué 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 propres classes, cependant, et le code résultant n'est pas identique à celui de 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 possède son propre système de grille qui spécifie la largeur qu'une colonne doit occuper. Ainsi, pure-u-lg-1-4 signifie que cet élément doit occuper 1/4 ou 25 % de la largeur disponible sur les grands écrans. Plusieurs largeurs de 1/5 sont également disponibles.

Dans l'ensemble, PureCSS est un outil CSS (framework ?) libérateur et étonnant que vous pouvez choisir selon vos besoins. Cela dit, il nécessite une certaine adaptation et 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, il n'est pas très différent de Bootstrap.

Zimit

Le framework Zimit est un peu un cas à part dans cette liste. Oui, c'est un framework pour la construction d'interfaces utilisateur, mais il est destiné à des types d'interface utilisateur particuliers : les maquettes.

Il y a des moments où vous devez développer le front-end pour montrer le fonctionnement du produit. L'idéal serait bien sûr de faire appel à un concepteur/développeur d'interface utilisateur et de créer les maquettes sur l'un des outils de wireframing avancés (Moqups, Balsamiq, 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 réalité n'est pas idéale, et souvent vous êtes seul aux commandes et vous devez tout gérer et faire le travail. Dans ces moments-là, vous recherchez un framework qui :

Permette de coder en HTML/CSS.
Soit léger.
Possède une vaste collection de composants fondamentaux.
Ait un langage de style décent et cohérent.
Si possible, se rapproche du ton "grisâtre" de la conception filaire.
Soit facile à apprendre.
Possède un préprocesseur CSS intégré.

Zimit coche toutes ces cases. Il ne fait que 84 Ko et offre un large éventail de composants parmi lesquels choisir. Voici quelques exemples que j'ai trouvés très intéressants, car les coder soi-même prendrait beaucoup de temps.

Arborescence

Fil d'Ariane

Onglets

Il y a encore beaucoup de choses à explorer. Consultez-les ici.

Voyons à quoi ressemble le code. Voici comment utiliser 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" ici signifie "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 framework complet et simple pour développer rapidement des prototypes d'interface utilisateur réactifs et esthétiques. Il est préférable à 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, rigide.

HTML KickStart

Dans la plupart des projets que vous construisez, la vitesse est essentielle. Le principal frein à la rapidité du développement web est la partie front-end, et le principal "retard" dans le développement front-end est la nécessité de coder des composants interactifs élégants. Étant donné qu'un composant peut se comporter de différentes 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.

HTML KickStart offre une alternative.

En résumé, il s'agit d'une collection de composants vraiment élégants que vous pouvez simplement intégrer à vos projets et réduire considérablement le temps de développement. Voici quelques composants sympas que j'ai trouvés :

Menu déroulant

Boutons

Onglets (centrés et avec icônes)

Materialize

Si vous appréciez Bootstrap pour sa solution prête à l'emploi pour tous les problèmes courants de conception web, mais que vous êtes fan du style Material Design, vous devriez essayer Materialize.

Materialize est globalement similaire à Bootstrap – un système de grille à 12 points, des décalages et des composants familiers tels que des formulaires, des cartes, etc. Cependant, il possède certains atouts qui peuvent séduire un grand nombre d'utilisateurs.

Push/Pull

La fonction push/pull de Materialize 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>

Cela se traduit par ce qui suit :

Vous remarquerez que les colonnes ont changé de place, ce qui est impossible dans le CSS traditionnel basé sur Bootstrap.

JavaScript Bonus

De nombreuses fonctionnalités et effets JavaScript sont fournis avec Materialize. 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 entièrement avec des mots, alors rendez-vous sur https://materializecss.com/feature-discovery.html pour voir ce que je veux dire.

Dans l'ensemble, Materialize est une excellente alternative à Bootstrap, ou pour ceux qui souhaitent 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 qui a montré comment cela pouvait être fait. Mais si Bootstrap fait l'affaire la plupart du temps, il ne suffit pas toujours à répondre à toutes les exigences. Si vous pensez que Bootstrap vous limite et que vos besoins sont particuliers, l'une des options présentées ici vous sera utile. 🙂