Cours intensif YUI Grids CSS

La bibliothèque d'interface utilisateur de Yahoo est un ensemble assez complet d'outils JavaScript destinés aux développeurs. On oublie souvent quelques autres composants utiles de la bibliothèque qui vont accélérer votre codage: certaines bibliothèques CSS. Aujourd'hui, j'aimerais vous faire visiter la bibliothèque CSS de YUI Grids..

---

Pourquoi?

Pourquoi devriez-vous même envisager d'utiliser la bibliothèque CSS YUI Grids (ci-après appelée "grilles YUI")? Qu'est-ce qui le distingue? Je n'ai pas beaucoup étudié d'autres bibliothèques de grilles, mais je trouve ces éléments convaincants:

• Bonnes conventions de nommage

  Les grilles YUI utilisent des identifiants et des classes faciles à retenir, et un balisage clair; une fois que vous l’apprenerez, vous pourrez revenir à votre code dans un mois et savoir quelles sont les parties de YUI et ce que chaque pièce fait..

• Hébergement de fichiers gratuit

  Cela réduit votre charge deux fois: pas besoin d'héberger le fichier sur votre serveur, ni de chargement plus rapide des pages si le client a mis le fichier en cache.

• Compatibilité avec les tailles d'annonce courantes

  Yahoo a cuit dans des largeurs de barre latérale qui correspondent aux directives de publicité de l'Interactive Advertising Bureau.

• Nombreuses options de mise en page

  Avec plusieurs modèles et la possibilité d'imbriquer des régions de page, Yahoo prétend offrir plus de 1 000 combinaisons de dispositions… le tout en moins de 5 Ko.

Bien sûr, les grilles YUI ne sont pas parfaites. C'est un peu limite en ce qui concerne les largeurs de barre latérale précuites; Cependant, si elles répondent à vos besoins, vous gagnerez beaucoup de temps, de codage et de maux de tête lors de l'aménagement de votre site..

---

Ressources

Au début, voici quelques ressources qui vous seront utiles..

• La page d'accueil CSS de YUI Grids: l'endroit où aller après avoir lu cet article
• Grids Builder: un outil qui vous permet de construire votre page en quelques clics, ce qui est d’une grande aide pour comprendre rapidement les grilles YUI.!
• La feuille de triche: un PDF d'une page avec toutes les conventions des grilles YUI

---

Blocs de construction

Avant de passer à la grille de départ, examinons les éléments constitutifs des grilles YUI. Vous travaillerez avec cinq structures différentes pour développer votre mise en page; chacune de ces structures est définie par un id ou une classe (généralement une classe). Ils sont comme suit:

1. Document
2. Modèle
3. Des blocs
4. Des grilles
5. Unités

---

Document

Évidemment, votre fichier HTML entier est le document, mais dans notre cas, c'est aussi la div immédiatement à l'intérieur du corps - la div qui contient tout. C'est ici que vous définissez la largeur de votre site. Les grilles YUI vous offrent 4 options de largeur: 750px, 950px, 100% ou 974px. Ces largeurs ne sont pas réellement des pixels codés en dur; ce sont des SME, donc la page s'ajustera de manière fluide lorsque votre utilisateur ajustera sa taille de police. Si cela ne suffit pas, Yahoo a simplifié la définition d'une largeur personnalisée. Voici le code pour créer un document d'une largeur de 800px:

# custom-doc margin: auto; / * ces deux valeurs sont obligatoires, comme * / text-align: left; / * ils aident les grilles YUI à centrer la page * / width: 61.54em; / * 800px / 13 = valeur em pour la plupart des navigateurs * / * width: 60.00em; / * 800px / 13.333 = valeur em pour IE * / min-width: 800px; / * optionnel, mais recommandé * /

Pour définir la largeur, utilisez simplement l'id de doc, doc2, doc3 ou doc4, en fonction des valeurs indiquées ci-dessus..

---

Modèle

