16 meilleurs frameworks/bibliothèques CSS pour les développeurs frontaux

J’ai entendu un jour un développeur front-end dire en plaisantant : “La NASA a fait atterrir des robots sur Mars, et nous sommes encore en train de nous battre pour centrer nos divs ! Et je me sens mal à l’aise car cette blague contient une bonne part de vérité.

Faire quelque chose qui semble aussi facile et relever du bon sens que centrer une boîte dans une boîte est incroyablement difficile à réaliser en CSS. À moins que vous ne l’ayez déjà fait. Et que vous ayez sauvegardé l’extrait de code quelque part. Et même si vous parvenez à le faire, il y a toujours la crainte de le voir se casser la figure sur un navigateur stupide quelque part !

Le langage CSS occupe la première place des “maux nécessaires du web”, avec JavaScript. Il s’agit d’une norme qui a évolué au hasard, qui a été interprétée différemment par les différents fabricants de navigateurs et qui est aujourd’hui tellement pleine de contradictions que personne n’ose s’autoproclamer “expert en CSS”.

Il n’est donc pas étonnant que les frameworks CSS soient apparus au fil du temps et qu’ils aient éliminé la plupart des difficultés. Aujourd’hui, nous ne pouvons pas imaginer coder sans notre framework CSS préféré, car il est devenu indispensable de cibler plusieurs tailles d’écran.

Mais comment savoir si votre framework est le meilleur pour le travail à accomplir ? De plus, si vous êtes novice en matière de développement frontal, quel framework devrait vous aider à choisir ?

Cet article jette un regard d’ensemble sur le paysage du développement frontal et compare les frameworks CSS les plus performants. Si vous en avez assez de coder des règles CSS à la main, plongez dans cet article pour vous soulager rapidement !

Bootstrap

Initiative de Twitter, Bootstrap est à l’origine de l’introduction à grande échelle du responsive design. Il a été le premier framework à promouvoir la philosophie du “mobile-first” La conception pour les écrans de petite taille n’était plus un projet à part entière ; il vous suffisait d’inclure les classes Bootstrap appropriées et le design s’adaptait automatiquement aux différentes tailles d’écran (enfin, presque).

Conception réactive dans Bootstrap (4.0 vs. 3.0)

Bootstrap a permis d’obtenir un design réactif en introduisant l’idée d’une grille. Une grille est une partition invisible de l’écran en colonnes (avec la largeur). Par exemple, si vous avez trois “boîtes” que vous voulez positionner côte à côte sur les grands écrans, mais verticalement sur les petits écrans, voici ce que vous feriez :

 

  

    

       Une des trois colonnes
    
   
    

      Une des trois colonnes
    

    

      Une des trois colonnes
    
  

La version populaire actuelle de Bootstrap est la 4, qui a fait l’objet d’une révision majeure par rapport à la série 3.3. La syntaxe ci-dessus correspond à la manière dont vous codez dans Bootstrap 4, qui doit une grande partie de son élégance à la puissance brute de Flexbox et à d’autres fonctionnalités de mise en page modernes prises en charge directement par les navigateurs. Dans les versions antérieures de Bootstrap, la grille était définie comme un total de 12 colonnes, ce qui donnait un code tel que

pour qu’une div occupe un tiers de la largeur de l’écran sur les appareils de grande taille, et la moitié de la largeur sur les appareils de taille moyenne. La syntaxe est désormais beaucoup plus agréable, bien qu’elle exige une certaine familiarité avec Flexbox.

Les avantages de Bootstrap

Bootstrap présente de nombreux avantages, en particulier pour les développeurs complets:

• Prototypage rapide : Avec Bootstrap, il n’est presque pas nécessaire de réfléchir à des positionnements CSS délicats et à des incompatibilités avec les navigateurs. Il vous suffit d’écrire le code HTML et d’appliquer les classes CSS appropriées pour que la réactivité prenne vie.
• Un vaste écosystème : À ce jour, Bootstrap possède le plus grand écosystème parmi les frameworks frontaux. Le nombre de mises en page de sites web, de thèmes, de panneaux d’administration, de composants d’interface utilisateur, etc. construits à l’aide de Bootstrap est époustouflant, et il ne cesse de s’améliorer. Pour les consultants et les entreprises de produits, cela signifie que les éléments préconstruits et le soutien de la communauté seront toujours abondants.
• Soutenu par Twitter : Une tendance émergente dans l’open source est la montée en puissance des projets sponsorisés par une entité commerciale. Le plus souvent, ces entités créent des entreprises rentables autour de leur offre. Kotlin (JetBrains), WordPress (Automattic, Inc.), Angular (Google), React (Facebook), etc. en sont quelques exemples. Lorsqu’un projet est soutenu par une entité établie et qu’il n’est pas le fait d’une seule personne, la communauté (en particulier les entreprises clientes) est convaincue que le projet aura une feuille de route claire et un avenir à long terme.
• Une large collection de composants : Bootstrap offre, dès sa sortie de la boîte, presque tous les composants d’interface utilisateur dont vous aurez probablement besoin. Navigation, formulaires, cartes, fenêtres modales, boutons, badges, barres de progression, alertes… . Vous l’avez dit, et Bootstrap l’a fait. Pour de nombreuses entreprises, cela réduit pratiquement le besoin d’avoir une équipe frontale dédiée.
• Prise en charge de LESS et SASS : Parmi les frameworks CSS massivement populaires, Bootstrap est le seul à prendre en charge LESS et SASS. Oui, je sais, vous n’utilisez pas LESS (comme tout développeur qui se respecte, n’est-ce pas ?), mais il y a des projets massifs qui s’appuient sur LESS. Bien sûr, vous pouvez ne choisir ni l’un ni l’autre et écrire vos propres fichiers CSS.

