Qu'est-ce qui me convient? 22 Cadres CSS réactifs et plaques chauffantes expliqués
Les frameworks CSS existent depuis des années, mais l'arrivée de pratiques de conception réactives a rendu bon nombre de nos anciens favoris inutiles. Heureusement, de nombreux développeurs vraiment talentueux se sont mobilisés pour combler le vide 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 guide vraiment sur la façon dont chaque cadre et passe-partout diffère des autres afin que vous puissiez prendre une décision éclairée. C'est notre objectif aujourd'hui. Suivez-nous pour voir ce qui rend chacun de ces 22 cadres CSS réactifs et passe-partout unique.
Gumby
Le cadre Gumby reprend la grille 960 sur laquelle nous avons tous fait nos armes il y a des années et l'amène à l'ère moderne de la conception Web avec une touche réactive. Il a également des styles prédéfinis pour des choses comme les formulaires, les boutons, les bascules, les listes déroulantes, les onglets, etc.
Le système de grille sémantique
Si vous détestez les systèmes de grille et leur balisage gonflé 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 choses comme la largeur des gouttières et des colonnes. Tout ce que vous avez à faire est d'utiliser quelques mixins prédéfinis dans votre CSS, aucun balisage supplémentaire 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 est également doté de nombreuses fonctionnalités telles que la normalisation CSS, les corrections de bogues IE et les styles de typographie.
Sans cadre
Sans cadre est difficile à classer car il s'agit techniquement plus d'une manière recommandée d'aborder la conception réactive qu'un ensemble réel de fichiers que vous pouvez télécharger. Il y a trois étapes: commencez par créer une grille régulière à largeur fixe, puis répétez-la à l'infini et terminez en la centrant dans la fenêtre.
Le site indique spécifiquement que Frameless n'est pas un framework et qu'il n'y a aucun fichier à télécharger, mais malgré cette affirmation, il existe en fait quelques modèles de base pour vous aider à démarrer.
Grilles proportionnelles
Les grilles proportionnelles s'attaquent à de gros problèmes qui surviennent lors d'une tentative de mise en page CSS réactive, à savoir les grilles d'imbrication et la lutte avec des valeurs basées sur des pourcentages dans des fenêtres très différentes.
Les grilles proportionnelles utilisent le dimensionnement des boîtes CSS pour créer une solution qui permet des gouttières fixes (ems / rems) mélangées à des colonnes fluides. La distance entre les colonnes restera égale à chaque point d'arrêt, par rapport à la taille de police de base. Les colonnes sont définies par proportion, par exemple une moitié, un tiers, deux tiers et peuvent être facilement réutilisées autant de fois que vous le souhaitez, même lorsqu'elles sont imbriquées.
L'approche Goldilocks
L'approche Goldilocks vise à réduire la tendance des conceptions réactives à pencher vers la prise en charge de dispositifs spécifiques. Au lieu de cela, il vise une conception universelle qui ne dépend d'aucun appareil.
L'approche Goldilocks utilise une combinaison d'ems, de largeur maximale, de requêtes multimédias et de traductions de modèle pour considérer trois états qui permettent à vos conceptions d'être indépendantes de la résolution.
Twitter Bootstrap
Twitter Bootstrap n'a pas besoin d'être présenté. C'est l'un des plus grands et des plus mauvais passe-partout CSS du Web et est le point de départ d'innombrables sites professionnels et personnels de développeurs du monde entier.
Twitter Bootstrap comprend un système de grille réactif en plus de tonnes d'éléments pré-stylés stellaires tels que des formulaires, des boutons, des menus de navigation et plus encore. Consultez notre introduction complète ici.
Fondation de ZURB
Foundation est le concurrent le plus important de Twitter Bootstrap, car les deux projets sont très similaires. Comme Bootstrap, Foundation vous offre une grille réactive ainsi que divers éléments d'interface utilisateur de style.
Foundation 3 vient d'être lancée récemment, donc si vous n'avez pas regardé le projet depuis un moment, il est temps de vous arrêter et de le vérifier. C'est de loin l'un des cadres les plus utiles et les plus complets que vous trouverez n'importe où.
Squelette
Skeleton a été l'un des premiers passe-partout réactifs à faire son apparition et il est toujours l'un des meilleurs. Dans le concept, c'est un peu comme Foundation, mais il est plus léger (le type, les boutons et les formulaires sont les seuls éléments d'interface utilisateur inclus).
Consultez notre tutoriel Squelette pour voir à quel point cet outil est incroyablement facile à obtenir pour une conception réactive et opérationnelle en quelques minutes.
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'ancien. Récemment, le cadre a été mis à jour pour s'étendre jusqu'à 1 200 pixels afin que vous puissiez profiter de grands écrans. Il inclut même le support des écrans rétine!
Système Golden Grid
Le système Golden Grid s'appelle lui-même une «grille pliante», ce qui est vraiment une façon élégante de dire que les requêtes multimédias sont utilisées pour réduire la disposition originale de seize colonnes en huit puis quatre colonnes à mesure que la fenêtre 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 des ems afin que les gouttières restent toujours proportionnelles au contenu.
Le système de grille CSS 1140px
Celui-ci est un système de grille assez standard sans rien d'extraordinaire. Il commence par une grille de fluide à 12 colonnes qui utilise des gouttières basées sur un pourcentage et fonctionne parfaitement sur les moniteurs 1280 et 1140 pixels. Au fur et à mesure que la fenêtre devient plus petite, quelques requêtes média simples sont utilisées pour redistribuer le contenu.
StackLayout
StackLayout est pour les rebelles, ça va être très différent des autres frameworks que vous avez essayés. En fait, il est né d'une aversion pour les cadres de mise en page CSS typiques.
Le principe de base à l'œuvre ici est que StackLayout utilise le bloc en ligne comme pierre angulaire d'un système de mise en page unique. Le système est un peu décalé mais il est quand même assez impressionnant. Découvrez ici une procédure pas à pas.
SimpleGrid
SimpleGrid est un autre système de mise en page unique que vous apprécierez si vous aimez jouer avec ces choses autant que moi. La grille ici est basée sur quatre gammes d'écran 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 implémenter le système, vous utilisez des classes «slot» à partir d'une disposition à quatre et six colonnes. Cela semble compliqué, mais c'est en fait fidèle à son nom et assez simple à mettre en œuvre.
Grille de référence fluide
La grille de référence fluide est construite en mettant fortement l'accent sur une typographie forte qui adhère à une grille de référence. Il contient également une grille pliante à trois colonnes qui est destinée à être un point de départ utile, pas une norme à suivre.
Columnal
Columnal est une sorte de système de grille hybride qui emprunte les meilleurs éléments à divers autres cadres. Il a l'ADN élastique du système de grille CSS 1140px avec quelques 960.gs également. C'est assez standard, mais si les autres ne semblent pas convenir, vous pouvez l'essayer.
Inuit.css
Inuit.css est un excellent cadre qui est en fait construit avec l'extensibilité à l'esprit. Utilisez le générateur de grille personnalisé pour créer votre propre grille réactive, puis téléchargez quelques 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 Web (dans le bon sens). Il contient un système de mise en page réactif qui utilise la mentalité «mobile d'abord», ainsi que les styles visuels Bootstrap, les icônes Font Awesome, Modernizr, Selectivizr, LESS et Sass. C'est une impressionnante petite boîte à outils de goodies que je pense que vous apprécierez.
Susy: Grilles réactives pour Compass
Celui-ci est pour les super nerds comme moi qui aiment les systèmes de mise en page 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é le support natif des grilles, Susy devrait être utile pour ceux qui les manquent.
Initializr - Modèle HTML5 réactif
Initializr est un outil qui vous aide à lancer vos projets HTML5 rapidement et facilement en utilisant HTML5 Boilerplate, Bootstrap ou un nouveau passe-partout réactif.
Sélection du modèle réactif est que le début, à partir de là que vous construisez votre téléchargement personnalisée en choisissant parmi toutes les ressources que vous pourriez généralement vouloir tels que Modernizr et MOINS.
Encore une autre chaudière mobile
YAMB est un excellent point de départ pour vos projets Web réactifs, basé sur quelques fonctionnalités clés: une grille fluide réactive, des menus de navigation déroulants qui se transforment automatiquement en zones de sélection sur de petits écrans et des images / diaporamas réactifs.
Je pense que le site Web est assez moche mais l'ensemble d'outils lui-même est assez pratique!
Wirefy
Wirefy est conçu spécifiquement en pensant à l'expérimentation filaire réactive rapide. Il utilise une version modifiée de la grille 960 à seize colonnes ainsi que certains éléments d'interface utilisateur de type Bootstrap (menus, formulaires, diaporamas, boutons, images, etc.).
Lequel est ton favori?
Inévitablement, ces types de messages attireront des commentateurs qui ressentent le besoin d'essayer de discréditer toute la notion d'utilisation de tout type de modèle ou de système de grille pour la conception 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, j'aimerais entendre vos commentaires sur les options ci-dessus. Lesquels avez-vous essayé et qu'en avez-vous pensé? Lequel est ton favori?
