Qu’est ce qu’une grille aujourd’hui ? Les grilles ont été utilisées dans l’édition imprimée bien avant le Web n’existe. Grilles sont le fondement invisible utilisée pour réaliser la cohésion visuelle dans le magazine et la conception de pages de journaux et de mise en page. Le système de grille en css offre une approche efficace pour la conception et la mise en page. Elle aide à communiquer les principaux messages clairement au lecteur. Ils ont créé des hiérarchies ordonnées, des relations proportionnelles, et clairement le chemin visuel de l’œil à voyager. Le même concept a été adapté pour la conception de page web pour la même raison, en utilisant le CSS (Cascading StyleSheets) code pour positionner les éléments HTML. On ne peut pas parler de grilles, sans parler de Framework de développement et de création de webdesign pour les sites internet. Comme le dit si bien André Gide, l’art nait de contraintes, vit de luttes et meurt de liberté. Ce qu’on pourrait traduire librement par : sans contrainte, l’art n’est rien ou encore par trop de liberté, nuit.

Bien commencer avec la grille.

Les premières recherches graphiques et les premiers placements de blocs s’effectuer librement, à l’instinct. Lorsque le résultat ressemble à quelque chose, qu’il est temps de déterminer l’espacement entre colonne de la grille (le pas).

Le Framework pour travailler avec la grille

Mais c’est vivement conseillé pour gagner du temps lors de la conception de votre page. Un conseil : Choisissez un voir deux Framework au maximum et ne changer plus ; Cela vous permettra de gagner du temps, de la créativité et de la réactivité. Personnellement je travaille beaucoup avec Blueprint

Liste des grilles et de leurs framework.

Mais l’univers des Framework est vaste. Beaucoup d’outils sont disponibles. Faire le bon choix lors du démarrage d’un nouveau projet n’est pas facile. Chaque grille possède sa propre méthode et son utilisation spécifique.

Blueprint: Une grille CSS-cadre

Blueprint CSS grille comprend un reset CSS qui élimine les dernières divergences entre les différents navigateurs. Il ya beaucoup d’outils externes et des modèles pour vous aider dans votre développement web avec Blueprint. Voir quelques démos en direct Le téléchargement est complet. Il comprend tous les éléments nécessaires pour faire un bon design :

• le psd de base
• le petit scripte en Ruby qui va bien pour créer ses propre Template.
• La prise en charge des Template multiples pour un multi site internet.
• Et bien sure les feuille des styles, quelques image et des exemples.

Prototype d’un modèle de style magazine Home Page avec le Cadre de Blueprint CSS

Lorsque Collis a lancé ce site et a demandé aux lecteurs pour les demandes de tutoriel, une commune a été un «magazine de thèmes » comment faire pour les plates-formes de blog. Ce tutoriel se concentre sur la première partie du processus: l’application d’une grille CSS à la conception d’un prototype de modèle de page d’accueil. Ou encore dans Blueprint, un framework pour webdesigner. Il fournit des fondations solides pour vos projets grâce à une grille facile à utiliser, une typographie fine, des goodies utiles et même une feuille de style pour l’impression. Le framework Blueprint, est créé par l’étudiant norvégien Olav Frihagen Bjørkøy Par ailleurs, vous pouvez utiliser le générateur de grille CSS Blueprint pour obtenir des versions plus souples des templates inclus au départ. Que vous ayez besoin de 8, 10, 16 ou 24 colonnes pour votre design, ce générateur autorise désormais plus de flexibilité dans l’utilisation de Blueprint que l’on peut considérer comme le nouveau standard à venir dans l’approche du design web basé sur une grille de mise en page.

960 Grid system

Ce système de grille est conçu pour fluidifier votre chaîne de production avec des dimensions communément utilisées à partir d’une largeur de 960 pixels. Existe en deux parfums : 12 et 16 colonnes pouvant être utilisés séparément ou ensemble. 960 Grid system vaut le détour. Le téléchargement inclut des modèles pour Firework, Photoshops, Inkscape et etc pour que vous puissiez commencer à concevoir votre modèle Web immédiatement. Le fichier PSD qui vient avec des guides prêts concepteurs d’économiser beaucoup de temps.

Prototypage avec le Cadre de grille CSS 960

Grille 960 est un cadre de grille CSS qui permet aux développeurs de prototyper rapidement conceptions. Ils sont d’excellents outils pour la création de maquettes. Pourquoi? Parce qu’ils font tout le levage lourd vous permettant d’obtenir des résultats plus rapides.

Construire un thème journal avec WP_Query et le CSS 960 Grille-cadre

WP_Query est un outil puissant pour contrôler ce qui sort de la boucle. Aujourd’hui je vais vous apprendre tout comment l’utiliser pour faire un thème 3 colonnes de journaux qui a toutes les messages de votre blog principal dans la colonne principale, et sur le côté d’un ensemble de messages avec une certaine catégorie. Nous allons utiliser le cadre de 960 Grille CSS pour la présentation de base et de réinitialisation de notre thème, il sera hachez beaucoup de travail hors ce qui est nécessaire!

SenCSS

Un frameword « zen » qui ne vous obligera pas à adopter un système de grille particulier mais qui fournit plutôt un ensemble de styles pour les parties les plus répétitives de votre travail sans trop s’éloigner du style par défaut des navigateurs avec une grille verticale en 18 pixels. Fournit des jeux de polices de caractères spécifiques pour Windows, Mac et Linux. SenCSS ne comprend pas un système de mise en page, mais il fournit d’autres choses comme base, les polices, rembourrages, les marges et plus encore. Il est livré avec une version commentée et une version minified qui convient à une utilisation en production.

Bootstrap, from Twitter

Le petit Framework qui monte qui monte. Attention il est sur le point de conquérir le marché car il permet de générer de jolies pages en HTML 5 / CSS3 en 3 clics. A suivre de prêt.