Yahoo UI - Grid CSS

Je dois réaliser un template HTML - CSS sur base d'un grid.
Le but étant d'avoir des boites dans lesquels il y aura différents formulaires.
J'ai donc décodé de découper la page en 2 colonnes (2/3 et 1/3). La colonne de gauche sera comportera 2 boites sur la première ligne et 1 boite sur la ligne suivante.

Il existe plusieurs bibliothèque pour réaliser ce genre d'exercices mais celle que j'ai retenue est Yahoo UI car la documentation est très bien réalisée et elle est assez simple à utiliser.

Mais découvrons cela ensemble.

Voilà le résultat attendu :



Voici le code complet :

<div id="doc3">
<div class="yui-gc" id="yui-main">
<div class="yui-u first">
<div class="yui-g first" id="yui-main">
<div class="yui-u first" style="margin-bottom: 5px">
<div class="box" style="border: 1px #9E9EFF solid;">
<div class="box-title" style="padding: 5px 10px 5px 10px; border-bottom: 1px solid black;">
Le titre du box
</div>
<div class="box-content" style="padding: 5px 10px 5px 10px;">
Le contenu du box
</div>
</div>
</div>
<div class="yui-u" style="margin-bottom: 5px">
<div class="box" style="border: 1px #9E9EFF solid; ">
<div class="box-title" style="padding: 5px 10px 5px 10px; border-bottom: 1px solid black;">
Le titre du box
</div>
<div class="box-content" style="padding: 5px 10px 5px 10px;">
Le contenu du box
</div>
</div>
</div>
<div style="clear: both"></div>
<div class="box" style="border: 1px #9E9EFF solid;">
<div class="box-title" style="padding: 5px 10px 5px 10px; border-bottom: 1px solid black;">
Le titre du box
</div>
<div class="box-content" style="padding: 5px 10px 5px 10px;">
Le contenu du box
</div>

</div>

</div>
</div>
<div class="yui-u">
<div class="box" style="border: 1px #9E9EFF solid; ">
<div class="box-title" style="padding: 5px 10px 5px 10px; border-bottom: 1px solid black;">
Le titre du box
</div>
<div class="box-content" style="padding: 5px 10px 5px 10px;">
Le contenu du box
</div>
</div>
</div>
</div>
</div>

le div avec id="doc3" donne les dimensions de la page (ici : 100% pour avoir une page "liquid")
le div avec la class "yui-gc" définit le découpe en 2/3 - 1/3 de la page.
Dans cette balise nous allons retrouver deux unités ("yui-u"). Ce sont ces unités qui vont contenir le contenu. La première doit contenir "first" comme class pour l'identifier comme le premier élément.

Ensuite, nous retrouvons "yui-g" qui coupe le conteneur en 2 parties égales à condition d'ajouter l'id "yui-main".

Dans ce conteneur, nous allons ajouter de nouvelles unités.

Les div dont la class est "box" sont mes contenus. Le résultat est que nous avons découpé notre page pour y mettre différents éléments qui auront une taille proportionnelle à la résolution du navigateur.

Voilà un post de découverte de YUI Grid et je vous invite à aller plus loin en visitant la page de Yahoo sur ce sujet.