Vous pouvez économiser beaucoup de temps de développement en travaillant avec des kits d’interface utilisateur frontaux. Le plus populaire est Bootstrap, bien que beaucoup trop de sites homogènes reposent sur ce cadre.
Pour vous donner un peu de variété, nous avons effectué notre sélection des meilleurs cadres d’interface utilisateur Open Source les plus récents.
Ils possèdent tous leurs propres styles ainsi que différents niveaux de support pour les composants dynamiques. Mais si vous associez ces cadres avec des plugins javascript, vous pouvez construire à peu près n’importe quoi.
1. UIKit
Le cadre de UIKit est léger, facile à personnaliser et facile à ajouter. Il s’agit d’une structure modulaire dans laquelle vous allez créer des éléments de page avec des classes réutilisables.
C’est idéal pour structurer une nouvelle page sans devoir coder votre propre grille ou lancer vos propres piles de polices. Ce cadre est même livré avec un lot d’icônes unique que vous pouvez ajouter dans votre page en utilisant une police web.
Avec UIKit, vous pouvez exécuter Sass ou Less avec n’importe quel gestionnaire de pack (généralement npm).
De plus, avec une énorme liste de composants, vous pouvez intégrer n’importe quoi, des champs de téléchargement au fil d’Ariane et bien plus encore.
2. Foundation
La bibliothèque de Foundation de Zurb est présente dans le Bootstrap de Twitter. Mais il semble que Foundation attire moins l’attention à cause de son interface moins stylée.
Avec Foundation, vous avez accès à des éléments d’interface personnalisés, à des composants et à une grille par défaut. Tout ce dont vous avez besoin pour créer une superbe interface se trouve dans la bibliothèque de Foundation.
Jetez un coup d’œil à leur page d’exposition si vous voulez en savoir plus. Il dispose de plusieurs sites fonctionnant sur Foundation avec des grilles personnalisées, des fonctionnalités réactives, bref, tout ce dont vous avez besoin pour un nouveau projet web.
3. Milligram
Pour une approche minimaliste du développement d’interface, consultez Milligram. Cette bibliothèque CSS open source est très petite et livré avec plusieurs fonctionnalités d’interface très simples.
Cela fonctionne avec Bower, Yarn, et npm, cela peut donc s’intégrer dans n’importe quel flux de gestion de pack.
Le seul problème est que Milligram nécessite la bibliothèque de Normalize, vous devez donc ajouter cela à votre page. Mais si vous avez un outil de minimisation CSS, vous pouvez facilement combiner les deux bibliothèques et réduire vos requêtes HTTP.
4. One-Nexus
Voici une nouvelle bibliothèque frontale qui propose en fait des modules assez exceptionnels.
Le cadre de One-Nexus est large. Il prend en charge un design réactif et des périphériques tactiles, et fonctionne sur Sass avec des outils de construction automatisés. Cependant, nous pensons que c’est l’un des cadres les plus complexes pour débuter.
Si vous connaissez déjà les cadres et la ligne de commande, alors One-Nexus est vraiment génial. Il y a tellement de modules que ça va vous faire tourner la tête ! Mais cela peut prendre un certain temps pour s’habituer à l’installation et pour que votre configuration initiale soit correctement configurée.
5. Semantic UI
Si vous recherchez un cadre testé, consultez Semantic UI. Ceci est une belle bibliothèque frontale actuellement dans la version 2.2 avec des tonnes de fonctionnalités.
Nous considérons Semantic comme le Bootstrap inconnu pour le développement frontal. Il n’est pas très connu des codeurs traditionnels mais il a les mêmes avantages que Bootstrap.
La bibliothèque de Semantic comprend des boutons, des onglets, des listes déroulantes, donc tout ce dont vous avez besoin. De plus, il propose un débogage simple et plusieurs thèmes géniaux pour que vous puissiez personnaliser votre mise en page dès le départ.
6. Pure CSS
Certains ont affirmé qu’ils ont déjà utilisé Pure CSS sur de petits projets et qu’ils l’en vraiment adoraient. C’est l’un des cadres les plus cool car il vous permet de personnaliser vos fichiers pour inclure toutes les fonctionnalités dont vous avez besoin.
Vous trouverez plus d’informations sur la page de démarrage, qui contient des liens de téléchargement et quelques guides d’installation.
Notez que l’esthétique de Pure est très minimaliste mais pas trop simple. Ils imitent un peu celle de Bootstrap avec quelques pointeurs du design matériel de Google. Une bibliothèque amusante à utiliser pour tout projet à la fois personnel et commercial.
7. Ink Interface Kit
Avec Ink Interface Kit, vous pouvez créer d’incroyables pages réactives. Ils auront l’air simples et suivront un format de code très simple, mais c’est généralement ce que vous recherchez dans un cadre frontal.
Ink est même livré avec sa propre bibliothèque JS que vous pouvez exécuter sur vanilla JS. Cela va prendre quelques réglages si vous n’avez jamais utilisé Ink auparavant. Cependant, il possède une vaste bibliothèque de syntaxe comparée à celle de jQuery.
Cela fonctionne sur Sass ainsi qu’avec la sémantique de HTML, et est conçu comme n’importe quel cadre frontal.
8. GroundworkCSS
Nous n’avons pas encore fait beaucoup de tests sur GroundworkCSS, mais il s’agit d’un cadre très réactif.
Actuellement dans la version 2.x, vous pouvez télécharger l’ensemble de la bibliothèque Groundwork dans deux styles : HTML/CSS/JS de base ou dans un modèle pour Ruby on Rails.
Les deux fonctionnent de la même manière, et ils fournissent tous deux un système d’interface robuste pour coder des pages utilisables.
Consultez leur démo pour avoir une idée de ce que cela va donner sur votre site.
9. Materialize.css
Depuis que Google a annoncé son passage à la conception de matériaux, il est devenu l’un des plus grands langages de conception d’interface utilisateur. Alors qu’il a été construit à l’origine pour Android, il a trouvé son chemin sur le web avec de nombreux cadres comme Materialize pour le clonage de style.
L’infrastructure toute entière répond exactement à vos attentes : totalement réactif, conforme aux normes et prend en charge les réinitialisations personnalisées pour tous les navigateurs.
La seule différence est que vos éléments par défaut prennent le style du design matériel.
Et bien que ce soit probablement mon cadre matériel préféré, vous pouvez toujours parcourir les autres cadres pour voir ce qui vous plaît.
10. Topcoat
Quand il s’agit de performances, vous ne pouvez pas ignorer la qualité de votre code. Topcoat prend à cœur le cadre avec toujours en tête, la performance. Il est entièrement personnalisable et facile à personnaliser avec un code HTML et CSS facile à lire. Toutes les modifications que vous apportez suivront une structure claire avec les conventions de nommation BEM pour CSS.
Le véritable avantage de Topcoat est le test de charge et l’accent mis sur les performances. Quiconque a besoin d’une mise en page personnalisée qui se charge rapidement devrait se tourner vers Topcoat.
11. Petal
Petal est l’un des plus récent cadres CSS sur le marché. Encore une fois, il est entièrement réactif, 100% open source, et peut supporter n’importe quel autre cadre majeur dans cette liste.
Mais c’est assez petit et il restera toujours comme ça. Il est basé sur le préprocesseur CSS Less et nécessite aussi Normalize.
En fin de compte, c’est un très petit cadre qui devrait plaire aux développeurs CSS Less. Vous pouvez également consulter les documents en ligne pour les extraits de code et les exemples en direct d’éléments de page.