Les inconvénients de Bootstrap

Rien n’est sans prix, n’est-ce pas ? Bootstrap ne fait pas exception à la règle. Au fil du temps, Bootstrap a fait l’objet de nombreuses critiques de la part des concepteurs et des experts en interface utilisateur. Voici pourquoi :

• Monotonie de l’interface utilisateur : Le fait même que Bootstrap dispose d’une si grande collection d’éléments intégrés donne lieu à des sites web à l’aspect trop familier et, honnêtement, ennuyeux. Vous n’avez qu’à vous rendre sur les exemples officiels pour voir à quel point les valeurs par défaut sont désagréables à l’œil. Faites une recherche sur “all bootstrap websites look the same” et vous comprendrez ce que je veux dire 🙂
• Les problèmes de style : Bootstrap est ce que l’on pourrait considérer comme un cadre d’opinion. En d’autres termes, il a des idées sur les mises en page, et il vous fait travailler très dur si vous voulez qu’il ait un aspect ou un comportement différent. Considérez les points de rupture CSS par défaut pour les largeurs d’écran : un écran de taille moyenne pour Bootstrap est un écran qui commence à une largeur d’appareil de 768px. Et si vous voulez cibler, disons, la limite de 600px ? Eh bien, bonne chance ! Il en va de même pour presque tous les autres composants de Bootstrap : les lignes et les conteneurs ont un rembourrage par défaut, les boutons ont des couleurs et des bordures qu’il est très difficile de modifier sans beaucoup de travail, etc.

Vous voulez maîtriser le CSS? Consultez ce cours en ligne sur Udemy.

Fondation

Si les technologies étaient des religions, les gars de Foundation et de Bootstrap se chercheraient mutuellement du sang. Aucune discussion sur les frameworks CSS modernes n’est complète sans mentionner Foundation.

Rendez-vous sur le site Web de Foundation, et vous ne pourrez pas vous empêcher de remarquer la signature : “Le framework responsive front-end le plus avancé au monde” À première vue, il s’agit d’une affirmation de taille pour une campagne de marketing.

Cependant, les adeptes du framework Foundation savent qu’il y a au moins une part de vérité dans cette affirmation. Foundation a été développé pour aller naturellement de pair avec le framework Rails, et plusieurs des principes directeurs “zen” de Rails peuvent être vus à l’œuvre.

Par exemple, si vous voulez une rangée contenant deux éléments sur les petits écrans, trois sur les moyens et quatre sur les grands, le code équivalent dans Foundation ressemblera à ceci :

Par rapport aux versions précédentes de Bootstrap, je trouve cela très intuitif et facile à mémoriser. Fini les grilles à douze colonnes et la nécessité de comprendre ce que 4/12 est censé être !

Bien que Foundation soit beaucoup moins populaire que Bootstrap, c’est un secret de fabrication pour de nombreux développeurs frontaux experts.

Les avantages du framework Foundation

Parmi tous les frameworks CSS que nous allons examiner dans cet article, Foundation présente des caractéristiques inhabituelles :

• Un outillage complet : Il est techniquement faux de dire que Foundation est un framework CSS. C’est vrai, mais il a été construit comme une collection large et modulaire d’outils qui vise à résoudre presque tous les types de problèmes frontaux. Il existe des offres de framework distinctes pour les sites web et les emails, fortement optimisées pour leurs domaines respectifs. Foundation est également livré avec une interface en ligne de commande (CLI), ce qui sonnera comme de la musique aux oreilles des développeurs habitués à travailler avec Webpack ou d’autres bundlers de modules.
• Flexibilité extrême : Contrairement à Bootstrap, Foundation a été conçu pour donner aux développeurs frontaux un contrôle total sur leurs interfaces utilisateur. Par conséquent, Foundation semblera fade et extrêmement complexe pour le nouveau venu. Cependant, la raison en est que Foundation ne vous impose aucun langage de style, mais vise à être juste ce qu’il est : un excellent framework CSS.
• Plus que des composants d’interface utilisateur : Bien que Foundation dispose de la collection habituelle d’éléments d’interface utilisateur, il va bien au-delà de l’appel du devoir. Les développeurs ont inclus un système d’image responsive avancé, un composant de table de prix (oui, celui utilisé pour montrer les différents plans de prix), la validation de formulaire, le support de la droite vers la gauche, des embeds responsive, et plus encore. Je tiens à souligner à nouveau que tout cela est excessif pour la plupart des sites web simples, mais pour les sites plus importants, c’est un avantage que les développeurs expérimentés sauront reconnaître.
• Formation et conseil : Bien que Bootstrap soit créé par Twitter, il s’agit d’un projet secondaire qui ne représente qu’une infime partie de l’ensemble. La société qui est à l’origine de Foundation (ZURB) s’est toutefois engagée à l’utiliser, à le développer et à le promouvoir. Des cours de formation et des conseils professionnels sont proposés aux grands clients, ce qui est idéal pour les entreprises qui visent des projets de grande envergure et sont prêtes à payer.

