42 / 68
42
<a href="#" class="button [tiny small
large]">Default Button</a>
<!-- Color Classes -->
<a href="#" class="button [secondary
success alert]">Color Button</a>
<!-- Radius Classes -->
<a href="#" class="button [radius
round]">Radius Button</a>
<!-- Disabled Class -->
<a href="#" class="button
disabled">Disabled Button</a>
<!-- Expand Class -->
<a href="#" class="button
expand">Expanded Button</a>
Outro ponto importante na criação
de um design é o posicionamento de
elementos. Ao usar um arquivo CSS e
a tag “DIV”, é possível controlar com
bastante precisão esse posicionamento.
Mas é trabalhoso e um tanto confuso
fazer isso diretamente no código CSS e
para cada elemento.
O Foundation conta com classes GRID
que permitemmontar sem esforço uma
grade de posicionamento de elementos.
Pode-se controlar cada aspecto destes
VHP SUHFLVDU FRGLíFDU XP SRU XP FRP D
vantagem de ter o código reutilizável.
Amplie os recursos de nossa página
por meio dessa classe GRID e veja como
funciona. A imagem abaixo mostra um
padrão de células criado, não por meio de
uma complexa e confusa tabela, mas por
divs de classe GRID.
Para construir um painel desse tipo,
(mas mais simples, como item de estudo),
inclua este código no arquivo de exemplo.
<div class="row display ">
<div class="small-3 small-
centered columns">3 centered</div>
</div>
<div class="row display">
<div class="small-6 large-
centered columns">6 centered</div>
</div>
<div class="row display">
<div class="small-9 small-
centered large-uncentered columns">9
centered</div>
</div>
<div class="row display">
<div class="small-11 small-
centered columns">11 centered</div>
</div>
É bem simples usar as classes do GRID
para posicionar elementos na tela. Esta
linha, que gera a primeira barra, é bem fácil
de entender:
<div class="small-3 small-centered
columns">3 centered</div>
O código que gera o primeiro painel
acima, com divs dentro de divs, é este:
<div class="row display ">
<div class="small-3 small-centered
columns">3 centered</div>
</div>
<div class="row display">
<div class="small-6 large-centered
columns">6 centered</div>
</div>
<div class="row display">
<div class="small-9 small-centered large-
uncentered columns">9 centered</div>
</div>
<div class="row display">
<div class="small-11 small-centered
columns">11 centered</div>
</div>
<hr class="dashed">
<div class="row collapse display">
<div class="small-12 columns">
<p>12</p>
</div>
</div>
<div class="row collapse display">
<div class="small-6 columns border-
none">
<p>6</p>
</div>
<div class="small-6 columns">
<p>6</p>
<div class="row display">
<div class="small-6 columns border-
none">
<p>6</p>
</div>
<div class="small-6 columns">
<p>6</p>
</div>
</div>
</div>
</div>
<div class="row collapse display">
<div class="small-4 columns border-
none">
<p>4</p>
<div class="row display">
<div class="small-4 columns border-
none">
<p>4</p>
</div>
<div class="small-8 columns">
<p>8</p>
</div>
</div>
</div>
<div class="small-4 columns border-
none">
<p>4</p>
<div class="row display">
<div class="small-3 columns border-
none">
<p>3</p>
</div>
<div class="small-9 columns">
<p>9</p>
</div>
</div>
</div>
<div class="small-4 columns">
<p>4</p>
<div class="row display">
<div class="small-3 columns border-
none">
<p>3</p>
</div>
<div class="small-3 columns border-
none">
<p>3</p>
</div>
<div class="small-6 columns">
<p>6</p>
</div>
</div>
</div>
</div>
Estas divs estão com cor de fundo,
background, para efeito didático.
Evidentemente, podem ser deixadas sem
isso, para posicionar elementos sem
atrapalhar o design. Avance mais com o
grid, criando grids em blocos. Por exemplo,
faça isso na criação de um espaço para
REVISTA LOCAWEB
WEBDESIGN