In Développement | Dernière mise à jourated: le 8 novembre 2023

Logiciel Jira est l'outil de gestion de projet n°1 utilisé par les équipes agiles pour planifier, suivre, publier et prendre en charge d'excellents logiciels.

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

By Ankush

Meilleures bibliothèques de frameworks 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 un box dans un box est incroyablement difficile à travailler en CSS. Sauf si vous l'avez déjà rencontré. Et j'ai enregistré l'extrait de code quelque part. Et même si vous parvenez à y parvenir, il y a toujours la peur cachée qu'il puisse se briser horriblement sur un stupide b.rowseuh quelque part !

CSS est à égalité avec JavaScript pour la première place des « maux nécessaires du Web ». C'est une norme qui a évolué au hasard, a été interprétée différemment par différents browser fabricants, et est maintenant si plein 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 s'attribue le mérite d'avoir introduit le design réactif à grande échelle. Il s'agit du premier cadre à promouvoir la philosophie du « mobile-first ». La conception pour des écrans de plus petite taille n'était plus une séparationate projet dedansself; tout ce que vous aviez à faire était d'inclure les classes Bootstrap pertinentes, et la conception serait automatique.ally s'adapter à 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 en avez trois "boxes » que vous souhaitez positionner côte à côte sur de grands écrans, mais verticalementally 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 Fléchirbox et d'autres fonctionnalités de mise en page modernes prises en charge par browsers directement. 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

faire en sorte qu'un div en prenne un-third 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, même si elle nécessite une familiarité avec Flexbox.

Avantages de Bootstrap

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

Prototypage rapide: Avec Bootstrap, il n'est presque pas nécessaire de réfléchir à un positionnement CSS délicat et à browseuh incompatibilités. Tout ce que vous avez à faire est d'écrire le code HTML, puis d'appliquer le code approprié.ate Les classes CSS provoquent la réactivité alive.
Large ecossystème : À ce jour, Bootstrap possède le plus grand ecossystème parmi les frameworks front-end. 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 comme pour les sociétés de produits, cela signifie que les éléments prédéfinis et le soutien de la communauté seront toujours suffisants.
Soutenu par Twitter: Une tendance émergente dans l'open source est la rise de projets parrainés par une entité commerciale. Le plus souvent, ces entités construisent profitentreprises compétentes autour de leur offre. Kotlin (JetBrains), Outils de gestion (Automattic, Inc.), Angular (Google), React (Facebook), etc., en sont quelques exemples. Lorsqu'un projet est soutenu par une entité établie et n'est pas le fruit d'une seule personne, il donne confiance à la communauté (en particulierally l'entrepriserise clients) que le projet aura une feuille de route claire et un avenir à long terme.
Une grande collection de composants: Offres Bootstrap, hors du box, presque tous les composants d'interface utilisateur dont vous aurez probablement besoin. Navigation, formulaires, cartes, modaux, boutons, badges, barres de progression, alertes. . . Vous le nommez, et Bootstrap l'a. Pour de nombreuses entreprises, cette pratiqueally réduit le besoin d'avoir un dédiéated équipe front-end.
Prise en charge de LESS et SASS: Parmi les frameworks CSS extrêmement populaires, Bootstrap est le seul à prendre en charge à la fois LESS et SASS. Oui, je sais, vous n'utilisez pas MOINS (car non self-le développeur qui respecte devrait le faire, 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 bruts.

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 qui pourrait être considéré comme une opinionated cadre. En d’autres termes, il a des idées de mises en page et vous fait travailler extra difficile si vous voulez qu'il ait une apparence/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 px. Et que se passe-t-il si vous souhaitez cibler, par exemple, la limite de 600 px ? Eh bien, bonne chance avec ça ! C'est la même chose avec presque tous les autres composants du bootstrap : rows et les conteneurs ont leur remplissage par défaut, les boutons ont des couleurs et des bordures très difficiles à remplacer sans beaucoup de travail, etc.

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

Fondation

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 , 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 adeptes du cadre de la Fondation savent qu’il y a au moins une part de vérité là-dedans. La Fondation a été développée pour aller à la natureally avec le framework 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: C'est techniqueally c'est faux de dire que Foundation est un framework CSS. Je veux dire, c'est le cas, mais il a été construit comme une vaste collection modulaire de outils qui vise à résoudre presque toutes sortes de problèmes frontaux. Il y a des séparationsate offres de framework pour sites Web et 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 bundlers 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, pendant que Bootstrap est crééated par Twitter, c'est un projet parallèle et une très petite partie de l'image globale. L'entreprise à l'origine de la Fondation (ZURB) s'engage cependant à 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 ressemblera à une explosion infinie de complexité. Calques dans les calques, composants avec composants, options de personnalisation infinies. . . Bientôt, vous commencerez à remettre en question l'utilité de la vie.self! Mais là encore, Foundation a un objectif très différent et on ne peut pas lui en vouloir.
Trop d'options: Parfois tu veux juste faire des trucs et te soucier de la perfection later. Dans de telles périodes, il est frustrant de se voir proposer trop 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. Natureally, Foundation 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 nomself dans un court laps de temps. C'est attractL'efficacité réside dans une approche stricte, uniquement CSS (il n'y a pas de composants JavaScript), et dans des valeurs par défaut élégantes, ce qui pose problème à de nombreux développeurs ayant un bon sens du design lorsqu'ils travaillent avec Bootstrap.