Les inconvénients du Foundation Framework

Les forces d’un cadre deviennent ses faiblesses lorsqu’elles sont considérées d’un point de vue opposé. Voici pourquoi Foundation n’est peut-être pas le meilleur choix pour votre projet :

• Petite(s) communauté(s) : La communauté Foundation est beaucoup plus petite que celle de Bootstrap, et si vous essayez quelque chose d’exotique et que vous vous retrouvez bloqué, les chances de trouver une aide pertinente sont plus faibles. Cependant, j’ajouterais qu’à toutes fins pratiques, il y a suffisamment de communauté. C’est juste qu’elle est plusieurs ordres de grandeur plus petite que celle de Bootstrap, donc vous ne trouverez peut-être pas de solutions instantanément.
• Complexité : Si vous êtes habitué à Bootstrap ou à quelque chose de simple, ou pire, à du CSS classique, Foundation vous donnera l’impression d’une explosion infinie de complexité. Des couches dans des couches, des composants avec des composants, des options de personnalisation infinies . . . Très vite, vous commencerez à vous interroger sur l’utilité de la vie elle-même ! Mais là encore, Foundation a un objectif très différent et ne peut être blâmé pour cela.
• Trop d’options : Parfois, vous voulez simplement faire ce qu’il y a à faire et vous préoccuper de la perfection plus tard. Dans ces moments-là, il est frustrant d’être confronté à un trop grand nombre d’options avec des variations mineures. Par exemple, pensez à devoir commander un sandwich Subway alors que vous avez tellement faim que vous pourriez manger de la boue. Naturellement, la Fondation n’est pas faite pour ces moments-là.
• Disponibilité des talents : Foundation étant (beaucoup) moins populaire que Bootstrap, les talents disponibles sont beaucoup moins nombreux. En règle générale, tout nouvel embauché connaîtra probablement Bootstrap mais n’aura aucune idée de Foundation. L’apprentissage prend du temps, et c’est un luxe que toutes les équipes ne peuvent pas s’offrir.

Bulma

Bulma est un nouveau venu sur le champ de bataille des frameworks CSS et s’est fait un nom en peu de temps. Son attrait réside dans une approche stricte, uniquement CSS (il n’y a pas de composants JavaScript), et des valeurs par défaut élégantes, ce qui est quelque chose qui pose problème à de nombreux développeurs ayant un bon œil pour le design lorsqu’ils travaillent avec Bootstrap.

Une grande partie de l’élan de Bulma provient des taux élevés d’adoption par la communauté Laravel (un framework web PHP, au cas où vous ne le sauriez pas), ce qui, j’en suis sûr, est à peu près ce qui a aidé Vue.js à atteindre les sommets de la popularité parmi les frameworks JavaScript.

Pourquoi choisir le framework CSS Bulma ?

Il y a de nombreuses raisons d’aimer Bulma et de l’utiliser pour votre prochain projet :

• Assez populaire : D’accord, il n’est pas plus populaire que Bootstrap, mais il l’est plus que Foundation. A l’heure où j’écris ces lignes, Bulma a 30k étoiles sur Github, soit environ 3k de plus que Foundations. Bien sûr, le nombre d’étoiles sur Github n’est pas un indicateur de mérite, mais il indique que la communauté approuve Bulma.
• Des classes extrêmement lisibles : Bulma, pour moi, a les classes CSS les plus lisibles de tous les frameworks que j’ai essayés. Il y a aussi un système ridiculement puissant et simple pour créer des grilles de style Metro, appelées tiles (regardez le code dans la deuxième moitié de la capture d’écran, et dites-moi que vous n’êtes pas impressionné !)

• Courbe d’apprentissage plate : Bulma est très modulaire et a été créé pour résoudre les problèmes pratiques et quotidiens que rencontrent les petites équipes et les développeurs individuels. Vous trouverez que Bulma est très facile à apprendre, même si je pense qu’un bon bagage en CSS est toujours utile pour avoir une idée de ce qui se passe sous le capot. Cela vous aidera lorsque vous voudrez modifier le comportement par défaut.
• Elégant : Jetez un coup d’œil à la section Hero par défaut pour Bulma ci-dessous. C’est assez dit !

