Yahoo! UI LIbrary – Reset/Fonts/Grids – Grids

Fala, Galera,

Dando continuação aos dois últimos posts ( Yahoo! UI LIbrary – Reset/Fonts/Grids – Reset ) e ( Yahoo! UI LIbrary – Reset/Fonts/Grids – Fonts ), irei finalizar a série da parte de CSS do YUI falando um pouco agora sobre o componente Grids.

Como havia dito no primeiro artigo da série esses componentes foram desenvolvidos visando ao máximo a compatibilidade entre os browsers na construção da interface. Com o Grids você será capaz de combinar muitas opções que estão disponíveis, fazendo da construção da interface algo muito simples, rápido de se fazer e ainda estará padronizando a sua estrutura de codificação.

Vamos ao exemplos práticos:

Para facilitar irei dividir esse exemplo por passos.

1. Escreva a marcação básica


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>YUI Grids CSS </title>
 <link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
</head>
<body>
<div id="doc">
   <div id="hd"><!-- cabecalho --></div>
   <div id="bd"><!-- corpo --></div>
   <div id="ft"><!-- rodape --></div>
</div>
</body>
</html>

2. Escolha o tamanho do site

Antes de começar a construir qualquer interface necessitamos saber qual vai ser o tamanho da resolução do site. Para atender esta necessidade o Grids oferece as seguintes opcões:

#doc = 750px
#doc2 = 950px
#doc3 = 100%
#doc4 = 974px

No id da sua DIV principal você deverá conter uma das opções acima ou você poderá construir a sua própria opção de tamanho de layout.

3. Escolha um template

Para facilitar ainda mais a sua vida o Grids tem alguns modelos de templates pronto que já podem ser aplicado direto no seu layout, todos dividem o layout em duas partes, são eles:

.yui-t1 – 160px para a coluna da esquerda e o restante para a direita
.yui-t2 – 180px para a coluna da esquerda e o restante para a direita
.yui-t3 – 300px para a coluna da esquerda e o restante para a direita
.yui-t4 – 180px para a coluna da direita e o restante para a esquerda
.yui-t5 – 240px para a coluna da direita e o restante para a esquerda
.yui-t6 – 300px para a coluna da direita e o restante para a esquerda

No class da sua DIV principal você deverá conter uma das opções acima ou você poderá construir o seu próprio modelo de layout.

4. Organize com as divisões

Você também pode usar as opções prontas para construção de divisões que já vem disponível no Grids. Para compreender melhor esta parte precisamos saber que sempre iremos trabalhar com uma DIV( .yui-gx ) e com as sua DIVs filhas ( .yui-u ). Seguem as opções disponíveis:

.yui-g 1/2 – 1/2 (teremos uma DIV dividida em duas partes iguais)
.yui-gb 1/3 – 1/3 – 1/3 (teremos uma DIV dividida em três partes iguais)
.yui-gc 2/3 – 1/3
.yui-gd 1/3 – 2/3
.yui-ge 3/4 – 1/4
.yui-gf 1/4 – 3/4

Ex:


...
 <div class="yui-gc">
     <div class="yui-u first"></div>
     <div class="yui-u"></div>
 </div>
...

No exemplo temos o uso de uma divisão 2/3 por 1/3. Para identificar qual DIV irá se posicionar na esquerda, usamos a classe first, também do Grids.

Então é isso galera. Espero que tenham gostado. Para mais informações e exemplos acesse o site oficial:

http://developer.yahoo.com/yui/grids/

Grande abraço.

Abdala Cerqueira