Les 5 cadres de front-end les plus populaires comparés –

Il existe aujourd'hui un déluge de frameworks frontaux CSS. Mais le nombre de très bons peut être réduit à quelques-uns. Dans cet article, je comparerai ce que je pense être les cinq meilleurs frameworks frontaux disponibles à ce jour.

Chaque framework a ses propres forces et faiblesses, et des domaines d'application spécifiques, vous permettant de choisir en fonction des besoins d'un projet spécifique. Par exemple, si votre projet est simple, il n’est pas nécessaire d’utiliser un cadre complexe. De plus, la plupart des options sont modulaires, ce qui vous permet d’utiliser uniquement les composants dont vous avez besoin ou même de combiner des composants provenant de différents environnements frontaux.

popularité, en commençant par le plus populaire, qui est, bien sûr, Bootstrap.

Notez que certaines des informations ci-dessous seront obsolètes à partir du moment de la publication – comme les étoiles GitHub et les numéros de version – alors soyez sachez cela si vous lisez cet article longtemps après la date de publication. Notez également que les tailles de structure sont les tailles miniatures des fichiers CSS et JavaScript nécessaires.

1. Bootstrap

Bootstrap est le leader incontesté parmi les frameworks frontaux disponibles aujourd'hui. Compte tenu de son énorme popularité, qui ne cesse de croître chaque jour, vous pouvez être sûr que cette merveilleuse boîte à outils ne vous fera pas défaut ou vous laissera seul sur la voie de la création de sites Web réussis.

• Créateurs: Mark Otto et Jacob Thornton .
• Sortie: 2011
• Version actuelle: 4. *. *
• Popularité: 126 202 étoiles sur GitHub
• Description: "Cadre frontal élégant, intuitif et puissant pour un développement web plus rapide et plus facile."
• Concepts fondamentaux: RWD et le premier mobile.
• Taille de l 'infrastructure: 592 Ko (dossier zip précompilé)
• Préprocesseur: Sass
• Adaptatif: Oui
• Modulaire: Oui
• Modèles / mises en page de départ: Oui
• Jeu d'icônes: Non compris
• Suppléments / Suppléments: Aucun regroupement, mais plusieurs tiers
• Composants uniques: Jumbotron, Card
• Documentation: Excellente
• Personnalisation: Option pour fichiers séparés pour le système Grid et Reboot, personnalisation facile avec Sass;
• Support du navigateur: Dernières versions de Firefox, Chrome, Safari, IE810-11-Microsoft Edge.
• Licence: MIT

Notes sur Bootstrap

Bootstrap est sa grande popularité. Techniquement, ce n'est pas nécessairement mieux que les autres dans la liste, mais il offre beaucoup plus de ressources (articles et didacticiels, plugins et extensions tiers, générateurs de thèmes, etc.) que les quatre autres frameworks frontaux combinés. En bref, Bootstrap est partout . Et c'est la raison principale pour laquelle les gens continuent à le choisir.

Note: En disant "composants uniques", je veux dire qu'ils sont uniques comparés aux frameworks frontaux mentionnés dans cette liste.

2. Fondation par ZURB

Foundation est le deuxième grand acteur dans cette comparaison de framework front-end. Avec une entreprise solide comme ZURB ce cadre a une base vraiment solide … et bien. Après tout, Foundation est utilisé sur de nombreux grands sites Web, dont Facebook, Mozilla, Ebay, Yahoo! et National Geographic, pour n'en nommer que quelques-uns.

• Créateurs: ZURB
• Sortie: 2011
• Version actuelle: 6
• Popularité: 27, 497 étoiles sur GitHub
• Description: "Le cadre frontal réactif le plus avancé au monde"
• Concepts de base: RWD, mobile d'abord, sémantique
• Taille de l'infrastructure: 233 Ko
• Préprocesseurs: Sass
• Adaptatif: Oui
• Modulaire: Oui
• Modèles de démarrage / mises en page: Oui
• Jeu d'icônes: Fontes d'icônes de base
• Suppléments / Add-ons: Oui
• Composants uniques: Barre d'icônes , Joyride, Tableaux de prix
• Documentation: Bon, avec de nombreuses ressources supplémentaires disponibles.
• Personnalisation: Basique Personnaliseur graphique
• Support du navigateur: Chrome, Firefox, Safari, IE9 +; iOS, Android, Windows Phone 7+
• Licence: MIT