Bulma a une petite communauté, mais extrêmement passionnée, donc si vous voulez vous débarrasser de tout ce qui est superflu tout en voulant créer des interfaces utilisateur élégantes en un temps record, Bulma est la voie à suivre. Pour les développeurs Bootstrap, Bulma a une section séparée pour les convaincre et les aider à migrer.

UIkit

La chose qui vient à l’esprit lorsque l’on pense à UIkit est le minimalisme. Minimalisme non pas en termes de fonctionnalités (en fait, il offre peut-être le plus de fonctionnalités de tous les frameworks), mais en termes de design. Si vous aimez les designs épurés, élégants et sans espace blanc, UIkit est fait pour vous.

Par exemple, jetez un coup d’œil au composant progress-bar :

Ou le composant marqueur d’image (un marqueur interactif d’images piloté par JS) :

Si cela n’est pas un cri d’élégance, je ne sais pas ce qui l’est. Rendez-vous sur le site web d’UIkit et découvrez tous les composants incroyables qu’il propose. À moins que votre chef de projet ou votre client ne vous impose un langage stylistique particulier, je pense qu’Uikit remporte la palme du design d’interface utilisateur et devance de plusieurs kilomètres le Material Design de Google.

Mais y a-t-il un piège, vous demandez-vous ? Oui, il y en a un. Comme Bootstrap, UIkit fonctionne avec son JavaScript et bien que vous puissiez utiliser jQuery pour la manipulation du DOM, l’utilisation d’un cadre de DOM virtuel comme React est impossible.

De plus, Uikit est un système autonome, et vous ne pourrez pas le modifier ou l’étendre sans y consacrer des efforts considérables.

L’interface utilisateur sémantique

Un autre concurrent dans la course est Semantic UI, qui essaie de se distinguer avec beaucoup de thèmes et de personnalisation. Il y a plus de 3000 variables de thèmes, ce qui donne une ampleur considérable. C’est du moins ce que disent les documents.

Bootstrap 4 couvre en quelque sorte tout cela et est également entièrement personnalisable, mais l’un des avantages de Semantic UI est qu’il produit par défaut de belles mises en page. Néanmoins, il n’est pas le plus beau dès sa sortie de la boîte, c’est pourquoi je l’ai placé plus loin dans ma liste.

Il a également l’une des courbes d’apprentissage les plus raides, et les conventions de codage sont beaucoup plus strictes. Essayez-le, je dirais, et voyez s’il ressemble à quelque chose que vous préférez.

Susy

Susy est un framework peu connu à ce jour, mais c’est une idée fascinante et rafraîchissante. Un autre framework de mise en page pure, Susy se débarrasse de toutes les idées prédéfinies de float, grid, Flexbox, tables, ou quoi que ce soit d’autre, et vous permet de composer le type de mise en page que vous voulez. le mot clé est “composer”, car Susy est conçu pour créer des mises en page hautement modulaires et étonnantes avec des besoins ultra-complexes, inhabituels et précis.

Entre les mains d’un développeur expert, Susy est comme un lance-flammes qui souffle sur tout le reste. Les moins mortels, bien sûr, parviendront à se brûler les mains.

Pour vous faire une idée de la puissance de Susy, prenez l’exemple de ce réglage par défaut (SASS) :

 // 4 colonnes symétriques et fluides
// les gouttières sont 1/4 de la taille d'une colonne
// les éléments s'étendent sur 1 gouttière de moins que les colonnes
// les conteneurs s'étendent également sur 1 gouttière de moins
$susy : (
  'colonnes' : susy-repeat(4),
  'gouttières' : 0.25,
  'spread' : 'narrow',
  'container-spread' : 'narrow',
) ;

Je pense que le code est assez explicite, bien qu’il ne soit pas destiné aux personnes pressées 🙂 Susy est parfaitement adapté si vous en avez assez de tout ce que les frameworks modernes vous imposent, et si vous avez des besoins en matière de mise en page que vous savez qu’aucun framework ordinaire ne peut satisfaire.

Materialize

Si vous aimez le Material Design de Google, Materialize est un framework que vous apprécierez. La meilleure chose est qu’il n’y a qu’une poignée de composants et de classes à apprendre, et qu’il se concentre sur le fait de vous rendre productif aussi vite que possible. Il y a peu d’options de personnalisation, et Materialize suit le format de grille à 12 colonnes établi par Bootstrap.

Cependant, si vous voulez mon avis, le design Material devient si courant, et est si … . Plat par défaut, que bientôt nous nous en plaindrons comme nous nous plaignons du problème de Bootstrap qui fait que tous les sites web ont la même apparence. Néanmoins, c’est un cadre agréable pour commencer.

Pur

Yahoo est-il mort ?

Non, cette question n’est pas une diversion, mais met en lumière une observation importante : Yahoo a construit le framework Pure et l’a publié sous licence BSD.

