Framework Foundation 4 – Introdução – Parte 1

Neste artigo vamos analisar o Framework Foundation (mobile-first), utilizado para minimizar trabalho de desenvolvimento de projetos web.

Introdução ao Framework Foudation

O Framework Foundation é um framework CSS desenvolvido pela Zurb. Sua função é minimizar o trabalho do desenvolvedor front-end, desde o design de wireframes até o desenvolvimento final do layout front-end. Outro ponto relevante do Framework é que ele padroniza a codificação de um projeto caso vários desenvolvedores estejam interagindo no mesmo.

O Foundation conta com uma séries de recursos já agregados baseados em CSS e JavaScript que minimizam o seu trabalho pois basta declarar a função na qual o recurso foi declarado, seguindo as definições de cada um, para obter o resultado desejado conforme é apresentada na documentação do framework.

O Framework conta com as seguintes categorias de desenvolvimento:

  • Grid
  • Navigation
  • Buttons
  • Forms
  • Typography
  • CSS Components
  • Javascript

Para utilizar qualquer recurso do Framework primeiro precisamos baixar o pacote de desenvolvimento que já vem no padrão de desenvolvimento web, com pastas e arquivos separados por categoria, bastando renomear a pasta raiz e iniciar um projeto, apenas alterando o código da index.html.

Quando você entrar pela primeira vez na index.html do Framework você deve se atentar pois a mesma não vem em branco, dentro do <body> já tem conteúdo declarado, o que precisamos fazer é apagar o conteúdo declarado do inicio do <body> até o fim </body>, pois é nesse espaço que vamos iniciar o desenvolvimento do nosso projeto. Caso tenha duvidas sobre como utilizar a index.html, apenas copie e cole a marcação padrão pois ela vem em no ponto para iniciarmos um projeto do zero.

Marcação inicial em branco:

 
<!DOCTYPE html>
<!--[if IE 8]>         <html lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Foundation 4</title>

  <!-- Link para arquivos CSS do framework / Note que o foundation (assim como diversos frameworks) também trabalha com o Normalize.css / Aqui você também pode linkar qualquer arquivo CSS que precisar -->
  <link rel="stylesheet" href="css/normalize.css" />
  <link rel="stylesheet" href="css/foundation.css" />

  <script src="js/vendor/custom.modernizr.js"></script>

</head>
<body>

  <!-- Conteúdo do Website - Onde iniciamos o desenvolvimento do Website baseado no Framework -->

  <script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js></script>')
  </script>
  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.alerts.js"></script>
  <script src="js/foundation/foundation.clearing.js"></script>
  <script src="js/foundation/foundation.cookie.js"></script>
  <script src="js/foundation/foundation.dropdown.js"></script>
  <script src="js/foundation/foundation.forms.js"></script>
  <script src="js/foundation/foundation.joyride.js"></script>
  <script src="js/foundation/foundation.magellan.js"></script>
  <script src="js/foundation/foundation.orbit.js"></script>
  <script src="js/foundation/foundation.placeholder.js"></script>
  <script src="js/foundation/foundation.reveal.js"></script>
  <script src="js/foundation/foundation.section.js"></script>
  <script src="js/foundation/foundation.tooltips.js"></script>
  <script src="js/foundation/foundation.topbar.js"></script>
  <script src="js/foundation/foundation.interchange.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>
</html>

Vamos analisar as categorias e alguns de seus componentes.

Grid – mobile-first

O Foundation trabalha com grids, que é um padrão de desenvolvimento para layouts que determina as medidas que devem ser utilizadas e como site vai se comportar em cada medida. Além disso, é um framework que trabalha com o padrão de desenvolvimento “mobile-first” que determina que o site primeiro seja desenvolvido pensando no universo mobile, porém não é obrigado o emprego de tal pratica de desenvolvimento.

No caso do framework, nos utilizamos as grids para agrupar os conteúdos do website e reproduzir o layout que foi desenvolvido pela equipe de design, que geralmente é feito em cima de uma grid (o mais comum são grids de 12 colunas, porém não existe limite exato).

Se você fizer o download padrão do Framework no site da Zurb, automaticamente você vai estar utilizando um grid de 12 colunas, pois é o padrão determinado para o Framework, mas você pode customizar todo o Framework se houver a necessidade utilizando a opção de customizar o código.

Exemplo de utilização de grid:

Considere o código HTML abaixo. Lembre-se que o mesmo deve ser declarado dentro da tag <body> da pagina.

 
<div class="row">
  <div class="panel small-2 large-4 columns">4</div>   
  <div class="small-4 large-4 columns">4</div>
  <div class="panel small-6 large-4 columns">4</div>
 </div>
 <div class="row">
  <div class="large-3 columns">3</div>
  <div class="panel large-6 columns">6</div>
  <div class="large-3 columns">3</div>
