Qu'on aime ou qu'on déteste, le 960.gs permet un prototypage incroyablement rapide. En utilisant des classes prédéfinies, vous pouvez réaliser des mises en page assez complexes avec peu d'effort.
Aujourd'hui, nous vous apportons un modèle gratuit d'une seule page, entièrement codé à l'aide du fichier 960.gs. Le modèle a quelques effets CSS3 astucieux et utilise @ font-face pour implémenter une belle typographie personnalisée. Vous trouverez ci-dessous le téléchargement et un didacticiel pas à pas de base sur la création du vôtre.
Vous pouvez télécharger le modèle entièrement gratuitement et l'utiliser comme bon vous semble sans attribution.
Téléchargez le modèle
- Aperçu dans le navigateur
- Télécharger le fichier .ZIP
Voici un aperçu rapide de ce à quoi ressemble le modèle:
Téléchargez les ressources 960.GS
La première chose à faire est de vous rendre sur le site Web du système 960 Grid et de cliquer sur le bouton de téléchargement en haut à gauche de la page.
Le téléchargement contient une tonne de choses, mais nous avons besoin de trois fichiers CSS: reset.css, text.css et 960.css. Ce sont les composants standard sur lesquels le système de grille est construit. Les feuilles de style de réinitialisation et de texte sont totalement facultatives, mais nous les utiliserons pour nous assurer que tout reste cohérent et cohérent sur tous les navigateurs.
Le didacticiel ci-dessous suppose que vous connaissez assez bien CSS et 960.gs. Si vous avez besoin d’un cours intensif sur les systèmes en grille, consultez mon guide 960 dans Six Revisions.
Étape 1: démarrez vos fichiers HTML et CSS
En plus des fichiers CSS fournis avec 960.gs, nous aurons besoin des nôtres. Créez un répertoire sur votre ordinateur, ajoutez les fichiers que vous avez téléchargés et créez un fichier index.html et un fichier style.css.
Collez le code suivant dans votre code HTML pour commencer:
Nous avons essentiellement lié à nos différents fichiers CSS (probablement beaucoup trop pour une seule page Web, mais cela est conçu pour s'étendre) et démarré le corps HTML.
La conception comporte de fines barres grises en haut et en bas de la page. Nous voulons que ceux-ci s'étendent sur toute la page afin que nous les plaçons en dehors de la 960 div.
Ensuite, entre l'en-tête et le pied de page se trouve un div avec une classe de "conteneur_12". Étant donné que nous utilisons la version à 12 colonnes du système 960, cela créera une division qui s'étendra sur la majeure partie de la page et sera automatiquement centrée horizontalement.
Étape 2: Les polices
Nous utiliserons deux polices non Web personnalisées pour ce projet: Lobster et Caviar Dreams. Vous trouverez ces deux éléments dans la bibliothèque du kit FontSquirrel @ Font-Face.
Téléchargez les kits pour chaque police et placez les différents fichiers de polices dans votre fichier de projet. Dans le CSS fourni avec chaque kit, vous devriez trouver le code @ font-face pour intégrer cette police. Prenez l'extrait pour chaque police et collez-le dans votre fichier stye.css.
En utilisant ce code, nous pouvons maintenant inclure ces polices dans nos piles de polices en tapant simplement "Lobster13Regular" ou "CaviarDreamsRegular".
Étape 3: en-tête
Comme nous avons déjà ajouté l'en-tête à notre code HTML, tout ce que nous avons à faire pour qu'il apparaisse est d'ajouter un style de base.
En gros, tout ce que nous avons fait ici est donné à l'en-tête une hauteur et une couleur d'arrière-plan.
Étape 4: HTML de navigation
La première chose qui apparaît après l'en-tête est la navigation. C'est un peu délicat car il flotte sur le côté droit de la page. Nous pourrions définir une classe 960, puis utiliser la commande push, mais il est beaucoup plus facile de ne pas appliquer de classe à la div et de la placer correctement avec CSS.
Pour le HTML, nous avons simplement besoin d’une liste standard non ordonnée avec quelques liens. J'ai ajouté quelques liens de substitution ici, mais vous souhaiterez évidemment le personnaliser pour votre propre site.
Étape 5: Navigation CSS
Ensuite, nous devons définir tout un tas de styles pour la navigation. Les liens, les listes non ordonnées, les éléments de liste et les effets de survol doivent tous être mis au point.
Notez que nous avons défini la police sur Caviar Dreams comme nous l’avons appris ci-dessus et nous sommes assurés que quelques sauvegardes étaient répertoriées au cas où le navigateur ne chargerait pas la police appropriée.
La chose la plus étrange ici est que nous avons utilisé un flottant à gauche et un flottant à droite. Pour que les éléments de la liste apparaissent dans une ligne au lieu d’empilés, nous devons faire flotter le? Ul li? la gauche. Pour que l'ensemble dans son ensemble adhère au côté droit de notre conteneur, nous avons flotté le #nav à droite.
Tout le reste n'est qu'un tas de styles de base tels que la couleur, la taille de la police, etc. Pour différencier le lien en survol, j'ai appliqué un soulignement simple.
À ce stade, votre page devrait commencer à prendre forme. Assurez-vous qu'il ressemble à l'aperçu ci-dessous.
Étape 6: Titre HTML
Après la navigation, ajoutez une div avec un identifiant de? Headline? et une classe de? grid_12 ?. La classe grid_12 rendra la largeur du div égale à celle du conteneur entier. À l'intérieur de cette div place une balise h2 et une balise de paragraphe avec un contenu.
Notez qu'après la navigation et les div titres, il y a une div avec une classe de "clear". C’est ainsi que le système de grille 960 efface les flotteurs précédemment mis en œuvre. Assurez-vous de l'inclure chaque fois que vous souhaitez commencer une nouvelle ligne de contenu.
Étape 7: Titre CSS
Ajoutez ensuite les styles pour le titre, la balise h2 et la balise de paragraphe. J'ai réglé le h2 sur 50px Lobster et le paragraphe sur 25px Caviar Dreams.
Avec cela, votre page devrait maintenant avoir une barre en haut, une zone de navigation et un gros titre agréable.
Étape 8: La grande photo HTML
Pour ajouter une photo, nous allons utiliser un div vide avec la classe grid_12 et définir l'arrière-plan à l'aide de CSS.
Étape 9: La grande photo CSS
Pour le CSS, nous avons défini une image d’arrière-plan pour la div, lui avons donné une bordure de 3 pixels et appliqué une ombre de type CSS3. La bordure blanche n'apparaissant pas sur un fond blanc, l'ombre donne de la profondeur à l'image.
Étape 10: HTML d'élément de ligne
Le dernier morceau de HTML dont nous avons besoin est constitué des zones et du texte au bas de la page.Nous les nommerons avec une classe pour faciliter l'ajout ultérieur.
Pour construire cette section, nous voulons deux colonnes: une pour l'image et une pour le texte à côté. C’est là que le 960.gs nous facilite la tâche. Puisque nous utilisons la version à 12 colonnes, nous voulons que notre nombre total soit douze pour s’étendre sur tout le conteneur.
En appliquant le? Grid_4? classe suivie par le? grid_8? classe, on obtient deux colonnes dont la première est la moitié de la largeur de la seconde (8 + 4 = 12).
Notez que nous avons doublé notre code et inséré différentes images. Cela nous donne deux des? LineItem? zones. Ajoutez simplement un autre fragment en double pour en ajouter un troisième ou un quatrième.
Étape 11: CSS d'élément de ligne
Ensuite, nous ajoutons une série de styles à cette zone pour la rendre belle. Donnez aux images une ombre et un contour et appliquez les polices appropriées.
Notez que nous avons utilisé? Contour? au lieu de? frontière? ici. C'est une astuce CSS soignée qui vous permet essentiellement d'avoir une bordure d'image qui ne bousille pas votre mise en page.
Une fois que vous avez terminé, vos éléments de campagne doivent être magnifiques et être divisés en colonnes clairement définies.
Étape 12: CSS en pied de page
La dernière étape consiste à appliquer les mêmes styles au pied de page que nous avons appliqués à l'en-tête. Cela donne au site un joli contraste lourd en bas et en haut.
Résultat final
Cela devrait vous donner un produit fini de travail! Notez que la plupart de notre travail consistait vraiment à styliser les objets que nous avons placés sur la page. Nous avons passé presque pas de temps à nous préoccuper de notre positionnement. C’est le principal attrait des systèmes de grille comme 960 et Blueprint.
Nous pouvons discuter de la sémantique toute la journée, mais au final, ces outils vous aident à vous concentrer davantage sur la conception et moins sur les problèmes de mise en page. Il est probable que plus vous maîtriserez CSS, moins vous aurez besoin d'utiliser un système de grille pour effectuer la mise en page pour vous, mais jusque-là, il est agréable de résoudre vos problèmes avant qu'ils ne surviennent.
Conclusion
Comme il est inévitable dans ces types de messages, plusieurs personnes laisseront sans doute des commentaires dénigrant les systèmes de grille. La vérité est que je les utilise rarement. Cependant, je vois leur valeur et j'aime bien les tripoter pour voir ce que je peux trouver. En bout de ligne, si vous n'aimez pas 960.gs, ne téléchargez pas le modèle!
Cependant, si vous êtes à l'aise avec les systèmes de grille et autres contenus gratuits, téléchargez le fichier et corrigez-le! Si vous l'utilisez dans un projet, jetez un lien ci-dessous (facultatif) pour que je puisse vérifier comment vous l'avez mis en œuvre et étendu la conception. Si vous avez besoin d'une suggestion, cette grande photo est en passe de devenir un curseur jQuery.