Un coup d’œil rapide m’impressionne, et je me demande pourquoi cette offre n’est pas connue de plus de gens. Quoi qu’il en soit, ce qui rend Pure, et bien, pur, c’est qu’il s’agit d’un framework CSS pur🙂 En fait, les développeurs sont allés plus loin et l’ont divisé en différents modules CSS que vous pouvez importer selon vos besoins. Ainsi, si vous n’avez besoin que du système de grille, il n’est pas nécessaire d’importer tout le CSS et d’augmenter le temps de chargement du site.

La grille de Pure est disponible en plusieurs versions : 5 points, 2 points, 24 points, etc., ce qui vous donne beaucoup plus de flexibilité pour créer des colonnes. Pure n’est pas le plus beau framework CSS par défaut, mais je peux voir comment il ajoute de la valeur à ceux qui veulent résoudre un petit problème CSS dans leur interface utilisateur et qui sont gênés par les valeurs par défaut “utiles” que d’autres frameworks proposent.

Squelette

Comme vous pouvez le voir sur la capture d’écran, Skeleton est tellement minimal qu’il ne s’appelle même pas un framework CSS, une bibliothèque ou même un module. Il s’agit d’un modèle standard, et il ne contient que 400 lignes de code source ! Incroyable ? Je pense que oui, mais pour mettre les choses en perspective, Skeleton a été conçu pour les petits projets qui ne nécessitent guère plus que des mises en page et du positionnement.

Cela vaut la peine d’y jeter un coup d’œil ; après tout, qui sait, Skeleton est peut-être ce que vous recherchiez depuis le début !

Milligram

Milligram, un framework CSS conçu pour la vitesse et la productivité. Les développeurs ont veillé à ce que sa taille ne dépasse pas 2 Ko, ce qui, selon les normes actuelles, est considérable.

Un milligramme est une petite version amusante des frameworks CSS avec laquelle vous apprécierez de travailler. Il est facile de l’étendre, et avec quelques lignes de CSS personnalisées, vous pouvez changer son apparence comme vous le souhaitez.

Tailwind CSS

Tailwind préconisait un style d’écriture et d’utilisation des CSS qui en a dégoûté plus d’un. Regardez l’utilisation des classes CSS dans le code suivant (extrait du site web de Tailwind) :

<figure class="md:flex bg-gray-100 rounded-xl p-8 md:p-0">
  <img class="w-32 h-32 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-semibold">
        "Tailwind CSS est le seul framework que j'ai vu s'adapter à de grandes équipes
        dans de grandes équipes. Il est facile à personnaliser, s'adapte à n'importe quel design,
        et la taille de la construction est minuscule
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-cyan-600">
        Sarah Dayan
      </div>
      <div class="text-gray-500">
        Ingénieur en chef, Algolia
      </div>
    </figcaption>
  </div>
</figure>

Si vous êtes développeur depuis plus de deux ans, vous avez probablement la nausée. Alors … beaucoup … de classes …! Et bien qu’il n’y ait pas de CSS en ligne ici, on a l’impression que c’est le cas étant donné le caractère explicite (et laid ?) des noms de classes.

Ainsi, pendant un certain temps, Adam Wathan (le créateur de Tailwind) a couru de pilier en pilier (c’est-à-dire dans des podcasts, des conférences, des articles de blog, des tweets) pour expliquer pourquoi il pensait que le CSS basé sur les utilités était supérieur au CSS sémantique.

Aujourd’hui, le CSS utilitaire a fait une percée considérable. Regardez ce code Bootstrap 5 et voyez à quel point les classes utilitaires sont devenues courantes :

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Elément de la grille 1</div>
  <div class="p-2 bg-light border">Élément de la grille 2</div>
  <div class="p-2 bg-light border">Grille élément 3</div>
</div>

Après avoir parlé de la “vue d’ensemble” de Tailwind, passons aux avantages concrets qu’il offre :