</div>

O código acima é interpretado da seguinte forma pelo Framework CSS:

  • Dentro da <div class=”row”> são declaradas as divs que agregam as colunas dentro dessa row, ou linha.
  • Por padrão o framework trabalha com 12 colunas, sendo assim podemos declarar quantos quadros desejarmos desde que a soma de colunas que eles vão ocupar seja igual a 12, como na primeira row onde são declarados 3 quadros que ocupam 4 colunas, onde 4+4+4=12.
  • Primeiro você declara uma <div class=”row”> e depois declara uma <div> com a class referente ao numero de colunas ocupadas pelo quadro.
  • Note que para o primeiro exemplo utilizamos a class=”small-2 large-4 columns”, onde small significa a medida que o quadro vai ocupar em telas pequenas (mobile) e large a medida que ele vai ocupar em telas maiores (desktop).
  • Note o atributo “panel” declarado em algumas classes. Esse atributo estiliza a div em questão para que ela seja apresentada como um painel, no nosso caso utilizamos para visualizarmos como cada quadro está sendo apresentado. Note a diferença de conteudo declarado dentro de um panel, pode ser relevante nos seus projetos.

Utilizando o código acima no framework devemos obter o seguinte resultado:

Foundation Framework Exemplo de Grid

Diminua a tela do seu navegador para visualizar o resultado em modo mobile. Note que se você declarar o atributo small-x na class da div, você vai estar determinando que em uma tela mobile ele precisa ocupar x numero de colunas, como exemplo na primeira row, onde em telas pequenas (small) temos a medida 2 – 4 – 2  e em telas grandes (large) temos 4 – 4 – 4. Tente executar o código sem o atributo small na primeira row e você vai entender como ele funciona.

O Foundation possui outras funcionalidades para o sistema de grids, você pode conferir todos aqui.

Navigation

Nesta seção temos alguns objetos relacionados a usabilidade, prontos pra uso mediante declaração do código competente. Os itens mais utilizados desta seção são o Top Bar e o Breadcrumbs, que vamos analisar agora.

Top Bar

Esse item gera uma barra de menu fixa no topo da sua página. Ela por padrão não segue o rolar da página mais permanece fixa no topo para guiar as seções do site e fazer com que a navegação entre elas fique mais acessível e fácil. Na imagem a seguir tempos um exemplo de como é apresentado a Top Bar.

Foundation Top Bar Exemplo

Considere o seguinte código para adicionar uma Top Bar como esta na sua pagina. Note que esse código precisar ser inserido logo após o inicio da tag <body> para ficar no inicio do website.

<nav class="top-bar">
 <ul class="title-area">
 <!-- Title Area -->
 <li class="name">
  <h1><a href="#">Top Bar Teste</a></h1>
 </li>
  <!-- Icone do menu quando acessado via mobile -->
  <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
 </ul>
<section class="top-bar-section">
 <!-- Navegação na lateral direita -->
 <ul class="right">
  <li class="divider"></li>
  <li class="active"><a href="#">Item 1</a></li>
  <li class="divider"></li>
  <li class="active"><a href="#">Item 2</a></li>
  <li class="divider"></li>
  <li class="active"><a href="#">Item 3</a></li>
 </ul>
</section>
</nav>

Existe várias maneiras de personalizar o menu como por exemplo inserir dropdown e barra de pesquisa, porém não vamos nos aprofundar pois são muitos elementos, a definição de cada um da pra conferir aqui na documentação oficial do Framework.

Breadcrumbs

Breadcrumb nada mais é que a trilha de navegação do seu website, onde são apresentadas as paginas que o usuário pode ir e de que pagina ele veio. Basicamente isso é uma questão de usabilidade pois o usuário se sente localizado sabendo de onde veio e onde pode ir em um website. Parece e pode ser usado como menu, porém não é estilizado para tal, como na imagem a seguir.

Foundation Breadcrumb Exemplo

Para este exemplo, considere o seguinte código-fonte:

 
<ul class="breadcrumbs">
  <li><a href="#">Home</a></li>
  <li><a href="#">Features</a></li>
  <li class="unavailable"><a href="#">Gene Splicing</a></li>
  <li class="current"><a href="#">Cloning</a></li>
</ul>

<!-- Você também pode utilizar esta marcação -->

<nav class="breadcrumbs">
  <a href="#">Home</a>
  <a href="#">Features</a>
  <a class="unavailable" href="#">Gene Splicing</a>
  <a class="current" href="#">Cloning</a>
</nav>

Qualquer dúvida, encaminhe um comentário.

Na parte 2 deste tutorial vamos terminar de apresentar os complementos presentes no Framework.

🙂