16 meilleurs frameworks/bibliothèques CSS pour les développeurs front-end

Une fois, j'ai entendu une blague de développeur front-end : "La NASA a fait atterrir des robots sur Mars, et nous avons encore du mal à centrer nos divs !" Et ça me fait mal que cette blague ait beaucoup de vérité.

Faire quelque chose qui semble aussi simple et fondé sur le bon sens que de centrer une boîte dans une boîte est incroyablement difficile à résoudre en CSS. A moins que vous ne l'ayez déjà rencontré. Et enregistré l'extrait de code quelque part. Et même si vous parvenez à le retirer, il y a toujours la peur qui se cache qu'il pourrait simplement se casser horriblement sur un navigateur stupide quelque part !

CSS lie pour la première place des « maux Web nécessaires » avec JavaScript. C'est une norme qui a évolué au hasard, a été interprétée différemment par différents fabricants de navigateurs, et est maintenant tellement pleine de contradictions que personne n'ose se qualifier d'« expert CSS ».

Il n'est donc pas étonnant que les frameworks CSS aient émergé au fil du temps et aient soulagé l'essentiel de la douleur. Aujourd'hui, nous ne pouvons pas imaginer le codage sans notre framework CSS préféré, car cibler plusieurs tailles d'écran est devenu une nécessité.

Mais comment savez-vous que votre cadre est le meilleur pour le travail à accomplir? De plus, si vous êtes nouveau dans le développement front-end, quel framework devrait vous aider à choisir?

Cet article jette un coup d'œil sur le paysage du développement frontal et compare les pionniers parmi les frameworks CSS. Donc, si vous êtes fatigué de coder à la main les règles CSS, plongez-vous pour un soulagement rapide!

Bootstrap

Une initiative de Twitter, Bootstrap se félicite de l'introduction de la conception réactive à grande échelle. C'était le premier cadre à promouvoir la philosophie du «mobile d'abord». La conception pour des écrans plus petits n'était plus un projet distinct en soi; tout ce que vous aviez à faire était d'inclure les classes Bootstrap pertinentes, et la conception s'ajusterait automatiquement aux différentes tailles d'écran (enfin, presque).

Conception réactive dans Bootstrap (4.0 vs 3.0)

Bootstrap a réalisé 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 souhaitez placer côte à côte sur de grands écrans, mais verticalement sur des écrans plus petits, voici ce que vous feriez:

 L'une des trois colonnes L'une des trois colonnes L'une des trois colonnes

La version populaire actuelle de Bootstrap est 4, ce qui était une refonte majeure de la série 3.3. La syntaxe ci-dessus est la façon dont vous coderiez dans Bootstrap 4, qui doit beaucoup 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 inférieures de Bootstrap, la grille était définie comme un total de 12 colonnes, ce qui aboutissait à un code tel que

pour qu'un 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 maintenant beaucoup plus agréable, même si elle exige une familiarité avec Flexbox.

Avantages de Bootstrap

Il y a beaucoup à aimer dans Bootstrap, en particulier pour développeurs full-stack:

Prototypage rapide: Avec Bootstrap, il n'est presque pas nécessaire de réfléchir au positionnement CSS délicat et aux incompatibilités de navigateur. Tout ce que vous avez à faire est d'écrire le code HTML, puis d'appliquer les classes CSS appropriées pour que la réactivité prenne vie.
Grand é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., créés à l'aide de Bootstrap est ahurissant et ne cesse de s'améliorer. Pour les consultants et les entreprises de produits, cela signifie que les articles pré-construits et le soutien de la communauté seront toujours nombreux.
Soutenu par Twitter: Une tendance émergente de l'open source est la montée en puissance des projets parrainés par une entité commerciale. Le plus souvent, ces entités construisent 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 n'est pas une exposition individuelle, cela donne confiance à la communauté (en particulier aux entreprises clientes) que le projet aura une feuille de route claire et un avenir à long terme.
Une grande collection de composants: Bootstrap offre, hors de la boîte, presque tous les composants d'interface utilisateur dont vous aurez probablement besoin. Navigation, formulaires, cartes, modaux, boutons, badges, barres de progression, alertes. . . Vous l'appelez, et Bootstrap l'a. 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 très populaires, Bootstrap est le seul qui prend en charge à la fois LESS et SASS. Oui, je sais, vous n'utilisez pas LESS (comme aucun développeur qui se respecte, n'est-ce pas?), Mais bon, il existe des projets massifs qui reposent sur MOINS. Bien sûr, vous pouvez choisir ni l'un ni l'autre et écrire vos fichiers CSS simples.

Contre Bootstrap

Rien n'est sans prix, hein? Eh bien, Bootstrap ne fait pas exception. Au fil du temps, Bootstrap a été soumis à de vifs critiques de la part des concepteurs et des experts de l'interface utilisateur. Voici pourquoi:

Monotonie UX: Le fait même que Bootstrap possède une si grande collection de résultats intégrés dans des sites Web qui semblent trop familiers et, honnêtement, ennuyeux. Il vous suffit de vous diriger vers le exemples officiels pour voir à quel point les valeurs par défaut sont horribles. Il suffit de rechercher «tous les sites Web bootstrap se ressemblent» et vous comprendrez ce que je veux dire. 🙂
Malheurs 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 vous oblige à travailler très dur si vous voulez qu'il ait un aspect / un comportement différent. Considérez les points d'arrêt CSS par défaut pour les largeurs d'écran: un écran de taille moyenne pour Bootstrap est celui qui commence à une largeur de périphérique de 768 pixels. Et si vous voulez cibler, disons, la limite de 600 pixels? Eh bien, bonne chance avec ça! C'est la même chose avec presque tous les autres composants dans bootstrap: les lignes et les conteneurs ont leur remplissage par défaut, les boutons ont des couleurs et des bordures qui sont très difficiles à remplacer sans beaucoup de travail, et ainsi de suite.

Vouloir maître CSS? Regarde ça Cours en ligne Udemy.

Foundation

Si les technologies étaient des religions, les gars de la Fondation et de Bootstrap seraient l'un pour l'autre. Aucune discussion sur les frameworks CSS modernes n'est complète sans mentionner Foundation, alors c'est parti.

Rendez-vous à la Fondation site Web, et vous ne pouvez pas vous empêcher de remarquer la signature: «Le framework frontal réactif le plus avancé au monde.» À première vue, cela ressemble à une grande revendication d'aller avec une campagne de marketing.

Cependant, les adhérents du cadre de la Fondation savent qu'il y a au moins une part de vérité à cela. Foundation a été développé pour aller naturellement avec le cadre Rails, et plusieurs des principes directeurs «zen» de Rails peuvent être vus à l'œuvre.

Par exemple, si vous vouliez une ligne contenant deux éléments sur de petits écrans, trois sur des écrans moyens et quatre sur des grands écrans, le code équivalent de Foundation ressemblera à ceci:

Par rapport aux versions antérieures de Bootstrap, je trouve cela très intuitif et facile à mémoriser. Plus de douze grilles de colonnes et de savoir ce que 4/12 est censé être!

Bien que Foundation soit beaucoup moins populaire que Bootstrap, c'est un secret commercial pour de nombreux développeurs front-end experts.

Avantages du cadre de base

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

Outillage complet: Il est techniquement faux de dire que Foundation est un framework CSS. Je veux dire, c'est vrai, mais il a été construit comme une grande collection modulaire de outils qui vise à résoudre presque tous les types de problèmes frontaux. Il existe des offres de cadre distinctes pour les sites Web et les e-mails, fortement optimisées pour leurs domaines respectifs. Foundation est également livré avec une interface de ligne de commande (CLI), qui sonnera comme de la musique aux oreilles des développeurs habitués à travailler avec Webpack ou d'autres bundleurs de modules.
Flexibilité extrême: Contrairement à Bootstrap, Foundation a été conçu pour donner au développeur frontal un contrôle total sur ses interfaces utilisateur. En conséquence, Foundation se sentira 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 exactement ce qu'il est: un excellent framework CSS.
Plus que de simples composants d'interface utilisateur: Bien que Foundation dispose de la collection habituelle d'éléments d'interface utilisateur, cela va bien au-delà de l'appel du devoir. Les développeurs ont inclus un système d'image réactif avancé, un composant de tableau de prix (oui, celui utilisé pour afficher divers plans de tarification), une validation de formulaire, un support de droite à gauche, des intégrations réactives, etc. Je tiens à souligner à nouveau que c'est une exagération pour la plupart des sites Web simples, mais pour les grands, c'est une aubaine que les développeurs expérimentés reconnaîtront.
Formation et conseil: Maintenant, alors que Bootstrap est créé par Twitter, c'est un projet parallèle et une très petite partie de l'image globale. La société derrière Foundation (ZURB), cependant, s'engage à l'utiliser, à la développer et à la promouvoir. Des cours de formation et des conseils professionnels sont proposés aux gros clients, ce qui est idéal pour les entreprises qui ciblent des projets de grande envergure et sont prêtes à payer.

Contre du cadre de base

Les points forts d'un cadre deviennent ses faiblesses lorsqu'on les considère d'un point de vue opposé. Voici pourquoi la Fondation n'est peut-être pas le meilleur choix pour votre projet:

Petite (plus) communauté: La communauté de la Fondation est beaucoup plus petite que celle de Bootstrap, et si vous essayez quelque chose d'exotique et que vous restez bloqué, les chances de trouver de l'aide appropriée sont plus faibles. Cependant, j'ajouterais cela à toutes fins pratiques; il y a assez de communauté là-bas. C'est juste qu'il est de plusieurs ordres de grandeur plus petit que celui de Bootstrap, vous pourriez donc ne pas trouver de solutions instantanément.
Complexité: Si vous êtes habitué à Bootstrap ou à quelque chose de simple, ou pire, au CSS vanille, Foundation se sentira comme une explosion infinie de complexité. Couches dans les couches, composants avec composants, options de personnalisation infinies. . . Bientôt, vous commencerez à remettre en question l'utilité de la vie elle-même! Mais là encore, la Fondation a un objectif très différent et ne peut être blâmée pour cela.
Trop d'options: Parfois, vous voulez juste faire de la merde et vous soucier de la perfection plus tard. Pendant de telles périodes, il est frustrant de se voir présenter trop d'options avec des variations mineures. Par exemple, pensez à devoir commander un sandwich Subway lorsque vous avez tellement faim que vous pourriez manger de la boue. Naturellement, la Fondation n'est pas pour des moments comme ça.
Disponibilité des talents: Puisque Foundation est (beaucoup) moins populaire que Bootstrap, le talent disponible l'est beaucoup moins. En règle générale, tout nouvel employé connaîtra probablement Bootstrap mais n'aura pas la moindre idée de Foundation. L'apprentissage prend du temps et c'est un luxe que toutes les équipes ne peuvent pas avoir.

Bulma

Bulma est un entrant relativement nouveau sur le champ de bataille des frameworks CSS et s'est fait un nom en peu de temps. C'est àtractiveness 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 pose problème à de nombreux développeurs ayant un bon œil pour la conception lorsqu'ils travaillent avec Bootstrap.

Une grande partie de l'élan de Bulma provient de taux d'adoption élevés avec la communauté Laravel (un framework Web PHP, au cas où vous ne le sauriez pas), ce qui, j'en suis sûr, a aidé Vue.js à atteindre les sommets de la popularité. parmi Frameworks JavaScript.

Pourquoi choisir le Bulma CSS Framework

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

Assez populaire: D'accord, ce n'est pas plus populaire que Bootstrap, mais c'est plus populaire que Foundation. Au moment d'écrire ces lignes, Bulma a plus de 30k étoiles sur Github, environ 3k + de plus que Foundations. Bien sûr, un certain nombre d'étoiles Github n'est pas une mesure du mérite, mais cela indique que la communauté approuve Bulma.
Classes extrêmement lisibles: Bulma, pour moi, a les classes CSS les plus lisibles de tous les frameworks que j'ai essayés. Il existe également un système ridiculement puissant et simple pour créer des grilles de style Metro, appelées tuiles (regardez simplement le code dans la seconde moitié de la capture d'écran et dites-moi que vous n'êtes pas impressionné!).

Courbe d'apprentissage plate: Bulma est hautement modulaire et a été créé pour résoudre les problèmes pratiques et quotidiens rencontrés par les petites équipes et les développeurs individuels. Vous constaterez que Bulma est très facile à apprendre, même si je pense qu'une bonne expérience en CSS est toujours bonne pour avoir une idée de ce qui pourrait se passer sous le capot. Cela vous aidera lorsque vous voudrez remplacer le comportement par défaut.
Élégant: Eh bien, jetez un œil à la section Hero par défaut pour Bulma ci-dessous. Assez dit!

Bulma a une communauté petite mais extrêmement passionnée, donc si vous voulez vous débarrasser de tous les peluches 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 distincte pour les convaincre et les aider à migrer.

UIkit

La chose qui vient à l'esprit en pensant à UIkit est le minimalisme. Minimalisme non pas dans les fonctionnalités (en fait, il offre peut-être le plus de fonctionnalités de tous les frameworks), mais dans la conception. Si vous aimez les designs super propres, élégants et non-timides, UIkit est là pour vous.

Par exemple, jetez un œil au composant de barre de progression:

Ou le composant de marqueur d'image (un marqueur interactif basé sur JS pour les images):

Si cela ne crie pas l'élégance au sommet de ses poumons, je ne sais pas ce qui se passe. Rendez-vous simplement sur le site Web d'UIkit et découvrez tous les composants incroyables qu'il propose. A moins que votre Chef de projet ou le client vous impose un langage de style particulier, je pense qu'Uikit prend la couronne pour la conception de l'interface utilisateur et a plusieurs kilomètres d'avance sur la conception matérielle de Google.

Mais y a-t-il un problème, vous vous demandez. Oui il y a. Comme Bootstrap, UIkit fonctionne avec son JavaScript et bien que vous puissiez utiliser jQuery pour la manipulation DOM, en utilisant un framework DOM virtuel comme Réagir est impossible.

De plus, Uikit est un système autonome, et vous ne pourrez pas le modifier ou l'étendre sans un effort considérable.

Semantic UI

Un autre concurrent dans la course est UI sémantique, qui essaie de se distinguer avec beaucoup de thèmes et de personnalisation. Il existe plus de 3000 variables de thème, ce qui se traduit par une largeur énorme. Ou c'est ce que disent les documents.

Bootstrap 4 couvre tout cela et est également entièrement personnalisable, mais l'un des avantages de l'interface utilisateur sémantique est qu'il en résulte par défaut de jolies mises en page. Pourtant, ce n'est pas le plus beau hors de la boîte, c'est pourquoi je l'ai mis plus tard sur ma liste.

Il possède également l'une des courbes d'apprentissage les plus raides et les conventions de codage sont beaucoup plus strictes. Essayez-le; Je dirais, et voir si cela ressemble à quelque chose que vous pourriez préférer.

Susy

Susy est un cadre peu connu à ce stade, mais c'est une idée fascinante et rafraîchissante. Un autre cadre de mise en page pure, Susy supprime toutes les idées prédéfinies de float, de grille, de Flexbox, de tableaux ou de toute autre chose, et vous permet composer le type de mise en page que vous souhaitez. «Compose» est le mot-clé ici, car Susy est destiné à créer des mises en page hautement modulaires et stupéfiantes avec des besoins ultra-complexes, inhabituels et précis.

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

Pour avoir une idée de la puissance de Susy, échantillonnez ce paramètre par défaut (SASS):

 // 4 colonnes symétriques et fluides // les gouttières font 1/4 de la taille d'une colonne // les éléments couvrent 1 gouttière de moins que les colonnes // les conteneurs couvrent également 1 gouttière de moins $ susy: ('columns': susy-repeat (4 ), 'gouttières': 0.25, 'étalé': 'étroit', 'conteneur-étalé': 'étroit',);

Je pense que le code est assez explicite, même si ce n'est pas pour ceux qui sont pressés. 🙂 Susy est parfaitement logique si vous êtes fatigué de tout le gonflement que les cadres modernes vous imposent et que vous avez des besoins de mise en page que vous savez qu'aucun cadre ordinaire ne peut servir.

Materialize

Si vous êtes amoureux du Material Design de Google, Materialise est un cadre vous apprécierez. La meilleure chose à faire est qu'il ne dispose que d'une poignée de composants et de cours à apprendre et qu'il vise à vous rendre productif le plus rapidement possible. Il existe peu d'options de personnalisation et Materialise suit le format de grille à 12 colonnes populaire établi par Bootstrap.

Si vous me demandez, cependant, un Conception matérielle devient si commun, et il en est ainsi. . . Par défaut, nous nous en plaindrons bientôt, comme nous le faisons à propos du problème de tous les sites Web de Bootstrap. Pourtant, c'est un bon cadre pour commencer.

Pure

Yahoo est-il mort?

Non, cette question n'est pas une diversion, mais met en évidence une observation importante: Yahoo a construit le Pur framework et l'a publié sous la licence BSD.

Un coup d'œil 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, eh bien, pure, c'est que c'est un pur Cadre CSS. 🙂 En fait, les développeurs ont fait un effort supplémentaire et l'ont divisé en différents modules CSS que vous pouvez importer selon vos besoins. Donc, si vous n'avez besoin que du système de grille, il n'est pas nécessaire d'importer le CSS entier et de l'ajouter au temps de chargement du site.

La grille Pure est disponible en plusieurs versions: 5 points, 2 points, 24 points, etc., donc quand il s'agit de créer des colonnes, vous avez beaucoup plus de flexibilité. 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 grincer des dents aux valeurs par défaut «utiles» fournies par d'autres frameworks.

Skeleton

Comme vous pouvez le voir sur la capture d'écran, Squelette est si minime qu'il ne s'appelle même pas un framework CSS, une bibliothèque ou même un module. Ses passe-partout, et 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 des projets minuscules ou petits qui n'ont besoin que de mises en page et de positionnement.

Vaut le détour; après tout, qui sait, Skeleton est peut-être ce que vous cherchiez depuis le début!

Milligram

Milligramme, un framework CSS conçu pour la vitesse et la productivité. Les développeurs l'ont gardé en dessous de 2 Ko, ce qui, selon les normes actuelles, signifie beaucoup.

Un milligramme est une petite interprétation amusante des frameworks CSS avec lesquels vous apprécierez de travailler. L'extension est facile, et avec quelques lignes de CSS personnalisé, vous pouvez modifier son apparence comme vous le souhaitez.

Tailwind CSS

Tailwind a préconisé un style d'écriture et d'utilisation de CSS qui a fait hurler de dégoût beaucoup. Je veux dire, regardez l'utilisation des classes CSS dans le morceau de code suivant (tiré du site 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 is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-cyan-600">
        Sarah Dayan
      </div>
      <div class="text-gray-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

Maintenant, si vous êtes développeur depuis plus de deux ans, vous ressentirez probablement des nausées. Alors . . . beaucoup . . . Des classes . . . ! Et bien qu'il n'y ait pas de CSS en ligne ici, c'est comme ça étant donné à quel point les noms de classe sont explicites (et moche?).

Donc, pendant un certain temps, Adam Wathan (le créateur de Tailwind) courait d'un pilier à l'autre (c'est-à-dire dans les podcasts, les conférences, les articles de blog, les tweets) pour expliquer pourquoi il pensait que le CSS basé sur l'utilité était supérieur au CSS sémantique.

Aujourd'hui, le CSS basé sur les utilitaires a fait une brèche considérable. Regardez ce code Bootstrap 5 et voyez comment les classes d'utilitaires sont devenues courantes:

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Grid item 1</div>
  <div class="p-2 bg-light border">Grid item 2</div>
  <div class="p-2 bg-light border">Grid item 3</div>
</div>

Après avoir parlé de la «vue d'ensemble» de Tailwind, passons aux avantages concrets qu'il offre:

Plus de productivité: Maintenant, la productivité est quelque chose dont nous pouvons discuter toute la journée et ne jamais atteindre nulle part; Cela dit, les développeurs qui ont adopté Tailwind exclusivement (en particulier pour les grands projets) se disent beaucoup plus productifs. Mais vous devrez investir des efforts soutenus dès le départ car Tailwind ne fonctionnera pour vous que lorsque vous aurez désappris les «meilleures pratiques» du passé.
Taille de paquet plus petite: Tailwind est plus ou moins JS manipulant CSS, donc certaines choses élégantes sont possibles. Par exemple, lorsque vous générez le projet, le compilateur peut supprimer tout le CSS inutile. C'est tout un contraste avec un projet Web typique utilisant le module CSS Bootstrap; dans ce cas, tout le CSS Bootstrap est emballé dans la dernière chose.
Configurable et personnalisable: Tailwind n'est pas seulement extrêmement modulaire mais est conçu pour mettre en évidence sa facilité de configuration et de personnalisation. Il n'y a rien de tel que «commencer 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 ressentirez de la frustration. Toi avons pour parcourir la courbe initiale d'apprentissage / d'ajustement avant de pouvoir dire «wow!».
Pas de dénomination ni de changement de contexte: L'une des plus grandes tâches des développeurs est de nommer les choses. Si le résultat final est appelé totalAmountForUnits or expensesAcrossUnits, par exemple. Le problème est encore plus sérieux 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 CSS pour voir le changement CSS. Avec Tailwind, les décisions de dénomination sont déjà prises pour vous, et comme vous ajoutez / supprimez toujours des classes du HTML, il n'y a aucun changement de contexte.
Réutilisation du code: Si vous vous retrouvez à «réutiliser» certaines classes utiles en les copiant-collant à travers les projets, Tailwind a une fonctionnalité appelée Composants pour résoudre ce problème avec élégance. En savoir plus sur cette fonctionnalité ici.

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

Tacit

Tacit est le projet parallèle de quelqu'un que j'ai rencontré en cherchant des choses intéressantes pour cet article. Ouais, tout simplement un projet parallèle; rien de plus que le travail d'une personne en fonction de ses goûts.

Pourquoi est-ce que j'insiste autant?

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

Alors, quel est exactement ce truc tacite?

Comme le montre la capture d'écran, Tacite est pour ceux qui ne connaissent pas CSS ou qui ont un mauvais goût en design. L'idée est nouvelle: ajoutez le lien CSS à votre projet et vous obtiendrez instantanément un superbe site Web! Mais assurez-vous de tenir votre promesse: n'ajoutez jamais d'autres CSS ou ne mélangez jamais des éléments d'autres frameworks, car cela casserait gravement les choses.

Et un site Web 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 encore plus agréable que Semantic UI, l'un des frameworks / bibliothèques CSS les plus populaires! Sans entrer dans une guerre des 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. 🤪

Dans tous les cas, permettez-moi d'ajouter quelques captures d'écran de l'aspect et de la convivialité 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, polices, styles, etc., sont excellents par défaut, Tacite sera un soulagement bienvenu.

Spectre

Moderne, flexible, léger - si vous cherchez quelque chose avec ces attributs, Spectre vaut le coup d'œil.

Laissez-moi vous 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 CSS moderne nous ait données. Simultanément, de nombreuses installations et outils trouvés dans le CSS moderne workflows ou d'autres cadres sont également inclus.
Flexible: Vous pouvez écrire le framework CSS le plus modulaire et le plus avancé, mais il est peu utile s'il ne l'est pas même personnalisable. J'aime la façon dont la personnalisation est mentionnée tout en haut de leurs documents; suivez le terrier du lapin, et vous trouverez explications.
Poids léger: Nous sommes à une époque où les préoccupations concernant les performances du Web sont en plein essor; chaque kilo-octet transféré est examiné et critiqué. En tant que tel, Spectre enveloppe tout dans un joli paquet de 10 Ko, ce qui ne devrait pas être «trop» pour nous tous. 😝

Ê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, fil d'Ariane, cartes, etc.), éléments (formulaires, tableaux, boutons, etc.), mise en page (grilles, section héros, barre de navigation, etc.), utilitaires (chargeurs, fileurs, etc.), et plus encore.

Qu'est-ce que je pense de Spectre? Je suis plus ou moins vendu, mais il y a deux choses que je veux mentionner. Premièrement, je n'aime pas trop 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 étrange de faire toutes les choses de mise en page, donc j'aurais aimé que Spectre ait utilisé Grid au lieu de Flexbox.

Mais ce n'est guère un facteur décisif si je suis capable de développer rapidement et d'obtenir de bons résultats. Alors, je vais vous dire allez-y et essayez Spectre sans crainte!

Primer

Primer est pas un framework ou une bibliothèque CSS. Ce n'est même pas une collection de classes CSS ou une autre torsion étrange de la terminologie.

Alors pourquoi est-il sur cette liste? Deux raisons:

It a un framework CSS.
C'est l'une des choses les plus complètes et les plus époustouflantes que vous ayez jamais vues.

Oui, comme le montre la capture d'écran, Primer est un système de conception développé par GitHub pour leur propre usage. Finalement, ils ont réalisé que cette chose était puissante et extrêmement utile pour le frontend et le travail visuel; donc, ils l'ont rendu open source.

J'ai eu du mal à trouver les bons mots pour décrire Primer. Leur propre équipe du système de conception l'appelle. . . Eh bien, oui, un système de conception, mais je pense que la portée est beaucoup plus large que ce que nous entendons lorsque nous disons «système de conception».

Apprêt comprend de nombreux éléments dont l’importance n’est peut-être pas immédiatement évidente. Au moins pour les développeurs backend / full-stack. Alors regardons ce que ces choses spéciales sont 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 ajoutez trois autres personnes à l'équipe - et des personnes compétentes et qui réussissent - et vous verrez comment tout commence à se dégrader. La raison en est l'absence de lignes directrices clairement définies et strictement appliquées - afin que chacun sache quoi faire dans chaque type de situation. L'apprêt est livré avec un bel ensemble de lignes directrices que vous pouvez soulever ou adapter à vos besoins.
Composants Figma: Même si je suis développeur, j'en connais suffisamment sur la conception pour comprendre que ne pas avoir une référence / utilisation claire des composants peut devenir incontrôlable à mesure que le projet avance. À quoi doit ressembler le bouton lorsqu'il est enfoncé en mode sombre, par exemple? Si personne n'a documenté cela et qu'il y a une pression pour livrer, vous aurez plusieurs variantes. Et donc, les gens de Primer ont fourni leur propre Figma composants afin que nous puissions apprendre et faire mieux.
Cadre CSS: Enfin, la chose qui a gagné Apprêt une place sur cette liste! 😄 Primer dispose d'un cadre CSS modulaire de style BEM qui fournit des styles distincts pour les pages produit et marketing. C'est quelque chose que GitHub a fait pour leur commodité, et vous êtes libre de ne pas y toucher ou d'accepter la philosophie globale telle qu'elle est. Même si ce n'est que le CSS qui vous intéresse, je vous recommande de jeter un œil ici.
Icônes (octicons): Chaque système de conception cohérent a sa propre vision des icônes. Pour Apprêt, la réponse est Octicons. Il n'y a pas trop d'icônes, apparemment. Pourtant, je mets cela plus haut dans la liste parce que les icônes font partie des fondamentaux absolus: si tout correspond, mais quelques icônes ne le font pas, le résultat est une interface utilisateur qui vous donne une conjonctivite. 😝
Composants React: Et bien sûr, puisque React est la bibliothèque frontend la plus populaire, les gens de GitHub ont codé les éléments CSS comme React composants électriques , qui sont maintenant disponibles pour nous tous!
Présentations: Cette partie de la Apprêt est tout au sujet du langage de conception à utiliser lors de la présentation au public (tel qu'utilisé par les gens de GitHub en interne). Polices, couleurs, bordures, contrastes - toutes les décisions ont déjà été prises. Vous êtes libre d'étudier leur lignes directrices et développez le vôtre.

Le plus grand avantage de Primer vient de l'embrasser dans son ensemble. Cela n'est peut-être pas possible pour tout le monde, et certains peuvent même trouver que leur langage de conception entre 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 courent avec.

Peu importe où vous vous situez sur ce spectre, Primer a quelque chose à vous offrir : soit des composants de système de conception réutilisables et de haute qualité, soit des pistes de réflexion pour vos propres processus et directives !

Fictoan

fictif est un cadre intuitif pour les concepteurs 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 doivent contrôler entièrement l'expérience utilisateur et l'interface utilisateur. D'autre part, les développeurs doivent se concentrer sur les performances et des éléments tels que le déploiement.

Pourquoi utiliser Fictoan ?

Une variété de composants : Fictoan a des centaines de composants qui sont classés en différentes catégories. Par exemple, si vous recherchez un formulaire, il existe plus de dix modèles.
Open source: Fictoan est gratuit et vous pouvez trouver le code sur GitHub.
Accessible: La plate-forme est conçue avec un fort 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 montrer comment cela fonctionne. Utilisez cette commande ;

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

  Button

</Button>

Personnalisation facile : Vous pouvez personnaliser le code ci-dessus en fonction de vos besoins.

Inconvénients du Fictoan

Toujours nouveau : Le 21 juin 2020, la première version a été poussée sur GitHub. La plate-forme compte moins de 10 fourches et a encore un long chemin à parcourir pour attirer les masses.
Fonctionnalités limitées : Même si Fictoan a des conceptions modernes étonnantes, il reste encore un long chemin à parcourir pour rivaliser avec d'autres, comme Bootstrap, en termes de fonctionnalités.
S'appuie sur les dépendances : Fictoan dépend de certaines bibliothèques, telles que styled-components Pour fonctionner. Avoir autant de dépendances peut entraîner une grande taille d'application.

Vanilla

Vanille est un cadre CSS simple et extensible écrit dans des feuilles de style syntaxiquement impressionnantes (Sass), un exposant de CSS. La vanille est utilisée dans la plupart Canonique produits, comme Ubuntu et JAAS.

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

yarn add vanilla-framework

npm install vanilla-framework

Alternativement, vous pouvez ajouter un lien CDN dans le <head> section 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 la Vanille ?

Il est réactif : Les applications conçues à l'aide de Vanilla Framework répondent à différentes tailles d'écran, telles que les smartphones et les ordinateurs personnels.
Écrit en sas : Sass fait la définition variables et mixins dans votre CSS code facile.
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'intégralité du framework dans votre projet.
Open source: Le code source est open source, créé et maintenu par l'équipe Web Canonical.

Inconvénients de l'utilisation de la vanille

Niveaux de personnalisation limités : Vanilla peut ne pas offrir les niveaux de personnalisation que certains développeurs peuvent souhaiter.
Documents limités : Comparée à d'autres frameworks CSS, tels que Foundation et Bootstrap, la documentation de Vanilla n'est pas aussi complète.
Absence d'une communauté dynamique : Vanilla n'a pas une grande communauté par rapport aux autres frameworks.

Alors, quel framework CSS est le meilleur?

Admettez-le, vous avez déjà posé des questions similaires et reçu la réponse décevante suivante: aucune. 😀 Sélection d'un cadre (ou d'un outil, ou même une personne dans votre vie, d'ailleurs) dépend de nombreux facteurs.

Si vous voulez mon conseil, le voici : coupez le bruit. Ce n'est pas parce que les gens deviennent fous de quelque chose de nouveau et brillant que vous devez l'apprendre ou vous serez laissé pour compte. Essayer de nouvelles choses, c'est bien, mais tourner en rond à la recherche de l'outil parfait est, eh bien, un gaspillage.