• Plus de productivité : La productivité est un sujet dont on peut débattre toute la journée sans jamais arriver à quoi que ce soit ; cela dit, les développeurs qui ont adopté exclusivement Tailwind (en particulier pour les grands projets) affirment qu’ils sont beaucoup plus productifs. Mais vous devrez investir des efforts soutenus au départ car Tailwind ne fonctionnera pour vous que lorsque vous aurez désappris les “meilleures pratiques” du passé.
• Un paquet plus petit : Tailwind est plus ou moins un JS manipulant des CSS, ce qui permet de faire des choses élégantes. Par exemple, lorsque vous construisez le projet, le compilateur peut supprimer tous les CSS inutiles. C’est tout à fait différent d’un projet web typique utilisant le module CSS de Bootstrap ; dans ce cas, tout le CSS de Bootstrap est intégré dans le projet final.
• Configurable et personnalisable : Tailwind n’est pas seulement extrêmement modulaire, il est aussi construit pour mettre en avant sa facilité de configuration et de personnalisation. Il n’y a rien de tel que “démarrer avec Tailwind en 2 minutes” parce que vous devez apprendre le quoi, le où, le pourquoi, et plus encore ; un autre exemple : si vous n’avez pas votre système de conception prêt et que vous n’aimez pas les valeurs par défaut, vous éprouverez de la frustration. Vous devez passer par la courbe d’apprentissage et d’ajustement initiale avant de pouvoir dire “wow !
• Pas de changement de nom ou de contexte : l’une des plus grandes corvées des développeurs est de nommer les choses. Le résultat final doit-il s’appeler totalAmountForUnits ou expensesAcrossUnits, par exemple ? Le problème est encore plus grave en CSS, car il peut y avoir des centaines (voire des milliers) de classes dans un projet. Un autre problème est le changement de contexte : sauter constamment entre votre HTML et votre CSS pour voir le CSS changer. Avec Tailwind, les décisions de nommage sont déjà prises pour vous, et comme vous ne faites qu’ajouter/supprimer des classes du HTML, il n’y a pas de changement de contexte.
• Réutilisation du code : Si vous vous retrouvez à “réutiliser” des classes utiles en les copiant-collant d’un projet à l’autre, Tailwind dispose d’une fonctionnalité appelée Composants qui résout ce problème de manière élégante. Pour en savoir plus sur cette fonctionnalité, cliquez ici.

Pour beaucoup, Tailwind a été une bouffée d’air frais dont ils avaient désespérément besoin. Si vous en avez assez de votre bibliothèque CSS actuelle et que vous voulez essayer quelque chose de radical et de nouveau, Tailwind est ce que vous cherchez !

Tacit

Tacit est le projet secondaire de quelqu’un que j’ai découvert en cherchant des choses intéressantes pour cet article. Oui, simplement un projet secondaire ; rien de plus que le travail d’une personne basé sur ses goûts.

Pourquoi est-ce que j’insiste autant sur ce point ?

Parce que cela signifie généralement que le risque d’être abandonné est très élevé. Mais je peux aussi penser à quelques points positifs : 1) Le projet est sur GitHub, et donc, si vous êtes un développeur et que vous voulez soutenir/étendre Tacit, vous savez quoi faire. 😉 2) CSS n’est pas comme JavaScript en termes de changement ou d’évolution ; quel que soit le style que vous utilisez aujourd’hui, il sera supporté par les navigateurs pendant très longtemps.

Alors, qu’est-ce que c’est exactement que ce Tacit ?

Comme l’indique la capture d’écran, Tacit est destiné à ceux qui ne connaissent pas les CSS ou qui ont un mauvais goût en matière de design. L’idée est originale : ajoutez le lien CSS à votre projet et vous obtiendrez instantanément un beau site web ! Mais veillez à tenir votre promesse : n’ajoutez jamais d’autres CSS ou ne mélangez pas des éléments provenant d’autres frameworks, car vous risqueriez de vous casser la figure.

Et un site Tacit est-il beau ?

Si vous voulez me croire sur parole, je dirais que le style de conception choisi est “très bon”. En fait, je le trouve même plus agréable que Semantic UI, l’un des frameworks/librairies CSS les plus populaires ! Sans entrer dans une guerre de flammes et faire des comparaisons de captures d’écran côte à côte, je vais laisser tomber le sujet en disant que le design est subjectif. Mais vous pouvez comparer et décider par vous-même. 🤪

Quoi qu’il en soit, permettez-moi d’ajouter quelques captures d’écran de Tacit.

Tout d’abord, voici à quoi ressemblent les éléments de formulaire :

Et voici à quoi ressemblent les tableaux dans leur forme la plus basique :

Je terminerai en répétant l’évidence : si vous pensez que ce type de couleurs, de polices, de styles, etc. sont parfaits par défaut, Tacit vous apportera un soulagement bienvenu.

Spectre

Moderne, flexible, léger – si vous recherchez quelque chose avec ces attributs, Spectre vaut le coup d’œil.

Permettez-moi d’expliquer mon choix d’adjectifs pour Spectre:

• Moderne : Le système de mise en page de Spectre est basé sur Flexbox, qui est l’une des meilleures choses que les CSS modernes nous aient données. Simultanément, beaucoup de facilités et d’outils trouvés dans les flux de travail CSS modernes ou d’autres frameworks sont également inclus.
• Flexible : Vous pouvez écrire le framework CSS le plus modulaire et le plus avancé, il ne servira pas à grand-chose s’il n’est pas facilement personnalisable. J’aime la façon dont la personnalisation est mentionnée tout en haut de la documentation ; suivez le trou du lapin, et vous trouverez des explications détaillées.
• Léger : Nous sommes à une époque où les préoccupations concernant les performances du Web sont de plus en plus fortes ; chaque kilooctet transféré est examiné et critiqué. Ainsi, Spectre emballe tout dans un doux paquet de 10 Ko, ce qui ne devrait pas être “trop” pour chacun d’entre nous. 😝

