• Assurez la sécurité des applications de la bonne manière! Détectez, protégez, surveillez, accélérez et plus encore…
  • 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 comme 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 atteignons Bootstrap inconsciemment. 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:

    1. Fournir des alternatives en direct non-Bootstrap à Bootstrap
    2. 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 n' 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 frontaux.

    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 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 dans Bootstrap est un peu une corvée à travailler. Il y a des tonnes de classes à retenir, que vous utilisiez 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 la commutation 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:

    <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.

    À Propos 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.

    Voir Tout 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 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 produit 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. Le moyen idéal pour ce 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 (Moqups, Blasmic, etc., viennent à l'esprit). Les pages seraient parfaites au pixel près, le jeu 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 intéressants, car les coder vous-même prendra beaucoup de temps.

    Arborescence

    Miettes de pain

    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 framework complet et facile 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.

    Coup d'envoi HTML

    Dans la plupart des projets que vous construisez, la vitesse est essentielle. Le plus grand obstacle à la vitesse dans le développement Web est la partie frontale, et le plus grand «retard» dans le développement front-end 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.

    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)

    Matérialiser

    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 le nouveau standard 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 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 de la page sur un événement (par exemple, appuyez sur un bouton) pour attirer l'attention de l'utilisateur sur cet élément. Il est difficile de le décrire complètement 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 mobile d'abord» et a montré comment cela pouvait être fait. Mais si Bootstrap fait le travail la plupart du temps, il ne suffit pas toujours de faire le travail. Si vous pensez que Bootstrap vous restreint et que vos besoins sont particuliers, l'une des options répertoriées ici vous aidera. 🙂