Les frameworks CSS existent depuis des années, mais l'arrivée de pratiques de conception réactives a rendu inutiles beaucoup de nos anciens favoris. Heureusement, de nombreux développeurs vraiment talentueux se sont mobilisés pour combler le fossé avec la prochaine génération de frameworks CSS et de passe-partout.
Il y a déjà une tonne de ces choses qui flottent. Tout le monde a une liste, mais personne ne vous explique vraiment en quoi chaque cadre et chaque passe-partout diffèrent les uns des autres afin que vous puissiez prendre une décision éclairée. C'est notre objectif aujourd'hui. Suivez ce qui suit pour découvrir ce qui rend chacun de ces 22 frameworks et champs standard CSS réactifs uniques.
Gumby
Le framework Gumby reprend la grille 960 sur laquelle nous nous sommes tous fait les dents il y a des années et l'introduit dans l'ère moderne de la conception web avec une touche réactive. Il comporte également des styles prédéfinis pour des éléments tels que les formulaires, les boutons, les bascules, les menus déroulants, les onglets, etc.
Le système de grille sémantique
Si vous détestez les systèmes de grille et leur balisage volumineux et non sémantique, celui-ci est pour vous. Le système de grille sémantique exploite la puissance des préprocesseurs CSS (LESS, Sass et Stylus) pour créer des variables personnalisables pour des éléments tels que la gouttière et la largeur de colonne. Tout ce que vous avez à faire est d'utiliser quelques mixins prédéfinis dans votre CSS, aucun balisage supplémentaire n'est requis!
Sans grille
Gridless est un passe-partout puissant qui utilise la première conception Web réactive mobile pour s’adapter à la largeur de l’appareil. Il contient également d'excellentes fonctionnalités telles que la normalisation CSS, les corrections de bugs IE et les styles de typographie.
Sans cadre
Frameless est difficile à classer car c’est techniquement plus une méthode recommandée d’approche du responsive design qu’un ensemble de fichiers que vous pouvez télécharger. Il y a trois étapes: Tout d’abord, créez une grille régulière à largeur fixe, puis répétez-la indéfiniment, puis terminez-la en la centrant dans la fenêtre.
Le site indique spécifiquement que Frameless n’est pas un framework et qu’il n’ya aucun fichier à télécharger, mais malgré cette affirmation, il existe quelques modèles de base pour vous aider à démarrer.
Grilles proportionnelles
Les grilles proportionnelles s'attaquent à certains problèmes importants rencontrés lors de la tentative de mise en page CSS réactive, à savoir l'imbrication de grilles et la lutte avec des valeurs basées sur des pourcentages dans des fenêtres très différentes.
Proportional Grids utilise la taille de la boîte CSS pour créer une solution permettant de créer des gouttières fixes (ems / rems) mélangées à des colonnes fluides. La distance entre les colonnes restera égale à chaque point de rupture, en fonction de la taille de la police de base. Les colonnes sont définies par proportion, par exemple. une moitié, un tiers, deux tiers et peut être facilement réutilisé autant de fois que vous le souhaitez, même imbriqué.
L'approche Goldilocks
L’approche Goldilocks vise à réduire la tendance des conceptions réactives à s’appuyer sur la prise en charge de dispositifs spécifiques. Au lieu de cela, il recherche une conception universelle qui ne dépend d'aucun appareil.
L'approche Goldilocks utilise une combinaison de requêtes ems, max-width, de supports et de traductions de modèle pour prendre en compte trois états permettant à vos conceptions d'être indépendantes de la résolution.
Twitter Bootstrap
Twitter Bootstrap n'a pas besoin d'introduction. Il s’agit de l’un des plus grands et des plus méchants chauds CSS sur le Web et constitue le point de départ de nombreux sites professionnels et personnels de développeurs du monde entier.
Twitter Bootstrap comprend un système de grille réactif ainsi que des tonnes d’éléments stellaires préconçus tels que des formulaires, des boutons, des menus de navigation, etc. Découvrez notre introduction complète ici.
Fondation de ZURB
Foundation est le principal concurrent de Twitter Bootstrap car les deux projets sont très similaires. Comme Bootstrap, Foundation vous fournit une grille réactive ainsi que divers éléments d'interface utilisateur stylisés.
Foundation 3 vient d'être lancé récemment, donc si vous n'avez pas jeté un œil au projet depuis longtemps, il est temps de vous arrêter pour l'examiner. C'est sans conteste l'un des cadres les plus utiles et les plus complets que vous puissiez trouver n'importe où.
Squelette
Skeleton a été l’un des premiers chaudronniers réactifs à faire son apparition et reste l’un des meilleurs. En principe, il ressemble un peu à Foundation, il est plus léger (le type, les boutons et les formulaires sont les seuls éléments d'interface utilisateur inclus).
Consultez notre didacticiel Skeleton pour voir à quel point cet outil est extrêmement facile à utiliser pour rendre une conception réactive opérationnelle en quelques minutes à plat.
Amazium
Amazium ressemble beaucoup à Gumby ci-dessus en ce qu’il s’agit d’une grille réactive construite sur les techniques de grille 960 de l’ancienne. Récemment, le cadre a été mis à jour pour s’étendre jusqu’à 1 200 pixels afin que vous puissiez tirer parti des grands écrans. Il inclut même un support pour les écrans Retina!
Système Golden Grid
Le système de grille d'or s'appelle lui-même une? Grille pliante? ce qui est vraiment juste une façon élégante de dire que les requêtes de média sont utilisées pour réduire la disposition originale de seize colonnes en huit, puis quatre colonnes à mesure que la fenêtre d'affichage se rétrécit.
Comme certaines des autres grilles que nous avons vues jusqu'à présent, Golden Grid System utilise des gouttières basées sur les ems pour que les gouttières restent toujours proportionnelles au contenu.
Le système de grille CSS de 1140px
Celui-ci est un système de grille assez standard sans rien d'extraordinaire. Cela commence par une grille de fluide de 12 colonnes qui utilise des gouttières à pourcentage et qui fonctionne très bien sur les moniteurs de 1 280 et 1 140 pixels. Au fur et à mesure que la fenêtre de visualisation devient plus petite, plusieurs requêtes multimédia simples sont utilisées pour rediffuser le contenu.
StackLayout
StackLayout est destiné aux rebelles, il sera très différent des autres frameworks que vous avez essayés. En fait, il est né de l'aversion des frameworks CSS typiques.
Le principe de base à l'œuvre ici est que StackLayout utilise inline-block comme pierre angulaire d'un système de présentation unique. Le système est un peu bizarre mais c'est quand même assez impressionnant. Découvrez une procédure pas à pas ici.
SimpleGrid
SimpleGrid est un autre système de mise en page unique que vous apprécierez si vous aimez jouer avec ces éléments autant que moi. La grille ici est basée sur quatre gammes d’écrans différentes: écrans de moins de 720 pixels de large, écrans de plus de 720 pixels de large, écrans de plus de 985 pixels de large et écrans de plus de 1235 pixels de large.
Pour mettre en œuvre le système, vous utilisez? Slot? classes à la fois une disposition de quatre et six colonnes. Cela a l'air compliqué, mais c'est en réalité fidèle à son nom et assez simple à mettre en œuvre.
Grille de référence de fluide
La grille de lignes de base des fluides est construite en mettant fortement l'accent sur une typographie forte qui adhère à une grille de lignes de base. Il contient également une grille de pliage en trois colonnes qui constitue un point de départ utile et non un standard à suivre.
Colonne
Columnal est en quelque sorte un système de réseau hybride qui emprunte les meilleurs éléments de divers autres cadres. Il possède l’ADN élastique du système de grille CSS de 1140px, ainsi que quelque 960g. C'est assez standard, mais si les autres ne semblent pas correspondre à vos critères, vous pouvez l'essayer.
Inuit.css
Inuit.css est un excellent cadre qui a été conçu pour être extensible. Utilisez le constructeur de grille personnalisé pour créer votre propre grille réactive, puis téléchargez des igloos (plugins) pour étendre le cadre de manière utile.
320 et plus
320 and Up est comme une collection de mots à la mode de conception de sites Web (dans le bon sens). Il contient un système de mise en page réactif qui utilise le? Mobile first? mentalité, avec les styles visuels Bootstrap, les icônes Font Awesome, Modernizr, Selectivizr, LESS et Sass. C'est une petite boîte à outils impressionnante de friandises que je pense que vous apprécierez.
Susy: Grilles réactives pour Compass
Celui-ci est destiné aux super-nerds comme moi qui adorent les systèmes de présentation, ainsi que Sass et Compass. Construisez vos mises en page en quelques minutes avec la magie des mixins et des variables.
Étant donné que Compass a récemment abandonné totalement le support natif pour les grilles, Susy devrait être pratique pour ceux qui en manquent.
Initializr - Modèle HTML5 réactif
Initializr est un outil qui vous aide à lancer vos projets HTML5 rapidement et facilement à l’aide de HTML5 Boilerplate, Bootstrap ou d’un nouveau système standard réactif.
La sélection du modèle responsive n’est que le début. À partir de là, vous créez votre téléchargement en sélectionnant parmi toutes les ressources que vous souhaitez généralement telles que Modernizr et LESS.
Encore un autre plateau de cuisson mobile
YAMB est un excellent point de départ pour vos projets Web réactifs, reposant sur quelques fonctionnalités clés: une grille de fluide réactif, des menus de navigation déroulants qui se transforment automatiquement en cases de sélection sur de petits écrans et des images / diaporamas réactifs.
Je pense que le site web est assez moche mais les outils en eux-mêmes sont assez pratiques!
Wirefy
Wirefy est spécialement conçu pour les expériences de wireframing rapides et réactives. Il utilise une version modifiée de la grille 960 à 16 colonnes avec quelques éléments d'interface utilisateur de type Bootstrap (menus, formulaires, diaporamas, boutons, images, etc.).
Lequel est ton préféré?
Inévitablement, ces types de publication attireront des commentateurs qui ressentent le besoin de tenter de discréditer toute la notion d'utilisation d'un système de modèle ou de grille pour la conception de sites Web. Ils ne sont tout simplement pas pour tout le monde et je respecte votre opinion si vous ne pouvez pas les supporter.
Si vous êtes dans les systèmes de grille cependant, j'aimerais entendre vos commentaires sur les options ci-dessus. Lesquels avez-vous essayé et qu'en avez-vous pensé? Lequel est ton préféré?