Vous avez le choix entre sept modèles. Les six premiers définissent une disposition en deux colonnes; chacun d'eux a une largeur ou une orientation différente pour la barre latérale, la colonne de contenu principale occupant le reste de la largeur du document. Les modèles sont 1) 160px à gauche, 2) 180px à gauche, 3) 300px à gauche, 4) 180px à droite, 5) 240px à droite et 6) 300px à droite. Pour obtenir le modèle de votre choix, ajoutez simplement une classe de yui-t # à la même div que celle sur laquelle vous avez défini votre document (remplacez le # par les nombres ci-dessus). Comme je l'ai mentionné ci-dessus, ces barres latérales ont une largeur standard pour les annonces Web. Toute publicité doit donc s'y insérer confortablement..

Le septième modèle -yui-t7-n'est pas aussi bien documenté (curieusement, ce n'est pas sur la feuille de triche que j'ai liée à ci-dessus, mais c'est sur cette version plus ancienne). Il soustrait la barre latérale, vous donnant simplement une colonne de largeur complète (qui peut être divisée en colonnes plus tard).

---

Des blocs

Les blocs sont la manifestation réelle des colonnes que vous avez définies dans le modèle. Ce sont simplement deux divs dans le doc div, tous deux classés avec yui-b. Heureusement, ils ne doivent pas nécessairement être les enfants immédiats de la division principale; Yahoo donne cet exemple:

 
 
 <-- Header Content --> 
 
 
 
 <-- Main Content --> 
 
 
 <-- Sidebar Content --> 
 
 
 <-- Footer Content --> 
 
 

Vous pouvez voir dans l'exemple que vous n'avez pas besoin de placer les blocs directement à l'intérieur du div racine. Cela vous permet d'avoir un en-tête et un pied de page pleine largeur, ce qui est généralement une bonne idée. Vous remarquerez que le bloc de contenu principal est à l'intérieur d'une div avec l'id de yui-main; Les grilles YUI vous permettent de placer votre colonne latérale ou votre colonne principale en premier dans votre code, ce qui peut constituer un avantage lorsque vous envisagez un référencement ou une accessibilité..

---

Grilles et Unités

J'ai regroupé les grilles et les unités car elles sont très similaires. les deux sont divs. Une grille (définie avec la classe yui-g) indique en gros à 2 enfants (généralement des unités) de diviser sa largeur de manière égale. Une unité (classe yui-u) doit toujours être l'enfant d'une grille et le parent de votre contenu.

Alors, quelle est la différence entre un bloc et une grille?

• Des blocs
  • Sont uniquement utilisés pour définir des colonnes de page globales
  • Sont uniquement utilisés si vous utilisez les modèles 1 à 6
  • Sont utilisés seulement une fois (vous ne devriez donc jamais avoir plus de 2 divs.yui-b sur une page)
• Des grilles
  • Sont utilisés pour diviser des zones (telles que votre bloc principal ou une autre grille) en colonnes
  • Sont utilisés sur n'importe quel modèle
  • Sont emboîtables

De plus, chaque fois que vous avez plusieurs grilles ou unités dans une grille, il est nécessaire de donner à la première une classe de première. En effet, tous les navigateurs ne proposent pas la pseudo-classe: premier enfant.

Mais que faire si vous voulez diviser une grille de manière inégale? La vie n'est pas toujours juste, n'est-ce pas? Heureusement, YUI offre un certain nombre de choix alternatifs à la classe yui-g. Voici une liste des autres:

• yui-gb : Prend 3 unités et divise à parts égales
• yui-gc : Prend 2 unités et divise en 2/3 et 1/3
• Yui-Gd : Prend 2 unités et divise en 1/3 et 2/3
• Yui-ge : Prend 2 unités et divise en 3/4 et 1/4
• yui-gf : Prend 2 unités et divise en 1/4 et 3/4

C'est tout d'eux. il suffit de taper 2 ou 3 unités dans chacune des grilles ci-dessus et vous aurez des colonnes inégales.

---

Exemple de base