Le fait d’être léger ne signifie pas que Spectre sacrifie la fonctionnalité ; il y a tout ce à quoi vous êtes habitué en tant que fan de Bootstrap : composants (accordéons, breadcrumbs, cartes, et plus), éléments (formulaires, tables, boutons, etc.), mise en page (grilles, section héros, navbar, etc.), utilitaires (chargeurs, spinners, etc.), et bien plus encore.

Que pensez-vous de Spectre ? Je suis plus ou moins convaincu, mais il y a deux ou trois choses que je voudrais mentionner. Tout d’abord, je n’aime pas beaucoup la couleur bleue primaire par défaut, donc la changer est la première chose que je ferais dans mes projets. deuxièmement, en 2020, je pense que la grille CSS est le meilleur outil pour les mises en page ; je trouve Flexbox un peu bizarre pour faire toutes les choses de mise en page, donc j’aurais aimé que Spectre utilise la grille au lieu de Flexbox.

Mais ce n’est pas un problème si je peux développer rapidement et obtenir de bons résultats. Je vous conseille donc d’aller de l’avant et d’essayer Spectre sans crainte !

L’abécédaire

Primer n’ est pas un framework ou une bibliothèque CSS. Ce n’est même pas une collection de classes CSS ou une autre terminologie bizarre.

Alors pourquoi figure-t-il sur cette liste ? Pour deux raisons :

• Il possède un framework CSS.
• C’est l’une des choses les plus complètes et les plus époustouflantes que vous puissiez voir.

Oui, comme l’indique la capture d’écran, Primer est un système de conception développé par GitHub pour son propre usage. Ils ont fini par se rendre compte que ce système était puissant et extrêmement utile pour le travail frontal et visuel ; ils l’ont donc rendu open source.

J’ai eu du mal à trouver les bons mots pour décrire Primer. Leur propre équipe de conception l’appelle … eh bien, oui, un système de conception, mais je pense que le champ d’application est beaucoup plus large que ce que nous entendons lorsque nous parlons de “système de conception”.

Primer comprend de nombreux éléments dont l’importance n’est peut-être pas immédiatement évidente. Du moins pour les développeurs backend/full-stack. Voyons donc ce que sont ces choses spéciales et pourquoi elles sont spéciales :

• Directives d’interface : Dans une équipe composée d’une seule personne, la conception et la maintenance des interfaces utilisateur sont triviales. Mais si vous ajoutez trois autres personnes à l’équipe – qui plus est des personnes compétentes et performantes – vous verrez que tout commence à se dégrader. La raison en est l’absence de lignes directrices clairement définies et strictement appliquées, de sorte que chacun sache ce qu’il doit faire dans chaque type de situation. Primer est livré avec un ensemble de règles que vous pouvez adapter à vos besoins.
• Composants Figma : Même si je suis développeur, j’en sais assez sur la conception pour comprendre que l’absence d’une référence/utilisation claire des composants peut devenir incontrôlable au fur et à mesure de l’avancement du projet. À quoi doit ressembler le bouton lorsqu’il est pressé en mode sombre, par exemple ? Si personne n’a documenté ce point et que la pression est forte, vous aurez plusieurs variantes. C’est pourquoi les gens de Primer ont fourni leurs propres composants Figma afin que nous puissions apprendre et nous améliorer.
• Cadre CSS : Enfin, la chose qui a valu à Primer une place sur cette liste ! primer dispose d’un cadre CSS modulaire, de type BEM, qui fournit des styles distincts pour les pages de produits et de marketing. C’est quelque chose que GitHub a fait pour sa commodité, et vous êtes libre de ne pas y toucher ou d’accepter la philosophie globale telle qu’elle est. Même si c’est juste le CSS qui vous intéresse, je vous recommande de jeter un coup d’œil ici.
• Icônes (Octicons) : Chaque système de conception cohérent a sa propre conception des icônes. Pour Primer, la réponse est Octicons. Il n’y a pas tant d’icônes que ça, apparemment. Pourtant, je les place plus haut dans la liste parce qu’elles font partie des fondamentaux absolus : si tout correspond mais que quelques icônes ne correspondent pas, le résultat est une interface utilisateur qui vous donne la conjonctivite. 😝
• Les composants React : Et bien sûr, comme React est la bibliothèque frontale la plus populaire, les gens de GitHub ont codé les éléments CSS en tant que composants React, qui sont maintenant disponibles pour nous tous !
• Présentations : Cette partie de l’abécédaire porte sur le langage de conception à utiliser lors de présentations à des publics (tel qu’il est utilisé par les gens de GitHub en interne). Les polices, les couleurs, les bordures, les contrastes – toutes les décisions ont déjà été prises. Vous êtes libre d’étudier leurs lignes directrices et d’élaborer les vôtres.

Le plus grand avantage de Primer réside dans le fait de l’adopter dans son ensemble. Cela n’est pas possible pour tout le monde, et certains peuvent même trouver que leur langage de conception est en conflit avec celui de GitHub. Et puis, certaines personnes trouvent une partie particulière (ou même une partie de la partie !) de Primer utile et l’utilisent.