Une grande partie de l'élan de Bulma vient de la haute rates d'adoption avec la communauté Laravel (un framework Web PHP, au cas où vous ne le sauriez pas), ce qui, j'en suis sûr, est en grande partie ce qui a aidé Vue.js rise aux 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ééeated pour résoudre les problèmes pratiques 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 souhaiterez 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 petite mais extrêmement passionate communauté, donc si vous voulez vous débarrasser de toutes les peluches tout en créant des interfaces utilisateur élégantes en un temps record, Bulma est la voie à suivre. Pour les développeurs Bootstrap, Bulma a un espace séparéate rubrique pour les convaincre et les aider à migrerate plus de.

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 remporte la couronne en matière de conception d'interface utilisateur et a plusieurs kilomètres d'avance sur M de Google.ateConception Rial.

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 self-système confiné, et vous ne pourrez pas le modifier ou l'étendre sans y consacrer des efforts considérables. effort.

UI sémantique

Un autre concurrent dans la course est UI sémantique, qui tente de le distinguerself avec beaucoup de thèmes et de personnalisation. Il existe plus de 3000 XNUMX variables thématiques, 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 en résulte nice-mises en page par défaut. Pourtant, ce n'est pas le plus beau des box, c'est pourquoi je l'ai mis later en bas de 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 framework peu connu à ce stade, mais c'est une idée fascinante et rafraîchissante. Autre framework purement layout, Susy supprime toutes les idées prédéfinies de float, grille, Flexbox, des tables ou 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 trouve que le code est joli self-explicatif, même si ce n'est pas pour ceux qui sont pressés. 🙂 Susy est parfaitement logique si vous êtes fatigué de toute la surcharge que les frameworks modernes vous imposent et que vous avez des besoins de mise en page que vous savez qu'aucun framework ordinaire ne peut répondre.

Materialiser

Si vous êtes amoureux du M de GoogleateRial Design, Materialiser est un cadre vous apprécierez. La meilleure chose est qu'il ne comporte qu'une poignée de composants et de classes à apprendre et qu'il vise à vous aider à apprendre. productive aussi vite que possible. Il existe peu d'options de personnalisation, et Materialize suit le format de grille populaire à 12 colonnes établi par Bootstrap.

Si vous me demandez, cependant, un Mateconception Rial devient si courant, et c’est ainsi. . . Par défaut, nous nous en plaindrons très bientôt, comme nous le faisons à propos du problème de tous les sites Web de Bootstrap. C'est quand même un nice cadre pour commencer.

Pur

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 le maximum extra mile et l'a 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 l'intégralité du CSS 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.

Squelette

Comme vous pouvez le voir sur la capture d'écran, Squelette est si minime qu'il ne l'appelle même pasself un framework CSS, une bibliothèque ou même un module. C'est chaudièreplate, 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!

Milligramme

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 version amusante des frameworks CSS que vous apprécierezate travailler avec. L’étendre est simple et avec quelques lignes de CSS personnalisé, vous pouvez modifier son apparence comme vous le souhaitez.

CSS de Tailwind

Tailwind défenseurateun style d'écriture et d'utilisation de CSS qui a fait hurler de dégoût beaucoup de gens. Je veux dire, regardez l'utilisation des classes CSS dans le morceau de code suivant (tiré du site Web 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 des utilitaires a fait une brèche considérable. Regardez ce code Bootstrap 5 et voyez comment prevLes différentes classes utilitaires sont devenues :

