10 meilleurs cadres CSS pour les développeurs frontaux

J’ai entendu une fois une blague de développeur front-end: «La NASA a fait atterrir des robots sur Mars, et ici, nous avons encore du mal à centrer nos divisions!» Et ça me fait mal de voir que cette blague contient beaucoup de vérité. Faire quelque chose qui semble aussi simple et axé sur le bon sens que centrer une boîte dans une boîte est incroyablement difficile à travailler en CSS. Sauf si vous l’avez déjà rencontré. Et enregistré l’extrait de code quelque part. Et même si vous parvenez à le retirer, il y a toujours la crainte qui se cache qu’il pourrait se casser horriblement sur un navigateur stupide quelque part! Liens CSS 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 si pleine de contradictions que personne n’ose se dire un “expert CSS”.


Pas étonnant, alors, que les frameworks CSS aient émergé au fil du temps et aient enlevé la plupart 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 frontal, quel cadre devrait vous aider à choisir?

Cet article jette un coup d’œil sur le paysage du développement frontal et compare les précurseurs parmi les cadres CSS. Donc, si vous en avez assez des règles CSS à codage manuel, plongez pour un soulagement rapide!

Amorcer

Une initiative de Twitter, Amorcer est à l’origine de l’introduction à grande échelle d’un design réactif. Ce fut le premier cadre à promouvoir la philosophie du «mobile-first». Ne concevait plus pour de plus petites tailles d’écran 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 atteint 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 «cases» que vous souhaitez positionner côte à côte sur de grands écrans, mais verticalement sur des écrans plus petits, voici ce que vous devriez faire:

Une des trois colonnes

Une des trois colonnes

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 entraînait 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 nécessite une familiarité avec Flexbox.

Bootstrap Pros

Il y a beaucoup à aimer à propos de Bootstrap, en particulier pour les développeurs de pile complète:

  • Prototypage rapide: Avec Bootstrap, il n’est presque pas nécessaire de réfléchir sur le positionnement CSS délicat et les incompatibilités de navigateur. Tout ce que vous devez faire pour écrire le code HTML, puis appliquer les classes CSS appropriées fait que la réactivité prend 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., construits à l’aide de Bootstrap est ahurissant et continue de s’améliorer. Pour les consultants et les sociétés de produits, cela signifie que les articles préconstruits et le soutien de la communauté seront toujours nombreux.
  • Soutenu par Twitter: Une tendance émergente dans l’open source est la montée en puissance de 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 clients d’entreprise) que le projet aura une feuille de route claire et un avenir à long terme.
  • Grande collection de composants: Bootstrap offre, prêt à l’emploi, 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 la nécessité d’avoir une équipe front-end dédiée.
  • Prise en charge LESS et SASS: Parmi les frameworks CSS très populaires, Bootstrap est le seul qui prend en charge LESS et SASS. Oui, je sais, vous n’utilisez pas LESS (comme aucun développeur qui se respecte ne devrait, non?), Mais bon, il y a des projets massifs qui dépendent de LESS. Bien sûr, vous ne pouvez choisir ni écrire ni é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 est tombé sous le feu des concepteurs et des experts de l’interface utilisateur. Voici pourquoi:

  • Monotonie UX: Le fait même que Bootstrap ait une si grande collection de résultats intégrés donne des sites Web trop familiers et honnêtement ennuyeux. Il vous suffit de vous diriger vers le exemples officiels pour voir à quel point les yeux par défaut sont horribles. Recherchez simplement «tous les sites Web d’amorçage se ressemblent» et vous comprendrez ce que je veux dire. ��
  • Malheurs de style: Bootstrap est ce qui pourrait être considéré comme un cadre d’opinion. En d’autres termes, il a des idées sur les mises en page et vous fait travailler très dur si vous voulez qu’il ressemble / se comporte différemment. 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 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 du 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, etc..

Vouloir maîtriser le Bootstrap? Regarde ça cours en ligne par Brad Traversy.

Fondation

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