Quelle que soit votre position sur ce spectre, Primer a quelque chose à vous offrir : soit des composants de système de conception réutilisables et de haute qualité, soit de la matière à réflexion pour vos propres processus et lignes directrices !

Fictoan

Fictoan est un cadre intuitif destiné aux concepteurs de sites web qui souhaitent créer des interfaces utilisateur. Le framework a été créé pour brouiller les lignes entre les développeurs et les concepteurs.

Les créateurs pensent que les concepteurs devraient contrôler entièrement l’expérience utilisateur et l’interface utilisateur. D’autre part, les développeurs devraient se concentrer sur les performances et des choses comme le déploiement.

Pourquoi utiliser Fictoan ?

• Une variété de composants : Fictoan possède des centaines de composants classés dans différentes catégories. Par exemple, si vous recherchez un formulaire, il existe plus de dix modèles.
• Un logiciel libre : L’utilisation de Fictoan est gratuite et vous pouvez trouver le code sur GitHub.
• Accessible : La plateforme est conçue en mettant l’accent sur l’accessibilité. Les concepteurs peuvent également personnaliser le code disponible pour améliorer l’accessibilité.
• Facile à démarrer : Fictoan a été créé pour les projets React.

Vous pouvez créer une application React simple pour en démontrer le fonctionnement. Utilisez la commande suivante ;

npx create-react-app fictoan-app

cd fictoan-app

Vous pouvez maintenant ajouter fictoan à votre application React comme suit ;

npm install fictoan-react

Nous pouvons ouvrir le projet dans un éditeur de code et créer un simple bouton.

<Button kind="primary"&gt

  Bouton

</Button&gt

• Personnalisation facile : Vous pouvez adapter le code ci-dessus à vos besoins.

Inconvénients de Fictoan

• Encore nouveau : le 21 juin 2020, la première version a été poussée sur GitHub. La plateforme compte moins de 10 forks et a encore un long chemin à parcourir pour attirer les masses.
• Fonctionnalités limitées : Même si Fictoan propose des designs modernes et étonnants, il lui reste un long chemin à parcourir pour rivaliser avec d’autres plateformes, telles que Bootstrap, en termes de fonctionnalités.
• Dépendances : Fictoan dépend de certaines bibliothèques, telles que les composants stylisés, pour fonctionner. Le fait d’avoir autant de dépendances peut entraîner une augmentation de la taille de l’application.

Vanilla

Vanilla est un framework CSS simple et extensible écrit en Syntactically Awesome Style Sheets (Sass), un superscript de CSS. Vanilla est utilisé dans la plupart des produits Canonical, comme Ubuntu et JAAS.

Pour commencer à utiliser Vanilla, créez un fichier de projet et naviguez-y. Vous pouvez ensuite installer Vanilla en utilisant yarn ou npm.

yarn add vanilla-framework

Ou bien

npm install vanilla-framework

Alternativement, vous pouvez ajouter un lien CDN dans la section <head> de votre fichier html pour commencer à utiliser Vanilla Framework.

<link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-3.13.0.min.css" />

Pourquoi utiliser Vanilla ?

• Il est réactif : Les applications stylisées à l’aide de Vanilla Framework s’adaptent à différentes tailles d’écran, telles que les smartphones et les ordinateurs personnels.
• Écrit en Sass : Sass facilite la définition de variables et de mixins dans votre code CSS.
• Prise en charge de plusieurs navigateurs : Vous pouvez utiliser les applications Vanilla sur différents navigateurs tels que Firefox, Chrome et Safari.
• Composable : Vous pouvez inclure le code spécifique dont vous avez besoin ou installer l’ensemble du framework dans votre projet.
• Open source : Le code source est ouvert, créé et maintenu par l’équipe Web de Canonical.

Inconvénients de l’utilisation de Vanilla

• Niveaux de personnalisation limités : Vanilla peut ne pas offrir les niveaux de personnalisation souhaités par certains développeurs.
• Documentation limitée : Comparé à d’autres frameworks CSS, tels que Foundation et Bootstrap, la documentation de Vanilla n’est pas très complète.
• Absence d’une communauté dynamique : Vanilla n’a pas une grande communauté comparée à d’autres frameworks.

Alors, quel est le meilleur framework CSS ?

Admettez-le, vous avez déjà posé des questions similaires et reçu la réponse décevante suivante : aucun 😀 Le choix d’un framework (ou d’un outil, ou même d’une personne dans votre vie, d’ailleurs) dépend d’un grand nombre de facteurs.

Si vous voulez mon conseil, le voici : Éliminez le bruit. Ce n’est pas parce que les gens s’enthousiasment pour quelque chose de nouveau et de brillant que vous devez l’apprendre ou que vous serez laissé pour compte. Essayer de nouvelles choses est une bonne chose, mais tourner en rond à la recherche de l’outil parfait est, en fait, un gâchis.