Introdução ao Foundation Framework

Zurb Foundation é um framework Front End para o desenvolvimento responsivo de forma rápida priorizando o valor semântico dos elementos, mantendo uma estrutura HTML limpa e de carregamento rápido. Utiliza o conceito mobile first e melhoria progressiva (Progressive Enhancement) para criação de design responsivo. Você pode fazer o download apenas de partes do framework que lhe interessa. Caso queira apenas usar o seu grid, ou botões, formulários, etc.

O que é um framework?

Framework é uma espécie de alicerce que nós desenvolvedores usamos para desenvolver sistemas, sites, aplicativos, etc. Eles nos trazem diversos recursos já pré configuradores. Para usar um framework você precisa ter como pré requisito um conhecimento mesmo que básico da linguagem alvo do framework. Foundation é um framework de CSS para Front Ends, logo você precisa ter um conhecimento básico de HTML e CSS.

Com o Foundation, por exemplo, conseguimos criar layouts de sites sem digitar uma linha de CSS sequer. Mas claro, caso precise criar um layout mais sofisticado podemos usar a base do framework mais o nosso próprio CSS.

Site oficial: http://Foundation.zurb.com

O que é o Zurb Foundation?

Segundo seus criadores o Foundation é o Framework para Frond End mais avançado de todos, e de todas suas vantagens podemos destacar:

• Semântica: pensando em performance toda a marcação utilizada respeita a semântica dos elementos HTML obtendo um código mais limpo e bem organizado.
• Filosofia Mobile-First: o framework adota o conceito de mobile-first para o desenvolvimento, facilitando a criação de layoust responsivos. Dessa forma podemos aplicar também outro conceito tão fundamental no desenvolvimento de sistemas web, a melhoria progressiva.
• Personalizar o framework: Sem dúvida uma grande vantagem é a possibilidade de personalizar o framework na hora de fazer o download do framework. Você pode escolher quais os plugins serão usados, cores dos elementos, quantidade e largura de colunas, etc.

Plugins

Contemplam o framework um arquivo principal de JavaScrip e mais arquivos adicionais de plugins, eles estão no pacote de arquivos baixados. É importante ressaltar que o framework permite você baixar um versão personalizada de acordo com suas necessidades, logo, no momento que estiver personalizando você pode escolher quais arquivos de plugin gostaria de baixar.

Entre os arquivos de plugins disponível para download podemos citar os seguintes:

• foundation.abide.js: utilizado para validação de campos de formulários com HTML5;
• foundation.accordion.js: utilizado para criar efeitos acordeão;
• foundation.alert.js: utilizado para criar mensagens de alerta (erro, sucesso…);
• foundation.interchange.js: plugin destinado ao carregamento dinâmico de acordo com o dispositivo do usuário;
• foundation.reveal.js: plugin destinado a criação de janelas modais.

Instalando o Zurb Foundation