Dirigez la Fondation site Internet, et vous ne pouvez pas vous empêcher de remarquer la signature: “Le cadre frontal réactif le plus avancé au monde.” À première vue, cela ressemble à une grande revendication pour 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. La fondation a été développée pour aller naturellement avec le cadre Rails, et plusieurs des principes directeurs «zen» de Rails peuvent être vus au travail.

Par exemple, si vous vouliez une ligne contenant deux éléments sur de petits écrans, trois sur des écrans moyens et quatre sur de grands écrans, 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. Plus de douze grilles de colonnes et de déterminer ce que 4/12 est censé être!

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

Avantages du Framework Foundation

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

  • Outillage complet: Il est techniquement erroné de dire que Foundation est un framework CSS. Je veux dire, c’est vrai, mais il a été conçu comme une grande collection modulaire d’outils qui vise à résoudre presque toutes sortes de problèmes frontaux. Il existe des offres de framework 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 bundles de modules.
  • Flexibilité extrême: Contrairement à Bootstrap, Foundation a été conçu pour donner au développeur frontal un contrôle total sur leurs 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 possè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 prix), la validation de formulaire, la prise en charge de droite à gauche, des intégrations réactives, etc. Je voudrais souligner encore une fois que c’est une surpuissance 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, il s’agit d’un projet parallèle et d’une très petite partie de l’image globale. La société derrière Foundation (ZURB), cependant, s’est engagée à l’utiliser, à la développer et à la promouvoir. Des cours de formation et des conseils professionnels sont proposés aux grands clients, ce qui est idéal pour les entreprises qui ciblent des projets massifs et sont disposées à payer.

Inconvénients du Framework Foundation

Les points forts d’un cadre deviennent ses faiblesses du point de vue opposé. Voici pourquoi la Fondation n’est peut-être pas le meilleur choix pour votre projet:

  • Petite (er) communauté: La communauté Foundation est beaucoup plus petite que celle de Bootstrap, et si vous essayez quelque chose d’exotique et que vous êtes coincé, les chances de trouver de l’aide pertinente 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 Bootstrap, donc vous pourriez ne pas trouver de solutions instantanément.
  • Complexité: Si vous avez l’habitude de Bootstrap ou quelque chose de simple, ou pire, de 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 pas être blâmé pour cela.
  • Trop d’options: Parfois, vous voulez juste faire de la merde et vous soucier de la perfection plus tard. Pendant ces périodes, il est frustrant de se voir proposer 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 est beaucoup moins. En règle générale, toute nouvelle recrue 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 avoir.

Bulma

Bulma est un nouvel entrant 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 les valeurs par défaut élégantes, ce que de nombreux développeurs ayant un bon œil pour la conception ont un problème lors de l’utilisation de Bootstrap.

