Nous commençons tous quelque part. En tant que nouveau designer, je ne pouvais pas me soucier moins de la structure dans mes créations. Je voudrais ouvrir Photoshop et pousser les pixels jusqu'à ce que je fasse quelque chose qui me semblait cool. Comme j'ai appris à coder, mon processus était pareillement aléatoire.
Je ne me retourne pas avec le goût du passé. Mon travail était bâclé et flou. Je n'avais pas d'objectifs clairs. Au début, je suppose que ce n’est pas si grave, étant donné que la plupart de mes études de conception ont été réalisées sur des sites de didacticiels Photoshop, mon travail n’a pas été terrible.
Mais ensuite j'ai appris sur les systèmes de grille. J'oublie exactement quand et comment ils sont devenus populairement utilisés dans la conception de sites Web, mais soudainement, tous les sites liés à la conception de sites Web auxquels je me suis rendu débordaient d'articles sur 960.gs ou sur un autre système de grille. L'importance de fournir une structure visuelle cohérente dans nos mises en page a été soulignée par tous les grands noms et transformée en une tendance.
Tout aussi rapidement, la tendance est devenue un standard de l'industrie, et la plupart d'entre nous ne réfléchissent plus à deux fois à la question de savoir si nous allons ou non mettre en place un système de grille. La seule question est de savoir laquelle? Allons-nous aller avec l'un des grands noms ou une variante moins connue, ou même faire notre propre?
Dans cet article, je voudrais examiner la deuxième option: les systèmes de grille nouveaux et moins connus. Il y a toujours quelqu'un qui trouve de nouveaux moyens de résoudre les divers problèmes de mise en page, et je pense qu'il est important de se familiariser avec autant d'approches que possible, voyons donc quelques grilles de base.
34Grid est tout au sujet de la distribution de colonne égale. Il peut également accueillir des distributions inégales, mais ce n’est pas le but principal de ce système de grille. Pour ceux d'entre vous qui veulent diviser la plupart ou la totalité de vos pages en portions horizontales égales, voici votre cadre.
Comment ça marche
Le framework est conçu pour être adaptable à vos besoins, vous ne devez donc pas simplement le télécharger et y aller. Vous devez d'abord configurer votre grille sur la page d'accueil du projet. Un formulaire rapide vous permet de déterminer combien de colonnes seront alignées, quelle sera la taille de vos marges et d’appliquer ou non les transitions CSS3 à vos colonnes lorsque votre fenêtre change de taille.
Le code lui-même est divisé en deux fichiers CSS: un avec le code de base et un avec toutes les requêtes de média. Les classes CSS sont simples. Appliquer '.col_1' à une colonne remplira la ligne à 100%. '.col_2' va créer une colonne avec une largeur de 50%, etc.
De plus, les éléments img, les objets et certains autres sont automatiquement redimensionnés. Il existe une classe supplémentaire pour aider les objets vidéo à se comporter. Le site Web du projet fournit des conseils sur la manière de faire en sorte que Facebook et Twitter s’intègrent bien.
Désavantages
Il ne semble pas y avoir de moyen d'imbriquer des colonnes ou de créer des arrangements de colonnes plus complexes dans une seule ligne. D'un autre côté, si vous n'avez pas besoin de complexité et que vous souhaitez simplement un cadre simple que vous pouvez ajuster à tout moment, 34Grid fera le travail.
Grille simple est une option réactive qui atteint une largeur maximale de 1140 pixels. En d'autres termes, alors qu'il est conçu pour être agréable avec les tablettes et les téléphones, Simple Grid garantit que les écrans plus grands ne sont pas exclus.
Comment ça marche
Comme son nom l'indique, ce système de grille est assez léger. Le tout vient dans un fichier CSS non compressé de quatre kilo-octets.
Les noms de classe sont conçus pour être facilement compris: «.col-2-6» divisera la ligne en six colonnes et définira la largeur de la colonne à deux colonnes de largeur. Chaque ligne peut être divisée en une colonne, ".col-1-1", ou deux, trois, quatre, etc. jusqu'à douze.
Désavantages
Comme pour Grid, il ne semble pas y avoir de disposition pour les colonnes d'imbrication. De plus, la façon dont les marges sont gérées pour les première et dernière colonnes peut entraîner des difficultés lors de la création, par exemple, d’une galerie de photos.
Celui-là est pour quiconque préfère une grille simple avec des noms de classe en anglais simple. Il est réactif, facile à comprendre et rapidement implémenté.
Comment ça marche
Après la mise en place de vos éléments habituels ".container" et ".grid", les colonnes sont implémentées à l'ancienne. Une classe ('.unit') est utilisée pour définir les attributs généraux d'une colonne et une autre classe est utilisée pour définir la largeur. Les lignes peuvent être divisées en 2 à 5 colonnes, et les noms de classes ressemblent à ceci: ".one-of-three, .two-of-three".
Sont également inclus certains styles typographiques de base.
Désavantages
Encore une fois, il s'agit d'un cadre de grille conçu pour des mises en page simples, donc pas de disposition pour les colonnes imbriquées. De plus, il n'y a qu'un seul point d'arrêt, défini sur une largeur de fenêtre de 650 pixels, de sorte que certaines de vos colonnes risquent de se retrouver prématurément assez larges.
Matt (alias Aubaine ) est un peu comme moi. Il aime le design, mais n'aime pas autant les maths. En conséquence, son Grilles Proportionnelles semble faire disparaître autant que possible les calculs sans fin en fonction de la box-sizing propriété. Le résultat est un système de grille complet, mais assez léger, qui couvre vos bases pour une présentation réactive.
Comment ça marche
Quand je dis que ce système dépend de box-sizing Je veux dire que les colonnes ont des largeurs en pourcentage sans tenir compte des gouttières. Les gouttières à largeur fixe sont définies par padding ; et box-sizing s'assure que les colonnes jouent bien ensemble.
Les largeurs de gouttière et la plupart des autres mesures sont définies avec "ems". Fidèles au nom de cette grille, les classes de colonnes sont proportionnelles (c.-à-d. .col-one-third , .col-two-thirds ), et les colonnes sont plus ou moins imbriquées, ce qui est quelque chose que j'aime beaucoup.
Les classes sont incluses pour modifier les dimensions des colonnes à trois points de rupture différents. Les requêtes médias elles-mêmes sont structurées selon le principe du «mobile d'abord», conformément aux pratiques standard.
Il existe une feuille de style distincte pour Internet Explorer 8 et les versions antérieures. Voyant que IE8 ne prend pas en charge les requêtes multimédias et que les versions plus anciennes ne prennent pas en charge box-sizing , ils sont fournis avec une disposition à largeur fixe.
Sont également inclus les fichiers SASS (à la fois .sass et .scss) pour une personnalisation rapide et facile du système de grille.
Désavantages
Cela ne me dérangerait pas d'avoir plus de largeurs de colonnes avec lesquelles travailler (quarts, sixièmes, huitièmes). Sinon, il s’agit d’un système de grille largement exempt d’erreurs et bien arrondi.
Parmi les systèmes de grille avancés de cette liste, Un% est le plus simple, mais ce n'est en aucun cas incomplet. Il est conçu pour accueillir des écrans un peu plus grands et des éléments d'interface utilisateur volumineux, si sa page d'accueil est une indication quelconque.
Le nom vient du fait que la largeur de la grille et de la colonne est calculée de manière à toujours être égale à 99% au lieu de 100%. Cela élimine le besoin de certaines décimales répétitives et arrondies plus complexes que les navigateurs sont souvent obligés de faire.
Comment ça marche
La grille elle-même est divisée en douze colonnes classiques. Les cours sont simples ( .onerow , .col1 , .col6 ), et j'aime que la plupart du temps, vous n'utilisez qu'une seule classe par colonne.
Deux points d'arrêt sont inclus par défaut: 768 pixels et 1024 pixels. Si je suis honnête, cette première semble un peu ... grosse ... mais vous pouvez toujours ajouter un autre point de rupture si vous en avez besoin. Deux exemples de largeur d'agencement de bureau sont également fournis: 1000 pixels et 1200 pixels.
Sur la page d'accueil des projets, vous pouvez télécharger des fichiers d'action Photoshop et des fichiers PSD adaptés à vos mises en page avec ce système de grille.
Désavantages
Mes deux gros problèmes sont les habituels. Tout d'abord: pas de colonnes imbriquées. Les colonnes de nidification sont bonnes, les gens! Deuxièmement: la dernière colonne de chaque ligne doit avoir le .last classe appliquée à elle.
Un cadre de grille CSS inter-navigateurs qui ne cache pas les pixels dans les marges! C'est le slogan pour Flurid, et un rapide coup d’œil à la documentation vous dira pourquoi: le créateur de Flurid ne veut vraiment pas que votre mise en page se brise. Déjà.
Voici la chose, à cause de la façon dont l'arrondi des sous-pixels fonctionne, un navigateur dit parfois "vissez-le" et placez la dernière colonne de la ligne quelque part où il ne doit pas aller. Flurid est conçu pour la stabilité, de sorte que votre mise en page fonctionne toujours, même sur les anciennes versions d’IE. (La compatibilité est répertoriée sous IE5 +.)
Comment ça marche
Flurid a toutes les fonctionnalités dont vous aurez besoin: colonnes régulières, colonnes mixtes, colonnes imbriquées et colonnes décalées. La liste des largeurs de colonne et des classes possibles est étendue et basée sur les ratios. Vous voudrez donc vous donner le temps de vous familiariser avec elles.
Une documentation raisonnablement complète est fournie via GitHub, ainsi qu'un plug-in jQuery qui ajoute des fonctionnalités supplémentaires - oui, il est livré avec son propre plug-in jQuery, qui fournit des colonnes de hauteur égale,
Désavantages
C'est aussi embêtant .last classe à nouveau. Pourtant, selon la documentation, il y a une bonne raison à cela.