Na página de download (http://Foundation.zurb.com/develop/download) você pode escolher qual a versão é mais apropriada para seu projeto. Você pode escolher o pacote mais completo onde terá todos os recursos do Foundation. Se deseja usar SASS há uma versão própria para isso. Tem a opção também de baixar uma versão mais básica. Essa versão inclui apenas tipografia, grid, botões… (estrutura em geral)

Caso você queira personalizar o framework você pode escolher a opção “Custom”. Nela você pode marcar apenas as opções que deseja utilizar. Por exemplo, no seu projeto você deseja usar apenas o grid do framework, ao invés de baixar todos ou parte dos recursos escolha apenas o recurso de grids.

Noções básicas de grid

Grid é a estrutura do Foundation. Para trabalhar e entender os grids precisamos enxergar o layout como se fosse linhas e colunas, formando uma grade. Criamos essas linhas e colunas aplicando classes CSS para nossos elementos HTML. Sempre começamos a criar uma grid com uma linha. Em seguida uma série de colunas aninhadas dentro das linhas. Cada grupo de colunas dentro de uma linha geralmente deve ter um total de 12 colunas no padrão do Foundation, mas há recursos mais avançados que permite que você altere essa regra.

Temos basicamente três tipos de grids no framework:

• Grid small: define as larguras de small-1 até small-12. Quando usamos essa classe estamos nos referindo a larguras de viewport até 640px (40em).
• Grid medium: define as larguras de medium-1 até medium-12. Quando usamos essa classe estamos nos referindo a larguras de viewport de 641 px até 1024px.
• Grid large: define as larguras de large-1 até large-12. Essa classe se destina a larguras de viewport que vão de 1025px até 1440px.

Para uma maior flexibilidade a unidade de medida utilizada pelo Foundation é o em. Pelo padrão do Foundation 1em = 16px 1/16 = 0.0625em. 1pixel é igual a 0.0625em.

Foundation oferece por padrão uma grade (grid) de 12 colunas que suporta praticamente todas as telas dos dispositivos atuais. E o mais legal, não precisamos, na maioria das vezes, nos preocupar com ajustes de elementos e media queres. O framework se encarrega desse trabalho.

Se quisermos criar uma grid de uma linha e três colunas criamos primeiro uma linha com a classe row e três colunas com largura igual a 4 (3X4=12). É interessante sempre fechar esse valor de 12.

  <div class="row">
    <div class="small-4 medium-4 large-4 columns">Coluna 4</div>
    <div class="small-4 medium-4 large-4 columns">Coluna 4</div>
    <div class="small-4 medium-4 large-4 columns">Coluna 4</div>
  </div>

Tipografia (Typography)

Cabeçalhos

Por padrão o Foundation framework trás três tipos de estilização para elementos de cabeçalho h1 até o h6. Abaixo um exemplo que se aplica a todos elementos de cabeçalho.

<h1> Estilização de exemplo</h1>
<h1 class="subheader"> Estilização de exemplo </h1>
<h1>h1 <small> Estilização de exemplo </small></h1>

Partindo dessa estilização padrão você pode alterar, sobrescrever ou adicionar sua própria estilização.

Listas

O framework trabalha com os três tipos de listas disponíveis no HTML: lista ordenada, lista não ordenada e lista de definição. A estilização ocorre com ou sem classe. Classes disponíveis para o elemento ul são .circle, .square e .disc. Caso queira retirar os marcadores usamos a classe .no-bullet. Caso deseje deixar sua lista na horizontal é só declarar a classe .inline-list para o elemento da lista.

<ul class="inline-list">
  <li><a href="">Item 1</a></li>
  <li><a href="">Item 2</a></li>
  <li><a href="">Item 3</a></li>
  <li><a href="">Item 4</a></li>
</ul>

Rótulos(Label)

Rótulos são utilizados para dar destaque a uma parte do seu texto, que não seja link nem botão utilizamos elas.

<span class="label"></span>
<span class="label success"></span>
<span class="label alert"></span>
<span class="label seconndary"></span>
<span class="label radius"></span>
<span class="label round"></span>

Keystrokes

Elemento do HTML usado para marcar uma entrada do usuário (tecla de atalho, por exemplo) ou comandos de voz.

<kbd>CTRL</kbd> + <kbd>V</kbd>

Botões (Buttons)

Criamos botões no framework aplicando a classe button. Essa classe cria um botão no formato padrão do Foundation. Utilizando outras em comjunto com essa conseguimos fazer botões mais sofisticados.

<div class="large-3 columns">
        <a href="#" class="button">Botão padrão</a>
        <a href="#" class="button tiny">Botão tiny</a>
        <button class="button small">Botão small</button>
        <button class="button large">Botão large</button>
        <a href="#" class="button success">Botão success</a>
        <a href="#" class="button alert">Botão alert</a>
        <button class="button secondary">Botão secondary</button>
  </div>

Podemos utilizar também a opção de grupo de botões. Utilizamos isso principalmente para criamos barra de navegação e menus. Criamos isso usando a classe button-group com classe básica e depois podemos ir modificando nosso elemento com outras classes. Veja o exemplo abaixo.

<ul class="button-group radius">
    <li><a href="#" class="button success small">Gravar</a></li>
    <li><a href="#" class="button success small">Importar</a></li>
    <li><a href="#" class="button success small">Exportar</a></li>
    <li><a href="#" class="button success small">Enviar</a></li>
</ul>

Formulários (forms)

Utilizando as classes de formulários do Foundation conseguimos criar rapidamente estilizações em elementso do tipo input, chave on/off, slider, entrada de dados personalizados, etiquetas, ações, validações e muito mais.
Abaixo um exemplo de validação de formulário com Foundation. O formulário verifica se o campo foi preenchido corretamente quando tentamos enviar os dados.

  <form data-abide>
  <fieldset>
    <legend>Abide - exemplo</legend>
    <div class="row">
      <div class="large-12 columns">
        <label for="nome">Nome (*)
          <input type="text" required name="nome" id="nome" pattern="/^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$/">
        </label>
        <small class="error">Seu nome com no mínimo 2 e máximo 20 caracteres e sem espaços.</small>
      </div>
    </div> 
    
    <div class="row">
      <div class="large-12 columns">
        <button class="button success radius" type="submit">Enviar</button>
      </div>
    </div> 
  </fieldset>
</form>

Navegação (Navigation)

Esta funcionalidade se destina a criar um menu de navegação. Podemos usar uma navagação para todo site ou para navegação dentro da própria página. Para criação de menus nenhuma novidade, usamos um elemento container ul e a esse elemento definimos a classe side-nav.

<ul class="side-nav role="navigation""> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Portfólio</a></li> 
        <li><a href="#">Loja</a></li> 
        <li><a href="#">Contato</a></li> 
</ul>

Meu objetivo nesse artigo foi de mostrar algumas vantagens do framework e como aplicar algumas de suas funcionalidade. Lembrando que o Foundation possui uma excelente documentação online.

Siga-me no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.