<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é: Aujourd’hui, la productivité est un sujet sur lequel nous pouvons discuter toute la journée sans jamais aboutir à quelque chose ; cela dit, les développeurs qui ont adopté Tailwind exclusivement (notammentally pour les grands projets) disent qu'ils sont beaucoup plus productive. Mais il faudra investir de manière soutenue effort 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 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 dénomination sont déjà prises pour vous, et comme vous ajoutez/supprimez toujours simplement des classes du HTML, il y a zero changement de contexte.
Réutilisation du code: Si vous trouvez votreself En « réutilisant » certaines classes utiles en les copiant-collant dans des projets, Tailwind dispose d'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.esperatevraiment nécessaire. Si vous en avez assez de votre bibliothèque CSS actuelle et que vous souhaitez essayer quelque chose de radical et de nouveau, Tailwind est ce que vous recherchez !

Tacite

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 ce genreally signifie 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 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 ; quoiatele style que vous utilisez aujourd'hui sera pris en charge par browsers depuis 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 design choisi est « très bon ». Actually, je le trouve encore plus agréable que Semantic UI, l'un des frameworks/bibliothèques CSS les plus populaires ! Sans me lancer dans une guerre des flammes et faire des comparaisons de captures d'écran côte à côte, je laisserai tomber le sujet en disant que le design est subjectif. Mais vous pouvez comparer et décider pour votreself. 🤪

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, ce qui fait partie des meilleures choses que le CSS moderne nous a apportées. Simultaneogénéralement, de nombreuses fonctionnalités 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 lapinbit trou, et vous trouverez de nombreux 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 convaincu, mais il y a quelques choses que je veux mentionner. Premièrement, 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 CSS Grid est le meilleur outil pour les mises en page ; Je trouve Flexbox a bit étrange de faire toutes les choses de mise en page, donc j'aurais aimé que Spectre utilise 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!

Apprêt

Primer est ne sauraient 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 dit la capture d'écran, Primer est un système de conception développé par GitHub pour leur propre usage. Événementally, ils ont réalisé que cette chose était puissante et extrêmement utile pour le travail frontend et visuel ; alors, 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 beaucoup de choses dont l'importance n'est peut-être pas immédiateatetrès évident. Au moins pour les développeurs backend/full-stack. Voyons donc quelles 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 ajoutez trois personnes supplémentaires à l’équipe – et des personnes compétentes et performantes en plus – et vous verrez comment tout commence à se dégrader. La raison en est le manque 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 nice ensemble de lignes directrices que vous pouvez soulever ou adapter à vos besoins.
Figma Composants: 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: finally, la chose qui a gagné Apprêt une place sur cette liste! 😄 Primer dispose d'un framework CSS modulaire de style BEM qui fournit des séparationsate styles 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 c'est juste le CSS qui vous intéresse, je vous recommande d'y jeter un oeil 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 tout dépend du langage de conception à utiliser lors de la présentation au public (tel qu'utilisé par les gens de GitHub). internally). 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.

Quelle que soit votre position sur ce spectre, Primer a quelque chose à vous offrir : soit vous recevezsable, des composants de système de conception de haute qualité ou des éléments de réflexion pour votre propre processes et directives!

fictif

fictif est un framework intuitif pour les concepteurs Web qui souhaitent créer des interfaces utilisateur. Le cadre a été crééated pour brouiller les frontières entre les développeurs et les designers.

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 possède des centaines de composants classés en différents categories. 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 platLe formulaire est conçu en mettant fortement 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ééated pour les projets React.

Vous pouvez créerate une application React simple à démontrerate Comment ça 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éerate 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é transférée sur GitHub. Le platle formulaire a moins de 10 fourchettes et a encore un long chemin à parcourir attract 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.

Vanille

Vanille est un framework CSS simple et extensible écrit en syntaxiqueally Awesome Style Sheets (Sass), un exposant de CSS. La vanille est utilisée dans la plupart Canonique produits, comme Ubuntu et JAAS.

Pour commencer à utiliser Vanilla, créezate un fichier de projet et la navigationate dans ça. 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.
Plusieurs browsLes utilisateurs soutiennent : Vous pouvez utiliser les applications Vanilla sur différents browstels 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ééated et maintenu par l'équipe Web canonique.

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.

Publié dans