Les frameworks front-end Web les plus populaires

En tant que programmeur de développement front-end, il est très important d'apprendre à utiliser un bon framework web front-end qui augmentera considérablement l'efficacité de votre travail et rendra votre développement plus efficace. doucement. Dans cet article, nous présenterons les frameworks de développement front-end qui méritent le plus votre attention en 2017. Chaque framework a un style unique pour aider à créer des mises en page en grille, des boutons, des formulaires ou d'autres éléments de page. J'espère que cela aide tout le monde.

Bootstrap

Presque tous les développeurs connaissent le cadre de développement de Twitter - bootstrap. Il s'agit probablement de l'un des frameworks d'interface utilisateur front-end les plus anciens, la première version étant publiée en 2011. Il contient un ensemble complet de bibliothèques de classes SASS qui peuvent aider à personnaliser les composants de l'interface utilisateur et du JS, et à développer facilement diverses navigations, progressions, boutons, fil d'Ariane, etc.

La dernière version, Bootstrap 4, est actuellement en cours de développement. En cours de développement, il devrait être publié prochainement. Ce sera un gros changement pour bootstrap3.

Foundation6

La bibliothèque de classes Foundation existe depuis quelques années, et il y aura une mise à jour majeure récemment, et la bibliothèque de classes est divisée en deux classes principales bibliothèques : bibliothèque de classes de développement de sites Web et bibliothèque de classes de développement de courrier électronique

Il fournit un cadre d'interface utilisateur minimal qui peut être utilisé pour développer n'importe quel type de mise en page et contrôler entièrement les composants associés de diverses pages, tels que les menus réactifs, les zones de saisie, onglets, etc.

Il fournit également un site Web qui peut facilement parcourir les composants de l'interface utilisateur. Et prend en charge les outils de développement Web grand public, tels que Grunt/Gulp, npm et SASS/compass, etc.

Petal

Le dernier framework de développement Web lié aux CSS, basé sur MOINS .

Cette bibliothèque de classes est très simple, actuellement en version 0.6. Mais c’est un cadre qui peut être appliqué au développement réel. Ayez une documentation très claire, par exemple, des grilles, des polices, des boutons, des entrées, etc.

L'équipe de développement de Petal n'est pas très grande, mais a un rendement très élevé. Je pense qu'il deviendra un framework bien connu avec une place à la mi-2017

Pure CSS

Pure CSS a une conception modulaire. Il existe de nombreuses petites bibliothèques de classes pour différents composants, tels que des formulaires, des grilles, des graphiques, des boutons de navigation, etc.

Vous pouvez choisir librement le nombre de bibliothèques de classes à utiliser. La bibliothèque de classes de base utilise Normalize et d'autres CSS de réinitialisation simple pour créer des effets d'interface utilisateur unifiés. Mais vous pouvez ajouter une grille personnalisée pour gagner du temps de développement

Toutes les bibliothèques de classes peuvent être intégrées et minimisées à l'aide d'outils. Et l'équipe fournit un guide simple pour aider à créer des classes d'extension

Je pense personnellement que Pure deviendra un framework aussi réussi que Bootstrap. Bien que peu mentionné dans de nombreux blogs, il devrait certainement avoir une place parmi vos meilleurs frameworks

Semantic UI

Ce framework est actuellement en version 2.2, avec de nombreuses fonctionnalités typiques , tels que la grille, le type, la couleur et la saisie, etc.

Il propose des thèmes personnalisés avec plus de 3000 types de thèmes différents. Il fournit également des thèmes qui simulent les styles de Google, Amazon, Twitter et d'autres sites Web. Vous pouvez également les cloner et les modifier facilement

Vous pouvez choisir parmi des mises en page prêtes à l'emploi et les utiliser comme vos propres modèles de développement. L'interface utilisateur sémantique comporte de nombreux éléments personnalisés, et vous constaterez que ces conceptions sont très distinctives

Milligram

Une bibliothèque de classes de style design minimaliste, si vous recherchez un bibliothèque de classes ultra-petite, c'est un très bon choix. Elle ne fait que 2 Ko après compression

C'est un projet très simple et beau. La version actuelle est la 1.3, qui est stable et peut être utilisée pour. développement réel. Vous pouvez utiliser npm, Yarn, Bower, etc. pour l'installation, mais Normalize est requis, vous devez donc inclure cette bibliothèque de classes

Utilisez les outils de compression CSS pour les fusionner afin d'enregistrer le nombre de requêtes HTTP

La seule chose qui n'est pas très conviviale, c'est la documentation. Bien sûr, si vous pouvez utiliser une bonne documentation, utiliser Milligram sera une chose très simple

Vital CSS

Un autre framework d'interface utilisateur minimaliste qui prend en charge SASS , il est extrêmement facile à apprendre

La page des composants présente tout ce que vous devez savoir. Si vous avez besoin d'un framework CSS super simple pour développer de nouveaux projets, il peut certainement répondre à vos besoins. Si vous souhaitez en savoir plus, vous pouvez vous référer à ce blog de l'équipe de développement Vital CSS

Skeleton<.>

Cadre responsive, ultra-léger et ultra-simple. Fournit l'infrastructure nécessaire au développement de nouveaux sites Web

Contient quelques styles de base, mais rien de trop tape-à-l'œil. En fait, vous pouvez modifier rapidement et facilement le framework pour répondre à vos propres besoins

Skeleton est le framework le plus stable et le plus compact. Il y a une page de démonstration ici.

Kit UI

Une bibliothèque de classes frontales riche en fonctionnalités. Il existe de nombreux fichiers et dossiers facultatifs, CSS est le style, les images sont des icônes et js est javascript

Après insertion dans la page, chaque js peut être associé à des éléments et composants DOM, ce qui vous permet de communiquer facilement avec d'autres intégrations de bibliothèques de classes, par exemple vue ou réagir

Vous pouvez également utiliser cette bibliothèque de classes pour configurer et créer des composants d'interface utilisateur. La page de documentation contient de nombreux exemples pour vous aider avec les sites Web courants

matérialiser

La conception matérielle de Google est devenue la norme pour leurs produits. Affectant lentement le monde de la conception Web, par exemple, Materialise

Ce framework open source gratuit amène la conception matérielle à un niveau supérieur. C'est le moyen le plus simple de créer des pages de style purement matériel sans vous coder

. Fournit des définitions de classe CSS pures, des bibliothèques de classes javascript et des composants. Vous pouvez voir quelques exemples pratiques ici.

Chacun de ces frameworks web front-end a ses propres avantages. Il y en a toujours un qui convient à tout le monde. J'espère que cet article pourra vous aider et rendre votre travail plus efficace.

Recommandations associées :

Vingt frameworks PHP puissants

Classement mondial des frameworks de développement PHP

Introduction aux frameworks front-end JS et UI pratiques

Quel framework front-end utilisez-vous pour développer PHP ?

Premier contact avec l'incroyable framework front-end vue.js