Les 21 meilleurs systèmes et frameworks de grille HTML5/CSS3

Il y a quelques années à peine, les méthodes de conception traditionnelles signifiaient que vous deviez concevoir une page d'accueil toute seule, assembler des wireframes et des zones de contenu, puis espérer le meilleur, mais progressivement cette technique a disparu et de nouvelles méthodes plus modernes de développement rapide de sites Web ont émergé. Plus particulièrement, CSS3 a introduit Flex-box - une fonction de grille facile à utiliser que vous pouvez utiliser pour créer des mises en page de contenu, mais quand même - certaines sont résistantes, tandis que d'autres adoptent des approches encore plus compliquées pour une précision de conception absolue.

Lorsque vous ouvrez un nouveau site Web, vous verrez généralement l'en-tête du site, la zone de contenu et une barre latérale. Il est crucial de trouver un moyen de concevoir une mise en page de page d'accueil (ou de toute autre page) qui conviendrait à tous les supports, appareils et logiciels. Nous avons donc pensé qu'il pourrait être utile à nos collègues développeurs de rassembler une collection de frameworks et de systèmes CSS et HTML pour développer des mises en page de grille.

Vous voulez plus de frameworks ? Essayez nos autres rafles :

• Cadres JavaScript
• Cadres HTML5
• Cadres CSS3
• Cadres Node.js

Inutile de dire que ces conceptions sont adaptables à n'importe quelle situation, vous pouvez donc vous épargner le mal de tête d'avoir à résoudre les problèmes et les bizarreries de la mise en page elle-même, et au lieu de vous concentrer sur la réalisation de ces cases de grille avec le contenu que vous voulez y mettre. Il existe une grande variété et des styles différents que vous trouverez dans ces systèmes de grille, prenez le temps de visiter les pages de démonstration et peut-être même d'écrire ce que vous recherchez afin de trouver plus facilement le cadre correspondant. pour vos besoins.

Grille simple morte

Les grilles ne devraient jamais être compliquées, dans leur véritable essence, ce ne sont que des éléments HTML assemblant une conception globale, et Vladimir Agafonkin est l'un des développeurs qui embrasse ce concept. Son framework de grille Dead Simple Grid ne contient que deux cents octets de code CSS ; c'est une quantité de code si minime que vos pages ne remarqueront même pas sa présence. Vous pouvez séparer la grille pour présenter une zone de contenu principale et une barre latérale flexible si vous le souhaitez. Ce type de grille conviendrait aux blogs et aux mises en page générales de la page d'accueil où un design minimal est préféré. La conception réactive est intégrée grâce aux requêtes multimédias, de sorte que la grille aura un aspect impeccable sur n'importe quel appareil sur lequel elle est utilisée.

Bourbon pur

Bourbon est une bibliothèque de mixins très réussie pour le préprocesseur SASS. Ceci, bien sûr, a fait de Neat un choix attrayant pour ceux qui utilisent déjà Bourbon et SASS. Neat donne aux développeurs l'accès à un système de grille fluide qui est assez rapide et facile à configurer en quelques minutes, mais flexible au point où des changements et des ajustements illimités ne deviendraient pas un problème.

Grd

Grd est un système de grille CSS qui utilise Flexbox comme outil principal pour créer des mises en page réactives flexibles et modernes. En utilisant la démo en direct, vous pouvez jouer avec les paramètres et différentes personnalisations de conception pour voir si Grd pourrait résoudre votre problème d'intégration d'un élément de conception particulier dans votre flux de travail existant. Nous avons trouvé facile de créer des en-têtes, des pieds de page et des zones de contenu général en utilisant uniquement une liste déroulante de paramètres.

STRUCTURE

