Si vous aimez la conception à base de grille, cet article est pour vous. Nous avons parcouru le Web et réuni toutes les ressources en grille que nous avons pu trouver. Nous avons tous les meilleurs frameworks, constructeurs de grille, guides pratiques et plus encore.
Commencez la navigation et la mise en favori!
Détester les cadres de grille?
Avant de commencer, je tiens simplement à dire que je sais très bien que beaucoup de personnes qui lisent ceci sont déjà en colère contre la maux causés par les méfaits des cadres de présentation.
En vérité, il y a beaucoup à dire contre les structures en grille. Ils sont lourds, ont une courbe d'apprentissage et jettent souvent la sémantique par la fenêtre. De plus, il y a un million de ces choses, ce qui rend difficile le début des discussions sur les pratiques standard.
Si vous tombez dans le camp des ennemis des frameworks CSS, ne vous inquiétez pas, il existe encore de nombreuses ressources de conception de grille ci-dessous qui n'ont rien à voir avec les frameworks. En attendant, voici quelques alternatives aux frameworks de grille.
Déplacement de vos propres dispositions de grille à la volée
J'ai récemment publié un article sur la réalisation rapide de dispositions complexes multicolonnes, sans aucun cadre compliqué ni nom de classe non sémantique. Il est si facile de ne plus jamais utiliser un framework pour la mise en page.
Sans grille
Gridless est une plate-forme HTML5 et CSS3 à option permettant de créer les premiers sites Web mobiles multi-navigateurs réactifs avec une belle typographie. Cela ne vient pas avec des systèmes de grille prédéfinis ou des classes non sémantiques.
Stack Layout
Un système de disposition CSS à base de composants, de largeur flexible, qui utilise beaucoup les éléments inline-block.
Boilerplate HTML5
HTML5 Boilerplate devient rapidement le point de départ standard de projets de conception Web modernes. La dernière fois que j'ai vérifié, il y avait tout ce que vous pourriez souhaiter à l'exclusion d'un système de grille.
Old School Frameworks
Ce sont les grilles grand-père qui existent depuis des années. Quelques-uns d'entre eux commencent vraiment à montrer leur âge, vous pouvez donc ne pas vouloir les utiliser aujourd'hui.
Plan
Blueprint est un framework CSS qui vise à réduire votre temps de développement. Il vous donne une base solide pour construire votre projet sur le dessus, avec une grille facile à utiliser, une typographie judicieuse, des plugins utiles et même une feuille de style pour l’impression.
960.gs
960.gs est le point de départ de la plupart des gens qui se lancent dans les frameworks CSS et les systèmes de grille. Il est encore très populaire et bon nombre des nouveaux cadres reposent au moins partiellement sur le travail effectué ici.
Système de grille Fluid 960
Une variante populaire de 960.gs avec une disposition fluide qui ajuste automatiquement sa largeur en fonction de la taille de la fenêtre du navigateur.
YAML
? Encore une autre mise en page multicolonne? (YAML) est un framework (X) HTML / CSS permettant de créer des mises en page flottantes modernes et flexibles. La structure est extrêmement polyvalente dans sa programmation et absolument accessible aux utilisateurs finaux.
Superbes nouveaux cadres
Perkins
Perkins combine la nouveauté brillante de HTML5 et CSS3 avec la puissance impressionnante de LESS.js pour créer un framework CSS ultime. Si vous aimez expérimenter des solutions CSS futuristes, c'est un excellent cadre pour vous. Il utilise une variante de la grille de 1 Ko.
Moins de cadre
Less Framework est un système de grille CSS réactif permettant de concevoir des sites Web adaptatifs. Il contient 4 mises en page et 3 ensembles de préréglages de typographie, tous basés sur une seule grille. ?Moins? en ce sens, ne doit pas être confondu avec LESS.js d’en haut. Je sais, c'est déroutant. Ils doivent nommer celui-ci autrement!
Colonne
Un système de grille CSS réactif qui aide les navigateurs de bureau et mobiles à bien jouer ensemble. Columnal utilise son propre système de réseau hybride, empruntant à quelques autres.
Squelette
Skeleton est un framework réactif génial sur lequel j'ai déjà écrit à plusieurs reprises. Si vous n'êtes pas sûr du temps supplémentaire et de la courbe d'apprentissage nécessaire pour une conception réactive, vous devriez vérifier cela. Squelette est construit librement sur 960.gs.
52Cadre
Un framework qui utilise HTML5, CSS3 et JavaScript pour optimiser la compatibilité des pratiques de développement Web modernes sur tous les principaux navigateurs. Il est basé sur une simple grille de 16 colonnes.
Cadre G5
(X) HTML5, CSS3, PHP et jQuery Front End Framework. G5 Framework a commencé comme un projet personnel. Dans le but d’accélérer le flux de travail, de réutiliser les meilleures pratiques de codage et des techniques de codage similaires, le cadre sert de fichier de démarrage pour les nouveaux sites Web.
La grille de G5 Framework est basée sur Easy Grid.
Système de grille de pourcentage facile avec HTML5
Les principales caractéristiques de ce système de grille sont que toutes les colonnes ont une largeur basée sur un pourcentage, de sorte qu'elles s'adaptent à l'élément conteneur. Cela signifie qu'en utilisant ce système, vous n'avez pas besoin de définir manuellement la largeur de chaque colonne, vous pouvez simplement le jeter à l'intérieur d'un conteneur. Les largeurs et les gouttières des colonnes sont automatiquement définis.
Cabine CSS
Les frameworks CSS ont tendance à être super gonflés. Cabin résout ce problème avec un système d’extension modulaire qui vous permet d’ajouter uniquement ce dont vous avez besoin. Diverses extensions de grille sont prises en charge.
jQuery maçonnerie
jQuery Masonry n'est pas vraiment une structure CSS, c'est un plugin JavaScript qui permet aux conceptions basées sur une grille qui utilisent une sorte de système de flottement vertical. C'est un outil génial qui est très populaire en ce moment.
InuitCSS
Ce framework a tout pour plaire: plugins progressif tablette mobile flexible sensible extensible accessible pragmatique fonctionnel utile prêt pour la production plus. Le système de grille est adapté à vos besoins.
Cadres de faible empreinte
Framework de grille CSS 1 ligne
Je pensais qu'une seule ligne CSS Grid avait un son dingue, mais ce gars-là a réussi. Je ne suis pas sûr que ce soit pratique dans le monde réel, mais je suis impressionné par la pensée qui y est allée!
1 KB Grille
C'est l'un de mes vieux favoris.C'est un système de grille dépouillé à l'essentiel, il ne nécessite aucune vidéo en soixante minutes. Si vous ne comprenez pas les systèmes de grille CSS, commencez ici.
Minuscule grille fluide
Tout comme la grille 1KB, seul le fluide est amusant.
CSS mince
SlimCSS est un framework CSS léger qui établit une base solide pour plusieurs navigateurs avec de nombreuses fonctionnalités essentielles tout en restant aussi petit que possible.
Autres cadres
La gravité
Gravity est un framework basé sur SASS permettant de créer des sites Web HTML5 puissants et faciles à gérer. Il vous aide à prototyper rapidement vos idées et vous facilitera généralement la vie beaucoup plus facilement.
1140 grille
La grille 1140 s'intègre parfaitement dans un moniteur 1280. Sur des moniteurs plus petits, il devient fluide et s'adapte à la largeur du navigateur.
Au-delà d'un certain point, il utilise des requêtes de média pour servir une version mobile, qui empile essentiellement toutes les colonnes les unes sur les autres pour que le flux d'informations ait toujours un sens.
La grille carrée
Un framework CSS simple pour les concepteurs et les développeurs, basé sur 35 colonnes de largeur égale. Il vise à réduire le temps de développement et à vous aider à créer des sites Web bien structurés.
Grille fluide
Fluid Grid est un nouveau système de grille qui fonctionne de la même manière que Blueprint ou 960, mais avec n'importe quelle largeur de page, même les dispositions fluides. Il est basé uniquement sur CSS.
EZ-CSS
EZ CSS est un type de grille complètement différent. Il utilise un système de modules unique qui vous permet de copier, coller et imbriquer des dispositions simples pour créer des pages complexes. C'est un peu difficile à comprendre, mais une utilisation vraiment brillante de CSS.
FEM CSS Framework
FEM CSS Framework est un système de grille de 12 colonnes + styles communs CSS, d’une largeur de 960 px, permettant de développer facilement et rapidement des mises en page Web.
Il est basé sur le système 960 Grid, mais avec une philosophie différente qui le rend plus flexible et plus rapide pour jouer avec les boîtes.
CSS élastique
Un simple framework css pour la mise en page d'interfaces Web, basé sur les techniques de mise en page imprimées de 4 colonnes, mais avec des possibilités de combinaisons de colonnes illimitées. et capacité à réaliser facilement une mise en page élastique, fixe et liquide.
Atatonic CSS
Ce cadre est principalement destiné à la typographie, mais un système de grille très léger est également en place.
De base
Baseline facilite le développement d'un site Web avec une grille agréable et une bonne typographie. La grille dans Baseline est composée de 4 colonnes de base, pour plus de flexibilité, chaque colonne peut être divisée en 2 unités.
Emastic
Un cadre CSS léger à grille fluide mettant l’accent sur la typographie.
Grille d'or
Le Golden Grid est un système de grille Web. C'est un produit de la recherche du système de grille moderne parfait. Il s'agit d'un outil CSS pour les sites Web basés sur une grille.
Frak
Frak est un framework CSS pour la création de grilles fluides. Son concept intéressant consiste à utiliser des multiplicateurs comme noms de classe.
Cadre facile
Easy est un framework CSS / HTML / JavaScript démarré en tant que projet personnel puis développé. L’idée sous-jacente est de réduire le temps consacré à la configuration du modèle HTML maître de base en réutilisant les mêmes techniques de codage. Inclut un système de grille simple basé sur des pourcentages.
la grille
Grid est un système de grille de fluide simple et minimal pouvant circuler à l'intérieur de tout conteneur de fluide ou fixe ou bien fonctionner avec un autre système de grille.
520 grille
Un système de grille pour la conception de pages Facebook, fou mais vrai.
Outils et constructeurs de grille
Calculateur de grille
Une calculatrice à grille vraiment géniale avec support des modèles Photoshop et Illustrator.
Calculateur de grille et générateur
GridCalc est une calculatrice de grille facile à utiliser. Entrez simplement la largeur souhaitée de votre page et une plage approximative pour la largeur de votre colonne et de votre gouttière. La calculatrice vous donnera toutes les combinaisons possibles dans les limites que vous avez entrées.
GuideGuide
GuideGuide est mon nouveau plugin favori pour Photoshop. Cet outil gratuit place automatiquement des guides dans votre document Photoshop en fonction de votre saisie.
Constructeur de grille 3? 4
Grid Builder vous permet de créer facilement une grille HTML en un simple glisser
et déposer l'interface. C'est un outil vraiment intéressant qui vous permet de créer des grilles personnalisées pour chaque projet.
Gridr Buildrrr
Un constructeur de grille personnalisé super simple et efficace.
Boks
Un outil vraiment génial et sous-estimé qui vous permet de construire des implémentations personnalisées de Blueprint. Découvrez mon tutoriel ici.
Système de grille variable
Le système de grille variable est un moyen rapide de générer une grille CSS sous-jacente pour votre site. Le fichier généré par CSS est basé sur le système de grille 960.
ZURB CSS Grid Builder
Un excellent constructeur de grille qui prépare une grille très simple avec une empreinte minuscule.
Plaque
Vous souhaitez utiliser une conception basée sur une grille sans cadre? Cet outil crée une image d’arrière-plan personnalisée qui facilite la réalisation de la disposition de la grille par vos propres moyens.
Il suffit de mettre vos dimensions après notre URL pour obtenir une image de référence en arrière-plan à utiliser dans votre navigateur. Les grilles étant créées à la volée, toute combinaison devrait fonctionner.
Gridulator
Un autre outil d'image de fond comme Griddle. La principale différence est que Griddle génère une URL que vous pouvez visiter, ce qui vous donne une image réelle (j'aime mieux Griddle).
Sites d'amoureux de la grille et articles à lire absolument
Basé sur la grille
Une galerie de conception Web remplie d’excellents exemples de conception basée sur une grille.
Design By Grid
Un autre excellent site consacré aux outils, articles et autres ressources basés sur une grille.
Le système de grille
Un guichet unique pour tout ce qui concerne le réseau. C’est une source ancienne, mais il semble qu’elle soit toujours mise à jour régulièrement.
Conception basée sur une grille simplifiée
Un guide imbattable sur les principes de conception basés sur une grille. Cela devrait être la première étape de votre quête de conception de grille.
Le système de grille 960 en toute simplicité
Une introduction complète au système de grille 960 par les débutants.
Concevoir avec une approche basée sur la grille
Un article plus ancien de Smashing Mag, mais il a toujours des tonnes d'excellentes ressources et informations à consulter.
Repenser les grilles CSS
Mark Boulton explique comment le support CSS natif pour les grilles devrait fonctionner. Une bonne lecture!
Conclusion
J'espère que vous avez apprécié cette vaste collection et que vous disposez de suffisamment de ressources de conception basées sur une grille pour vous tenir occupé pendant des mois.
Laissez un commentaire ci-dessous et dites-nous ce que vous pensez des outils et des ressources ci-dessus. Utilisez-vous des cadres de grille? Lesquels et pourquoi?