Framework Foundation 4 – Introdução Parte 2

Na primeira etapa do tutorial analisamos os Framework e suas funcionalidades e iniciamos na prática com exemplos de utilização do código-fonte da biblioteca. Nesta etapa vamos analisar os itens que faltaram da introdução ao framework foundation.

Recapitulando primeira parte do tutorial

Itens abordados na primeira parte do tutorial:

  • Introdução e análise do Framework
  • Exemplos práticos das seções Grid e Navigation

Se deseja analisar alguma informação pertinente a estes itens, retorne na primeira etapa do tutorial.

Nesta etapa vamos finalizar os exemplos práticos das seções de elementos do Foundation.

Buttons

O Foundation conta com botões pré configurados em seu código fonte, bastando aplicar a classe “button” para qualquer elemento que aceitar o estilo configurado no arquivo CSS.

Temos algumas classes de botão pré-configuradas no Foundation, vamos analisar os exemplos da imagem a seguir:

Button Foundation Exemplo

Considere o seguinte código-fonte para os botões acima:

<a href="#" class="button">Default Button</a>
<a href="#" class="alert tiny button">Alert Tiny Button</a>
<a href="#" class="success small button">Success Small Button</a>
<a href="#" class="secondary large button">Secondary Large Button</a>

Note a variação de cores dos botões, quando indicado alert, success e secondary em suas classes. Essas são algumas das definições padrão do Framework.

O Framework tem algumas outros opções de customização dos botões, segue exemplo:

Buttons Foundation Exemplo 2

Considere o seguinte código para estes botões:

<a href="#" class="button disabled">Disabled Button</a> 
<a href="#" class="success round small button">Success Round Small Button</a>
<a href="#" class="secondary radius large button">Secondary Radius Large Button</a>

Note que o primeiro botão está desabilitado, é um botão que não permite clique, o segundo tem a borda arrendondada e o terceiro tem a borda levemente arredondada, todos também são classes pré-configuradas do Framework que facilitam o desenvolvimento.

O Foundation conta com mais uma série de elementos para botões como dropdown e grupo de botões que você pode conferir na documentação completa do Framework.

Forms

O Foundation da total suporte para elaboração de Form responsiva pois utiliza também as grids para agrupar os elementos da form e como todos os outros elementos que já analisamos, ele também estiliza a form de uma forma padrão que agrada o usuário.

Exemplo de Form criada com o Foundation:

Foundation Form Examplo

Considere o seguinte código-fonte para a form da imagem:

 
<form>
 <fieldset>
 <legend>Fieldset</legend>
<div class="row">
 <div class="large-12 columns">
 <label>Input Label</label>
 <input type="text" placeholder="large-12.columns">
 </div>
</div>
<div class="row">
 <div class="large-4 columns">
 <label>Input Label</label>
 <input type="text" placeholder="large-4.columns">
 </div>
 <div class="large-4 columns">
 <label>Input Label</label>
 <input type="text" placeholder="large-4.columns">
 </div>
 <div class="large-4 columns">
 <div class="row collapse">
 <label>Input Label</label>
 <div class="small-9 columns">
 <input type="text" placeholder="small-9.columns">
 </div>
 <div class="small-3 columns">
 <span class="postfix">.com</span>
 </div>
 </div>
 </div>
</div>
<div class="row">
 <div class="large-12 columns">
 <label>Textarea Label</label>
 <textarea placeholder="small-12.columns"></textarea>
 </div>
</div>
 </fieldset>
</form>

Note que todos os campos da tabela (labelinput, button, textarea) são agrupados dentro de uma DIV que determina qual o espaço da mesma na grid. Vale ressaltar que a medida obtida nesses itens vai depender da medida do item que eles estão agrupados na grid, por exemplo, uma DIV “large-12 columns” dentro de uma DIV “large-6 columns” iria obter a medida de 12 colunas dentro dessa DIV de 6 colunas, ou seja, o espaço é sempre de acordo com o elemento pai que agrupa os itens, dessa forma se quiser definir que a form vai ocupar matade da minha DIV de 6 colunas, tenho que declarar a mesma na matade da medida dentro do elemento pai.

O Foundation também possui algumas pré definições para as forms que você pode conferir aqui.

Typography

Type

O Foundation estiliza por padrão o texto apresentado na sua página feita com o Framework, além de utilizar o Normalize.css para padronizar os elementos de texto.

Para estilizar o texto não é necessário aplicar nenhuma classe ou marcação especial para a maioria dos elementos bastando utilizar a marcação padrão do HTML pois a definição CSS feita pelo Framework está aplicada aos elementos HTML padrão com exceção da classe “subheader” para os elementos de titulo.

Segue imagens com exemplos dos titulos padrão e subheader:

Type Foundation Exemplo  Type Foundation Exemplo 2

O subheader é um sub titulo para o titulo, por exemplo, se declaro um texto em <h1> e outro em <h1 class=”subheader”>, será apresentado um titulo com sub titulo.

Labels

Essa função é bem interessante, ela cria um fundo com cores padrões (ou não, é customizável) para uma certa parte do texto, não existe uma tradução exata para essa funções portanto vamos chama-la de label mesmo.

As labels funcionam da mesma forma que os botões em relação aos estilos pré-definidos como o round, radius, alert, success e etc. Vamos analisar um exemplo:

<span class="label">Regular Label</span>
<span class="radius secondary label">Radius Secondary Label</span>
<span class="round alert label">Round Alert Label</span>
<span class="success label">Success Label</span>

O código pode ser declarado em um elemento <span> mas também pode ser utilizados em outros elementos desde que a aplicação seja feita com bom senso.

Finalizamos a apresentação dos elementos do Framework Foundation. Ainda temos mais duas etapas para este tutorial de apresentação do Framework que são o Elementos CSS e JavaScript, portanto fiquem atentos a novos posts.

Qualquer duvida favor encaminhar um comentário.

🙂