Structure, qui est également basée sur Flexbox, utilise des modèles de syntaxe déclarative (similaires à ceux d'Angular.js) afin de définir les sections et les paramètres de mise en page. Certains développeurs se sont plaints que le balisage final de la page ne peut pas être validé, mais l'idée est qu'en utilisant Structure, vous pouvez créer une grille déclarative qui ne dérange pas les attributs CSS traditionnels, comme les classes et les noms d'identification.

Système de grille 960

Des centaines de milliers de sites Web ont utilisé le système de grille 960 de Nathan Smith pour alimenter leur mise en page de conception. C'est un outil efficace pour rationaliser le flux de travail des développeurs Web qui travaillent dur. Grâce au choix de deux dispositions de colonnes différentes (12 et 16 respectivement), les développeurs peuvent rapidement amorcer une page d'accueil qui prendra en charge tout type d'entrée dynamique et statique. Il est possible d'ajouter plus de colonnes, mais vous devrez travailler avec la documentation pour comprendre plus clairement l'utilisation.

non sémantique

Unsemantic est la version de suivi de la grille 960 qui offre des capacités de conception réactives complètes. Grâce à des classes d'extraction uniques, les développeurs peuvent réorganiser la mise en page de la page qu'ils produisent, ce qui pourrait aider à promouvoir et à présenter le contenu le plus important à un moment donné, une stratégie connue pour aider les moteurs de recherche à mieux comprendre le but de chaque élément de contenu. Unsemantic est également un fier utilisateur de Media Queries, donc les développeurs front-end établis n'auront pas de mal à personnaliser ce cadre de grille pour leurs propres besoins.

Grille simple

D'où son nom, Simple Grid s'adresse à tous ceux qui recherchent la simplicité et la facilité d'utilisation. La mise en page est responsive, compatible avec les smartphones, les tablettes et les ordinateurs de bureau. En d'autres termes, la performance de votre projet sera sans l'ombre d'un doute de premier ordre. Il est également parfaitement adapté aux grands écrans et aux résolutions plus élevées. De plus, Simple Grid n'est qu'une grille, sans aucun atout supplémentaire, ce qui la rend très légère. Avec la structure pratique à douze colonnes, vous avez la liberté de créer la disposition qui vous convient exactement. Vous pouvez le diviser en deux, trois, quatre ou six colonnes parfaitement.

csswizardry-grids

Avec une grille HTML, comme csswizardry-grids, vous pouvez gagner du temps et de l'énergie. C'est un outil robuste que vous pouvez utiliser à votre guise avec précision. Il est très convivial et facilement structuré, garantissant que les développeurs Web de tous niveaux en tirent le meilleur parti. Sur la capture d'écran ci-dessus, vous pouvez jeter un œil à toutes les différentes variantes prises en charge par csswizardry-grids. Vous pouvez librement réorganiser les choses, afin que cela corresponde à vos désirs. Faites votre activité en évitant de faire les choses à partir de zéro avec csswizardry-grids maintenant et commencez du bon pied.

Grille profonde

La liberté que vous offre Profound Grid va au-delà. Vous pouvez utiliser ce système de grille flexible et extensible à la fois pour les mises en page fixes et fluides. Le résultat fonctionnera sur tous les appareils modernes sans problème. Vous pouvez créer la structure exacte que vous souhaitez en changeant, supprimant ou ajoutant des colonnes selon vos préférences. Vous pouvez d'abord consulter quelques exemples pour voir ce qui est possible avec Profound Grid. De plus, avec les marges négatives lors du calcul des colonnes, Profound Grid garantit que les mises en page fluides apparaissent les mêmes quels que soient la taille de l'écran et le navigateur Web.

Plaque

Les avantages de l'utilisation d'un système de grille sont énormes, car non seulement vous gagnez du temps, mais vous n'avez pas non plus à vous soucier des détails techniques. Par exemple, Griddle garantit une compatibilité totale avec les appareils et les navigateurs Web courants. Cela signifie que les performances de votre application seront de première classe à tout moment. Avec Griddle, vous pouvez réaliser n'importe quoi, des grilles proportionnelles et imbriquées aux unités centrées et hybrides. Quant à ce dernier, avec une certaine personnalisation, vous pouvez combiner des unités fixes et fluides dans une construction impressionnante. Vous contrôlez le centrage horizontal des unités et vous pouvez même modifier l'alignement vertical.

Grille intelligente CSS

CSS Smart Grid suit les dernières tendances et réglementations pour assurer la compatibilité avec différents appareils. En bref, l'outil est léger, réactif et mobile d'abord pour que vous puissiez créer des trucs épiques avec lui. Que vous utilisiez un smartphone ou un grand écran de bureau, CSS Smart Grid garantit que la mise en page fonctionne sur les deux sans accroc. Pour votre information, même si quelqu'un utilise un téléphone multifonction pour naviguer sur Internet, votre projet basé sur CSS Smart Grid fonctionnera tout aussi bien - avec une seule vue en colonne. Sur le site officiel, vous disposez également d'un guide rapide, de sorte que vous ne rencontrez aucun problème lors de l'utilisation de l'outil.

Gridlex

Gridlex se distingue par son design exceptionnel et sa facilité d'utilisation. La simplicité de ce cadre de grille basé sur Flexbox est étonnante, la vision est simple : enveloppez vos colonnes dans votre grille et, si nécessaire, effectuez des ajustements supplémentaires pour rendre votre conception finale irrésistible. En regardant simplement les démos de sites Web qui utilisent Gridlex, il est évident qu'il s'agit d'un système de grille haut de gamme et vous ne serez pas déçu par ce qu'il peut faire pour vos propres projets et flux de travail.

Système de grille réactif

Responsive Grid System a beaucoup à offrir, le nom de domaine parfait, une vision claire et les outils nécessaires pour faire de la conception de grille réactive un jeu d'enfant ! Le générateur de grille fournit une entrée de formulaire simple dans laquelle vous pouvez spécifier le nombre de colonnes que vous souhaitez utiliser et la marge que vous souhaitez voir entre elles. Cliquez sur soumettre et vous obtenez une sortie de code prête à l'emploi. de votre prochaine mise en page de grille réactive. L'auteur, Graham, est heureux de faire tout le travail pour vous si vous le souhaitez, vous pouvez le contacter en bas de page.

Grillé

Les développeurs ont construit Gridly comme un système de mise en page de grille minimal pour prendre en charge les navigateurs les plus modernes d'aujourd'hui. Sa structure légère aide les développeurs à avoir plus de facilité pour mettre en place une disposition de grille/colonne sans trop de tracas. Dans l'ensemble, la taille absurdement minimale de cette bibliothèque vous donnera envie de plus pour les projets à venir.

Pierre de forme

Formstone n'est pas un système de grille géré en soi, c'est en fait une bibliothèque pour les développeurs frontaux qui ont besoin de composants et d'éléments Web hautement personnalisables qui constituent une page Web traditionnelle que vous rencontrez quotidiennement. En tant que bibliothèque modulaire, réactive et automatisée, Formstone peut être utilisé non seulement dans le but de faire évoluer un projet de site Web de grande envergure, mais également pour l'utilisation de la disposition de la grille elle-même.

Amorcer

Où serait Bootstrap aujourd'hui sans son système de grille sur lequel tout le reste a été construit ? Nous attendons toujours avec impatience l'arrivée de Bootstrap 4, mais en attendant... vous ne pouvez pas résister à dire oui à un framework qui a réussi à s'imposer comme l'un des frameworks front-end les plus importants de ce siècle. Des millions de sites Web sont alimentés par les fonctionnalités de Bootstrap, mais rien de tout cela ne serait possible sans le framework de grille intégré au cœur de Bootstrap.

Fondation

Foundation est une autre bibliothèque frontale à succès qui prend en charge la conception réactive, la dernière version (Foundation 6) apporte à la table des fonctionnalités et des éléments encore plus modernes qui peuvent aider les développeurs à fournir à leurs clients des conceptions incroyablement polyvalentes. Les modèles faciles à utiliser fournis par Foundation vous donnent une chance de vous reposer de tout ce développement de grille et de vous concentrer plutôt sur ce qui est important – les éléments que vous allez mettre dans cette grille elle-même.

Squelette

Skeleton a un design magnifique et naturel qui vous laissera en redemander. Les créateurs ont formé l'idée derrière Skeleton d'être le meilleur choix pour les petits projets. En outre, vous pouvez l'utiliser sur des projets pour lesquels vous ne pensez pas qu'il serait approprié d'utiliser un cadre à part entière. Skeleton vous fournit les éléments essentiels dont vous auriez besoin pour mettre en place un prototype de site Web ; une disposition en grille, des options de typographie pour les en-têtes et les sections, des éléments de bouton pour tous vos besoins de formulaire, et en fait des formulaires personnalisés pour que vous puissiez gagner du temps pour avoir à coder le vôtre, un bel ajout de listes, de tableaux et de syntaxe de code, et un média framework de requêtes pour que vos conceptions deviennent entièrement réactives !

Système de grille réactif 2

Responsive Grid System (version 2) est un système de grille mobile d'abord qui est de très petite taille, mais très efficace dans le style. Vous pouvez choisir parmi une gamme de dispositions de colonnes (24, 16, 12). Vous pouvez également personnaliser les marges et les rembourrages entre les colonnes et utiliser des polyfills pour créer une mise en page de conception stellaire.

Système de grille réactif pour votre prochain projet

Le système de grille réactif pour votre prochain projet utilise les mêmes classes que le système de grille 960. Il a été conçu pour servir en premier les visiteurs mobiles et fournit un modèle standard pour la gestion des en-têtes. Les développeurs l'ont testé sur tous les navigateurs modernes, vous êtes donc entre de bonnes mains. Vous pouvez l'utiliser comme système de grille de base qui vous aidera à créer une conception Web réactive. Cela maintiendra votre compétence actuelle sur le système de grille populaire.

Référence HTML5

HTML5 Boilerplate est un framework passe-partout robuste (modèle) pour les développeurs front-end. C'est pour les développeurs qui veulent lancer leur projet sans les tracas liés à des frameworks plus importants comme Bootstrap ou Foundation.