Notes sur la fondation

Foundation est une infrastructure frontale véritablement professionnelle avec un support métier, des formations et des conseils. Il fournit également de nombreuses ressources pour vous aider à apprendre et à utiliser le cadre plus rapidement et plus facilement.

3. UI sémantique

L'interface utilisateur sémantique est un effort continu pour rendre la création de sites Web beaucoup plus sémantique. Il utilise les principes du langage naturel, rendant ainsi le code beaucoup plus lisible et compréhensible.

• Créateur: Jack Lukic
• Sortie: 2013
• Version actuelle: 2.3
• Popularité: 42 162 étoiles sur GitHub
• Description: "Un cadre de composant d'interface utilisateur basé sur des principes utiles du langage naturel"
• / principes: Sémantique, ambivalence de balises, sensible
• Taille de structure: 1,8 Mo
• Préprocesseurs: Moins
• Adaptatif: Oui
• Modulaire: Oui
• Modèles et mises en page de départ: Oui, certains modèles de base sont proposés
• Icon set: Police Awesome
• Suppléments / Suppléments: Non
• Composants uniques: Diviseur, Drapeau, Rail, Révéler, Étape, Publicité, Carte, Aliment, Article, Statistique, Gradateur, Classement, Forme
• D Documentation: Très bien, offrant une documentation très bien organisée, plus un site Web séparé qui propose des guides pour commencer, personnaliser et créer des thèmes
• Personnalisation: personnalisation
• Support du navigateur: Firefox, Chrome, Safari, IE10 + (IE9 avec préfixe de navigateur uniquement), Android 4, Blackberry 10
• Licence: MIT

Notes sur l'interface sémantique

est le cadre frontal le plus innovant et complet parmi ceux discutés ici. La structure générale du cadre et les conventions de dénomination, en termes de logique claire et de sémantique de ses classes, dépassent également les autres.

4. Pure, par Yahoo!

Pure est une infrastructure modulaire légère – écrite en CSS pur – qui inclut des composants pouvant être utilisés ensemble ou séparément selon vos besoins.

• Créateur: Yahoo
• Sortie: 2013
• Version actuelle: 1.0.0
• Popularité: 18 825 étoiles sur GitHub [19659010] Description: "Un ensemble de petits modules CSS réactifs que vous pouvez utiliser dans chaque projet Web"
• Concepts fondamentaux: SMACSS minimalisme
• Taille de la structure: 3,8 Ko minifié et compressé
• Préprocesseurs: Aucun
• Adaptatif: Oui
• Modulaire: Oui
• Modèles de démarrage / mises en page: Oui
• Icon set: Aucun; vous pouvez utiliser la police plutôt génial
• Suppléments / Suppléments: Aucun
• Composants uniques: Aucun
• Documentation: Bon
• Personnalisation: De base GUI Skin Builder
• Support du navigateur: Dernières versions de Firefox, Chrome, Safari; IE7 +; iOS 6.x, 7.x; Android 4.x
• Licence: Yahoo! Inc. BSD

Notes sur Pure

Pure n'offre que des styles simples pour un démarrage net de votre projet. C'est idéal pour les personnes qui n'ont pas besoin d'un cadre complet, mais de composants spécifiques à inclure dans leur travail.

5. UIkit by YOOtheme

UIkit est une collection concise de composants faciles à utiliser et à personnaliser. Bien qu'il ne soit pas aussi populaire que ses concurrents, il offre les mêmes fonctionnalités et la même qualité.