Eh bien, maintenant que vous connaissez les bases, passons à un exemple élémentaire. Supposons que nous voulions la mise en page standard du site - vous savez, la colonne de contenu principale avec une barre latérale à droite - légèrement décalée: nous allons diviser la colonne principale en deux plus petites et diviser l'une de celles-ci en deux..

Comme je l'ai mentionné, Yahoo propose l'hébergement pour ce framework, et c'est généralement une bonne idée de tirer parti de cela. En outre, Yahoo recommande le Doctype HTML 4.01 strict, c’est ce que j’ai mis en place. Voici par quoi nous commençons:

---

Étape 1: Docs et blocs

La première étape consiste à configurer notre div de document et nos blocs. On peut s'en tenir à la première largeur de document (750px), et aller avec le modèle 6, ce qui nous donne une barre latérale droite de 300px.

Pour les deux bverrous de contenu, nous devons ajouter deux divs.yui-b. Nous ferons de la colonne la plus grande la colonne du haut, en l’emballant avec div # yui-main.

 
 
 Mon contenu principal DIV 
 
 
 MON SIDBAR DIV 
 

Super! Donc, voici ce que nous avons jusqu'à présent: j'ai pris la liberté de le styler un peu, pour que vous puissiez voir ce qui se passe.

---

Étape 2: Grilles et unités

Ce n'est pas encore trop impressionnant, mais nous y arriverons. Divisons maintenant la colonne la plus grande en deux. Nous pouvons y parvenir en y insérant un div.yui-g (c'est-à-dire parent de deux unités):

 
 
 
 Première sous-colonne 
 
 Deuxième sous-colonne 
 
 
 

Cela nous donne deux colonnes à gauche; pas mal; divisons la seconde de ces colonnes en deux. Pour ce faire, nous devons le changer en grille et y placer deux unités..

 Première sous-colonne 
 
 
 Première sous-sous-colonne 
 
 Deuxième sous-sous-colonne 
 

C’est un excellent exemple du fait que les grilles et les unités ont le même rang et peuvent coexister: elles ne diffèrent que par leur utilisation..

---

Un Gotcha

Cela m’amène à un bourrage d’aveuglement (qui profitera énormément des grilles YUI). Tout d’abord, regardez le code que nous avons écrit jusqu’à présent, avec un texte de remplissage:

Votre bon goût devrait noter le manque de rembourrage sur les bords de nos colonnes. Mais cela peut être facilement résolu avec un peu de rembourrage, disons, 0.5em-on .yui-u, à droite?

Beurk! Les grilles YUI ont défini les largeurs de ces div, et comme le remplissage ajoute à la largeur de div, nous avons un problème de débordement. Une solution simple consiste à ajouter un rembourrage aux enfants immédiats du .yui-u.

Pour que nos colonnes restent alignées et facilement lisibles, nous allons placer le remplissage sur les paragraphes du fichier .yui-u. Mais je n'ai pas besoin de vous montrer une image de cela pour que vous sachiez que nos colonnes étroites viennent de se rétrécir. C’est là que nous pouvons tirer parti d’un point fort des grilles YUI. Changeons l'id de notre div racine de doc en doc2. Voici un avant et après:

En ajoutant un caractère à notre code HTML, nous pouvons facilement expérimenter une mise en page plus large. c'est la beauté des grilles YUI. # doc2 est 200px plus large que #doc, donc maintenant nos paragraphes étroits ont une largeur confortable.

---

Exemple complexe

C'est un exemple assez simple. regardons un plus complexe… ce n'est vraiment pas plus difficile à créer. Nous allons commencer par le septième modèle - une colonne unique - avec un document de 750 pixels de large (#doc) et le découper différemment sur plusieurs lignes. Voici ce que nous commençons par:

Comme nous n'utilisons pas les modèles 1 à 6 (qui ont des barres latérales), nous n'avons pas besoin d'avoir divs.yui-b. Nous pouvons commencer directement avec quelques divs.yui-g; nous ajouterons 4: