Gridpak: spectaculaire générateur de maillage adaptatif

Il ya des centaines de générateurs de grille en ligne pour les concepteurs et développeurs web. Il vise à créer une base sur laquelle construire une disposition beaucoup plus rapide, standard et modulaire. Normalement ce que vous obtenez à partir des générateurs est un fichier HTML et un échantillon de feuille de style CSS pour la structure de colonnes et d'espaces et crypté.

Gridpak est un autre générateur de grilles, mais j'ai fait l'essai et probablement le meilleur que j'ai utilisé jusqu'à présent. Le site du projet est super simple, beau et très facile à utiliser. Le code et les fichiers que vous téléchargez sont très bien construits, avec des commentaires, des suggestions et des clarifications. Et surtout, a une façon très simple de configurer des feuilles de style réactif qui ont la capacité de s'adapter aux différents écrans et périphériques, où elle est affichée.

En Gridpak pouvez personnaliser le nombre de colonnes dans votre mise en page, votre rembourrage et l'espacement entre eux. Et vous voyez les changements en direct sur l'affichage du résultat. Cet affichage peut le rendre plus large ou plus étroit, vous reporting en temps réel sur la largeur que vous travaillez et vous permet de définir des points d'arrêt. De cette façon, vous pouvez cocher les points de changement de résolution pour générer la moitié requêtes correspondantes.

Aussi, lorsque vous générez votre grille, il télécharge également un fichier, vous pouvez facilement inclure JavaScript dans votre code HTML pour transformer la couche semi-transparente superposée à la grille, qui peut être très utile comme guide visuel lors de la mise en page du site. Et cette superposition avec la grille fonctionne parfaitement lorsque vous redimensionnez la fenêtre et rendre les essais d'ajustement mise en page.

Une base de projet Gridpak se compose de:

• Un fichier CSS avec les styles nécessaires à la grille.
• Un fichier de moins, le langage de style MOINS .
• Fichier de Sass, le style linguistique Sass .
• Un fichier Javascript pour activer / désactiver la superposition avec les colonnes.
• Plusieurs des images PNG, un pour chaque intervalle de résolution configurée.
• Un fichier README avec des instructions sur la façon d'utiliser le projet.

Liens:

• Gripak: le générateur de gris réactive
• Via: Smashing Magazine Twitter