• Créateur: YOOtheme
• Sortie: 2013
• Version actuelle: 3.0.0
• Popularité: 12 821 étoiles sur GitHub
• Description: "Un frontal léger et modulaire pour développer des interfaces Web rapides et puissantes"
• Concepts / principes de base: RWD, mobile first
• Taille de la structure: 374 Ko (dossier zippé)
• Préprocesseurs: Moins, Sass
• Adaptatif: Oui
• Modular: Oui
• Modèles de base / mises en page: Oui
• Jeu d'icônes: UIkit est livré avec son propre système d'icônes SVG et un nombre croissant d'icônes de contour
• Extras / Add-ons: Oui
• Composants uniques: Article, Flex, Couverture, Éditeur HTML
• Documentation: Bon
• Personnalisation: Personnaliseur graphique avancé uniquement disponible dans la version 2 (version précédente)
• Support du navigateur: Chrome, Firefox, Safari, IE9 +
• Licence: MIT [19659128] Notes sur UIkit

  UIkit est utilisé avec succès dans de nombreux thèmes WordPress . Il offre un mécanisme de personnalisation manuelle flexible et puissant. (La version précédente du framework offrait également un personnaliseur graphique avancé.)

  Quel est le cadre frontal idéal pour vous?

  Finalement, laissez-moi vous donner quelques conseils pour choisir le bon framework. Voici quelques-unes des choses les plus importantes à surveiller:

  • Le cadre a-t-il assez de popularité ? Une plus grande popularité signifie plus de personnes impliquées dans le projet, et donc plus de didacticiels et d’articles de la communauté, plus d’exemples / sites Web réels, plus d’extensions tierces et une meilleure intégration avec des produits de développement Web relatifs. Une grande popularité signifie également que le cadre est plus à l'épreuve du futur: un cadre avec une plus grande communauté autour de lui risque beaucoup moins d'être abandonné.
  • Le cadre sous est-il en développement actif ? Un bon cadre doit constamment évoluer avec les dernières technologies Web, en particulier en ce qui concerne le mobile.
  • Le cadre a-t-il atteint maturité ? Si une structure particulière n'est pas encore utilisée et testée dans des projets réels, vous pouvez y jouer librement, mais le faire pour vos projets professionnels ne serait probablement pas judicieux.
  • Le framework propose-t-il une bonne documentation ? Une bonne documentation est toujours souhaitable pour faciliter le processus d'apprentissage.
  • Quel est le niveau de spécificité du cadre ? Le point principal ici est qu’il est beaucoup plus facile de travailler avec un cadre plus générique, par rapport à un cadre présentant une spécificité de haut niveau. Dans la plupart des cas, il est préférable de choisir un cadre avec un minimum de styles appliqués, car il est beaucoup plus facile à personnaliser. L'ajout de nouvelles règles CSS est un processus beaucoup plus pratique et efficace que celui de remplacer ou de remplacer les règles existantes. De plus, si vous ajoutez de nouvelles règles aux règles existantes, vous vous retrouverez avec des règles inutilisées, ce qui augmentera inutilement la taille du CSS.

  Si vous n'êtes toujours pas sûr, vous pouvez adopter une approche mixte. Si un environnement particulier ne répond pas à vos besoins, vous pouvez combiner des composants de plusieurs projets. Par exemple, vous pouvez obtenir un style de base CSS plus petit à partir d'un cadre, un système de grille préféré d'un autre et des composants plus complexes à partir d'un troisième. Modularité Viva! 🙂

  Enfin, il convient de mentionner que, de nos jours, avec Flexbox et Grid Layout qui prennent bien en charge les dernières versions des principaux navigateurs, il est plus facile que jamais de créer des mises en page complexes. Ce seul fait pourrait encourager plus de développeurs à quitter le cadre des frameworks frontaux et à coder leurs mises en page à partir de rien.

  Quelles sont vos réflexions? Y a-t-il des forces et des faiblesses dans ces cadres frontaux qui n’ont pas été mentionnées ici? Pensez-vous qu'il y en a d'autres qui auraient dû être répertoriés? Faites-nous savoir dans la discussion ci-dessous.

  Pour approfondir les deux principaux cadres frontaux, essayez Bootstrap: A SitePoint Anthology # 1 et Jump Start Foundation .

  Cet article a été mis à jour en juillet 2018 pour refléter l'état actuel des fonctionnalités présentes dans les frameworks frontaux répertoriés ci-dessous.

  ---

  Si vous avez entendu parler de Bootstrap mais que vous l'avez repoussé en apprenant cela parce que cela semble trop compliqué, puis jouez à travers notre cours Introduction à Bootstrap 4 pour une introduction rapide et amusante à la puissance de Bootstrap.

  
  

  Ivaylo Gerchev est un autodidacte développeur / concepteur web. Il aime jouer avec HTML, CSS, jQuery, PHP et WordPress, ainsi que Photoshop et Illustrator. La devise d'Ivaylo est "Effort minimum pour un effet maximum!"