Une grande partie de l’élan de Bulma provient des taux élevés d’adoption avec la communauté Laravel (un framework Web PHP, au cas où vous ne le saviez 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 plusieurs 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 de l’écriture, Bulma a 30k + étoiles sur Github, environ 3k + de plus que les fondations. Bien sûr, un certain nombre d’étoiles Github n’est pas une mesure de mérite, mais cela dit que la communauté approuve Bulma.
  • Classes extrêmement lisibles: Bulma, pour moi, possède 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’un arrière-plan décent en CSS est toujours bon d’avoir une idée de ce qui pourrait se passer sous le capot. Cela vous aidera lorsque vous souhaitez remplacer le comportement par défaut.
  • Élégant: Eh bien, jetez un œil à la section Héros par défaut pour Bulma ci-dessous. Assez dit!

Bulma a une petite, mais une communauté extrêmement passionnée, donc si vous voulez vous débarrasser de tout le fluff et que vous souhaitez 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 convaincre et les aider à migrer.

UIkit

La chose qui me vient à l’esprit en pensant à UIkit c’est le minimalisme. Le minimalisme n’est pas dans les fonctionnalités (en fait, il offre peut-être la plupart des fonctionnalités de tous les cadres), mais dans la conception. Si les designs super propres, élégants et non-blancs sont votre truc, UIkit vous a couvert.

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

Ou le composant marqueur d’image (un marqueur interactif JS pour les images):

Ou même l’humble formulaire HTML:

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

Mais y a-t-il un hic, 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, l’utilisation d’un framework 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 faire d’efforts considérables.

UI sémantique

Un autre concurrent dans la course est UI sémantique, qui essaie de se distinguer avec beaucoup de thèmes et de personnalisation. Il y a plus de 3000 variables de thème, ce qui donne une ampleur considérable. Ou alors, les docs disent.

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 donne par défaut de belles dispositions. Pourtant, ce n’est pas le plus beau 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 ça ressemble à quelque chose que vous préféreriez.

Susy

Susy est un cadre peu connu à ce stade, mais c’est une idée fascinante et rafraîchissante. Autre cadre de mise en page pure, Susy supprime toutes les idées prédéfinies de flotteur, de grille, de Flexbox, de tableaux ou tout autre chose, et vous permet de composer le type de mise en page que vous souhaitez. «Composer» 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 fluides
// les gouttières mesurent 1/4 de la taille d’une colonne
// les éléments s’étendent sur 1 gouttière de moins que les colonnes
// les conteneurs couvrent également 1 gouttière de moins
$ susy: (
‘colonnes’: susy-repeat (4),
«gouttières»: 0,25,
«propagation»: «étroit»,
«propagation de conteneurs»: «étroit»,
);

Je pense que le code est assez explicite, mais ce n’est pas pour ceux qui sont pressés. �� Susy est parfaitement logique si vous êtes fatigué de tous les ballonnements que les cadres modernes vous imposent, et que vous avez des besoins de mise en page que vous ne connaissez aucun cadre ordinaire ne peut servir.

Se concrétiser

Si vous êtes amoureux de la conception matérielle de Google, Materialise est un cadre vous apprécierez. La meilleure chose est qu’il n’a qu’une poignée de composants et de classes à apprendre et se concentre sur votre productivité 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 est ainsi. . . Par défaut, nous nous en plaindrons très bientôt, comme nous le faisons pour le problème de tous les sites Web de Bootstrap. Pourtant, c’est un bon 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 Cadre pur et publié sous licence BSD.

Un regard 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, eh bien, pur, c’est que c’est un framework CSS pur. �� En fait, les développeurs ont fait un effort supplémentaire et l’ont divisé en différents modules CSS que vous pouvez importer au besoin. Donc, 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 d’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 cadre CSS le plus beau 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 les dents par défaut «utiles» avec d’autres cadres.

Squelette

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. C’est 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 petits ou petits qui nécessitent un peu plus que des mises en page et un positionnement.

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

Milligramme

Le dernier sur la liste est Milligramme, un framework CSS conçu pour la vitesse et la productivité. Les développeurs l’ont gardé sous 2 Ko, ce qui, selon les normes d’aujourd’hui, signifie beaucoup.

Un milligramme est une petite version amusante des frameworks CSS avec lesquels vous aimerez travailler. Son extension est facile et avec quelques lignes de CSS personnalisées, vous pouvez changer son apparence comme vous le souhaitez.

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. �� La sélection d’un cadre (ou d’un outil, ou même d’une personne dans votre vie, d’ailleurs) dépend de nombreux facteurs. Si vous voulez mon avis, le voici: Coupez le bruit. Ce n’est pas parce que les gens deviennent fous de quelque chose de nouveau et de brillant que vous devez l’apprendre ou vous serez laissé pour compte. Essayer de nouvelles choses est formidable, mais tourner en rond à la recherche de l’outil parfait est, bien, un gaspillage.

Alors, lequel de ces cadres avez-vous essayé? Ou peut-être quelque chose d’étonnant là-bas que je viens de manquer? Faites-le moi savoir dans les commentaires, s’il vous plaît. Amour, haine, salut aléatoire, tous sont les bienvenus!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map