Share
La grille 960 est un framework CSS qui permet aux développeurs de prototyper rapidement des conceptions. Ce sont d'excellents outils pour créer des maquettes. Pourquoi? Parce qu'ils font tout le travail lourd vous permettant d'obtenir des résultats plus rapides.
Cela semble bien, mais comment fait-on cela? Il existe de nombreux articles sur Internet qui expliquent ou soutiennent les frameworks CSS, mais aucun n’a de contenu pour aider les lecteurs inexpérimentés à prendre une décision. Celui-ci est différent. Cet article couvre l’ensemble du processus de prototypage. Imaginez-vous un dessin et vous avez besoin d'une maquette pour le client. Cet article explique les bases de la grille 960, la planification de la conception et le codage du prototype. Le plan d'échantillonnage exploitera la plupart des fonctionnalités de la grille 960, ce qui vous donnera une base de connaissances solide sur laquelle vous pourrez travailler. Après avoir vu la conception ci-dessous, il est temps de comprendre le fonctionnement de la grille 960..
La grille 960 fonctionne en utilisant des classes par héritage. La grille 960 fournit deux grilles: 12 et 16 colonnes. Le conteneur principal a toujours une largeur de 960px. L'utilisation de 960 permet la plupart des combinaisons de colonnes tout en étant facile à utiliser. Nous utiliserons la grille de 12 colonnes pour coder cette conception, mais nous n'utiliserons pas toutes les 12 colonnes. Chaque cellule de la grille a un marge: 0 10px. Cela crée une gouttière de 20px. Lors de la création d'une ligne, la largeur totale de tous les éléments totalise jusqu'à 960. Consultez la page de démonstration de la grille 960. Vous verrez une belle grille avec toutes sortes de combinaisons. Chaque cellule de la grille a une classe qui spécifie sa largeur. Voici la répartition des largeurs de colonne pour une grille de 12 colonnes.
Chaque largeur correspond à un nom de classe formé comme ceci: grid_X où X est un numéro de la liste ci-dessus. Si vous voulez un bloc de largeur 940, utilisez la classe grid_12. Comment la grille 960 sait-elle quelle est sa largeur? Chaque grid_x est un sélecteur conteneur_Y .grid_X où Y est 12 ou 16 pour les colonnes. Permet de plonger dans un code. Voici comment créer une grille à deux lignes dans un conteneur de 12 colonnes. Laissez la première ligne être 940px, et la deuxième ligne contient deux colonnes égales.
940px
460px
460px
Lorsque vous créez une ligne dans la grille, assurez-vous que tous les nombres enfant grid_X correspondent au nombre de colonnes que vous utilisez. Cela garantit la largeur correcte. Deux divs de grid_6 totalisent 12. Vous n'êtes pas limité aux mêmes nombres. Vous pouvez également utiliser 6, 4 et 2. Voilà, une grille rapide prête pour le contenu. Maintenant que vous savez comment fonctionne la grille 960, voyons comment créer la maquette.
Visualiser la grille de conception est facile. Il y a une ligne pour l'image d'en-tête, une ligne pour la barre de navigation, une ligne avec 2 colonnes pour le titre et l'affiche, une entretoise, 4 colonnes, une entretoise, un pied de page avec 3 colonnes. Cliquez sur l'image pour le code.
Après avoir vérifié le visuel, vous devez comprendre comment créer la grille de la maquette. En utilisant les largeurs, faites correspondre les numéros de classe de la liste et lançons du code ensemble. N'oubliez pas d'ajouter la division de compensation à la fin de chaque ligne. N'oubliez pas d'inclure les feuilles de style incluses dans le paquet Grid 960.
Le squelette est prêt. Il est temps de commencer à superposer le dessin. Les barres vertes ne sont que des divs avec une couleur de fond et une hauteur. La barre de navigation n'a pas de hauteur définie. Au lieu de cela, il sera contrôlé par la taille des liens à l'intérieur. N'oubliez pas d'ajouter également l'image d'en-tête.
div.spacer background-color: # 8FC73E; hauteur: 1em; div # navbar background-color: # 8FC73E; remplissage: 10px 0;
Appliquez la classe pour corriger les divs grid_12 et définir l'ID.
Les colonnes du milieu ne nécessitent aucun effet. Ajoutez du texte pour remplacer le design. Vous pouvez en faire ici. Avant de vous attaquer à la partie supérieure, passez au pied de page. Dans la capture d'écran, le pied de page est de couleur unie. Vous ne pouvez pas accomplir cela avec le code actuel. Un diviseur autour des trois dernières colonnes résout le problème. Alors vous pensez, pas de problème, insérez simplement une div. Cela casse la grille puisque la grille 960 dépend des parents et des enfants pour appliquer les styles (souvenez-vous du sélecteur container_12 .grid_4?) Une sous-grille résout le problème. La grille 960 autorise les grilles imbriquées. Créez une sous-grille en ajoutant un div grid_12, puis placez le grid_4 à l'intérieur. Lors de l'utilisation de grilles imbriquées, les éléments enfants nécessitent des classes spéciales. Le premier enfant a besoin d'une classe "alpha" et le dernier d'une classe &qout;omega "Modifier le balisage pour refléter les modifications et appliquer des modifications stylistiques au pied de page.
div # footer background-color: # e5e5e6;
Excellent! Maintenant, le pied de page a une couleur de fond unie et vous pouvez ajuster la taille des colonnes si nécessaire. Ajouter du texte factice dans les colonnes du pied de page pour le moment et permet de passer à la barre de navigation. La barre de navigation est une simple liste non ordonnée. Ajouter des liens et un style approprié.
div # navbar ul list-style: none; bloc de visualisation; marge: 0 10 px; div # navbar ul li float: left; marge: 0 1.5em; police: gras 1em Arial;
Sucré. La page se rapproche vraiment. Il ne reste plus qu'à créer les effets de bloc sur la partie supérieure. C'est plus sinistre qu'il n'y parait. Avant de plonger, vous devez comprendre certaines choses à propos de Grid 960 et des frameworks CSS en général..
Les lecteurs astucieux ont peut-être réalisé quelque chose. La page est extrêmement rigide. Tout a une taille définie et le fait de changer de taille crée des problèmes ou casse potentiellement le design. Les concepteurs sacrifient également certains de nos objectifs de conception, car ce que permet la grille 960. Par exemple, le plan de sondage avait une largeur de 1000 pixels. La grille 960 crée uniquement des grilles d'une largeur de 960 px, de sorte que la taille supplémentaire est perdue. Et si vous voulez faire votre page 1000px au lieu de 960? En bref, vous ne pouvez pas faire de lourdes modifications au code. Le cadre verrouille les concepteurs dans un ensemble de contraintes. Supposons que le client souhaite une conception plus large ou plus fine. Le concepteur devra très probablement supprimer le code qu’il a écrit pour atteindre ses nouveaux objectifs. Il y a un autre problème qui n'a pas encore été révélé - les colonnes de hauteur égale. Étant donné que les colonnes du milieu partagent toutes le même arrière-plan, elles semblent avoir des hauteurs égales. Dans le pied de page, une division wrapper place un arrière-plan derrière les 3 colonnes. La grille 960 ne vous donne pas des colonnes de hauteur égale. Il existe bien sûr un moyen de le faire vous-même. Étant donné que nous prototypons une conception, ne perdez pas de temps à vous inquiéter des détails plus détaillés sur le fonctionnement de la conception en production. Vous essayez seulement de transmettre les idées à ce stade. Il faut également prendre en compte un autre aspect de la grille 960 avant de s’attaquer à la partie supérieure. La grille 960 s'appuie sur des éléments et des marges dimensionnés pour créer une ligne correctement dimensionnée. Si vous appliquez un rembourrage ou des bordures, la conception est interrompue. Si vous le faites, vous devez ajuster la taille de la div pour refléter les modifications. Être fatigué de cela. Ajuster la taille des éléments à deux endroits sera toujours source de confusion et rendra la conception plus difficile à maintenir. Cela étant dit. Permet de finir la partie supérieure.
Heureusement, vous pouvez manœuvrer autour de colonnes de hauteur égale dans la section supérieure. Puisque l'image de droite correspond à une hauteur et une largeur définies, nous connaissons la taille de l'autre colonne. Créez l'effet de bloc en ajoutant un nouveau div avec une bordure à l'intérieur des div existants. N'oubliez pas de définir les hauteurs. Ne définissez pas de remplissage sur les divs car cela changerait la largeur du bloc et casserait la grille. Spécifiez plutôt une marge sur un élément enfant. Cela ne changera pas la largeur du bloc. Appliquez une marge à un élément en ligne. Cela crée l'effet souhaité et le texte est ajusté.
Utilisez une classe au lieu d'un ID car la classe topSection est appliquée à deux divs. Cela nous permet également de changer les hauteurs plus facilement. Choisissez une hauteur (ce nombre dépend vraiment de vous) et créez une classe.
div.topSection div border: solid 10px # e5e5e6; hauteur: 280px; div.topSection div p margin: 10px;
Cool! Permet de vérifier l'avancement.
Prêt à remplir les deux cases? Allez-y et remplissez la partie gauche avec un exemple de texte. Ne faites pas trop ou il débordera la boîte. Cela crée un problème potentiel dans la conception finale. Comment savez-vous combien de texte est trop? Pour la conception de la production, le concepteur devrait créer une fonction permettant uniquement à un nombre X de mots d'arrêter le débordement. Il est temps de préparer l'image de l'affiche. Avant d'insérer une image, déterminez les dimensions. Si vous êtes bon en maths et que vous comprenez bien le modèle de boîte, vous savez probablement déjà quelle devrait être sa taille. Si vous ne le faites pas, lancez FireBug et entrez dans le DOM. Cliquez sur Inspecter. Descendez au div en question et cliquez dessus. Ouvrez l'onglet Layout. FireBug affichera une référence de modèle de boîte utile. Consultez l'image pour obtenir de l'aide. Cliquez sur l'image pour l'agrandir.
La capture d'écran montre l'affiche div est 360x280. Trouvez une image et créez un style. J'ai décidé de laisser l'image remplir l'intégralité de la division (contrairement au plan d'échantillonnage.) Si vous souhaitez créer une marge de 10 pixels, veillez à réduire les dimensions de 20 pixels de chaque côté..
img # poster width: 360px; hauteur: 280px;
Vous devriez avoir ceci. La maquette est terminée. N'hésitez pas à ajouter du texte réel et à changer l'image.
Maintenant que le prototype est terminé, faites le bilan de ce qui a été fait. Vous avez réussi à prototyper rapidement un dessin. La grille 960 a facilement créé la grille pour nous. Où aller d'ici? Naturellement, nous montrions le client et voyions ce qu'il en pensait. Il y a cependant quelques mises en garde. Avez-vous testé cette conception dans IE6 ou IE7? Non, devrions-nous? Non, ceci est un prototype. Voici à quoi cela ressemblerait en production. Il est naturel que toutes les bizarreries de navigateur soient résolues avant la production. Et si les clients veulent créer un design plus complexe? Dans ce cas, vous allez rapidement voir les limites du cadre. Que faire si le design doit être liquide ou élastique? Le cadre ne fera pas ça. Vous auriez besoin de partir de zéro. N'oubliez pas que les frameworks CSS ne résolvent pas tous vos problèmes, ils vous aident à résoudre certains problèmes. La grille 960, ainsi que d’autres, sont idéales pour assembler des prototypes. Vous pouvez tout aussi bien utiliser les concepts de la grille 960 dans le code de production, mais il n'est pas recommandé de s'en tenir à un cadre tout au long de la production. Les frameworks CSS sont comme n'importe quel outil, ils ont leur utilité. Dans cet esprit, aller de l'avant et prototype!
Accentsconagua