Artigos HTML e CSS Conhecendo o framework front-end Foundation

Introdução

Neste artigo vamos falar sobre Foundation 3, que é um framework CSS construído com Sass, um pré-processador CSS poderoso, que nos permite desenvolver muito mais rápido nossas próprias fundações e nos disponibiliza novas ferramentas para personalizar e construirmos em cima dos estilos iniciais.

Com o Foundation podemos escrever e organizar os códigos CSS que podemos manter mais facilmente ao longo do tempo sem as dores de cabeça típicas, temos também plug-ins JavaScript que fazem interações úteis e mais fáceis de implementar em diferentes resoluções de tela.

Com o Foundation podemos utilizar os seguintes recursos ao criarmos nossa aplicação.

Elementos

Grade: É construída por dois elementos fundamentais colunas e linhas, as colunas criam a estrutura real. Para o layout funcionar corretamente temos que colocar o conteúdo dentro de uma linha e uma coluna. O que precisamos saber é que essas colunas não possuem um tamanho fixo, o tamanho pode variar de acordo com a resolução da tela ou o tamanho da janela .

Detalhes: A grade é construída com os elementos “box-sizing” e “border-box”. Propriedades CSS poderosas que informam ao navegador para considerar o espaçamento e a borda como parte de um elemento e não como algo adicional, assim podemos criar uma grade extremamente simples. Espaçamentos são criados apenas com a borda nas colunas. Isso significa que as colunas possuem tamanho simples como, por exemplo, 25% ou 50%. Ao ajustarmos os preenchimentos ajustamos os espaçamentos, podemos controlar isso através das classes CSS.

Tipografia: Utiliza uma escala modular. A ideia de uma escala modular é que o tamanho e espaçamento de toda a tipografia na grade é derivada de um valor inicial, um outro valor arbitrário “importante” e uma proporção particular.

Botões: Os botões são os elementos mais utilizados quando se trata de interação com o usuário. O Foundation inclui uma série de botões fácil de utilizar e estilos que podemos usar ou substituir para atender às nossas necessidades.

Navegação: O Foundation veio com uma série de opções de navegação para uma série de situações e o melhor tudo é que foi criado para trabalhar cross-device.

Forms: O Fundation trouxe um poderoso e versátil sistema de layout para formulário. Com uma combinação entre a grade do Foundation e os estilos de formulários, podemos fazer basicamente tudo que precisarmos em termos de layout.

Elementos UI: Nossas prototipagens terão mais do que apenas navegação, guias ou tipografia. Por isso o Foundation criou uma série de elementos adicionais para nos ajudar rapidamente em nossas prototipagens que, como o tudo mais nesse framework, já são prontos para utilização e fáceis de modificar ou substituir.

Guias: As guias são muito versáteis tanto como organização quanto para a criação de navegação. Com o pacote Foundation as guias já estão ligadas sem necessidade de trabalhos extras.

Orbit: Foi criado como um controlador deslizante de imagens simples, porém suporta elementos com conteúdos arbitrários, por exemplo, podemos ter um controle deslizante de blocos de texto.

Pop-up: As janelas pop-up são uteis para a criação de prototipagem. O Foundation incluiu os pop-ups no pug-in modal jQuery para tornar o trabalho mais fácil.

Algumas outras ferramentas serão vistas ao decorrer do artigo.

Download

Para começarmos a utilizar o Foundation em nossas aplicações, temos que antes de tudo fazer o download do seu pacote de códigos-fontes no site: http://foundation.zurb.com/download.php.

Ao acessarmos o site do download citado acima teremos três opções de download.

  • CSS padrão: Esta versão do Foundation inclui padrões inteligentes e não requerem Sass ou qualquer outra ferramenta instalada.
  • CSS Personalizado: Podemos personalizar o pacote de download do Foundation bem como definir o tamanho das colunas, cores, tamanho da fonte, e muito mais.
  • Sass + Bússola: Foundation é construído usando SCSS e podemos trabalhar com ele da mesma forma.
Página de download Foundation

Figura 1: Página de download Foundation

Para este artigo estaremos fazendo download do “CSS padrão”. Após completarmos o download vamos descompactar e teremos os seguintes arquivos e pastas.

  • Pasta StyleSheets: Incluindo Foundation.css e Foundation.min.css, assim podemos escolher qual utilizar. Também tem incluído app.css que podemos usar para estilos personalizados.
  • Pasta JavaScript: Possui diversos plug-ins do JavaScript necessários para fazer o Foundation funcionar corretamente. Nesta pasta o arquivo mais importante é app.js, que utilizaremos para inicializar os vários plug-ins que podemos querer utilizar.
  • “todos os js são iniciados por padrão.”
  • Pasta Imagens: Esta pagina possui todas as imagens necessárias para criação, que na verdade não são muitas. As únicas imagens incluídas por padrão são usadas para o Orbit. Caso não usemos o Orbit, estamos livres dessas imagens.
  • Index.html: Uma estrutura de exemplo para o conteúdo da página, nos dando algo como modelo para usarmos como uma estrutura básica para o restante das paginas em nosso projeto.

Estrutura básica

Vamos começar a por em prática o que já sabemos sobre o Foundation até o momento, para isso vamos começar a montar nossa estrutura. A primeira coisa que devemos fazer é ligar os arquivos necessários para o funcionamento do Foundation.

Listagem 1: Estrutura de arquivos básicos do Foundation


<head>

<metaname="viewport"content="width=device-width"/>

  <title>Estrutura Foundation </title>
  
  <!-- Incluindo Arquivos CSS -->
  <link rel="stylesheet" href="stylesheets/foundation.css">
  <link rel="stylesheet" href="stylesheets/app.css">

< !-- Mordernizr personalizado para a fundação. -->

<script src="javascript/modernizr.foundation.js"></script>

</head>

<body>
  Conteúdo.
  Conteúdo.

<!—Incluindo arquivos javascript -->

  <script src="javascript/jquery.js"></script>
  <script src="javascript/foundation.min.js"></script>

  
  <!—Inicializando os plug-ins javascript -->
  <script src="javascript/app.js"></script>
</body>

Agora que já possuímos toda a estrutura básica formada, vamos entender do que essa estrutura é composta.

  • Na primeira linha dentro da tag <head> incluirmos a tag meta viewport para termos certeza de que os dispositivos menores utilizarão todo o espaço de largura para a exibição do conteúdo.
  • Depois incluirmos o arquivo foundation.css que serve como a base do Foundation e também o app.css, que usamos para fazer personalização na estrutura do Foundation.
  • Depois ligamos o arquivo modernizr.foundation.js, usado para termos suporte a HTML5 com acesso as classes e consultas de mídias do JavaScript que nos ajudam a controlar o Foundation.
  • Dentro do corpo, na parte inferior, chamamos os arquivos JavaScript jquery.js e foundation.min.js. Devemos sempre inserir o jquery.js antes de qualquer arquivo JavaScript do Foundation.
  • O arquivo foundation.min.js inclui todos os plug-ins disponíveis.
  • E para finalizar nossa estrutura, inserirmos o arquivo app.js, que tem a função de inicializar todos os plug-ins.

Já compreendemos nossa estrutura e os elementos que temos à nossa disposição para usarmos com ela. Vamos então partir para a prática, pondo os elementos que conhecemos em ação para vermos o resultado do que se pode ser feito com tais elementos.

Listagem 2: Exemplo de Grade Foundation



<head>
  <meta charset="utf-8" />

  <!—Definindo resolução dos dispositivos moveis -->
  <meta name="viewport" content="width=device-width" />

  <title>Exemplo de Grade Foundation.</title>
  
  <!-- Incluindo Arquivos CSS -->
  <link rel="stylesheet" href="stylesheets/foundation.css">
  <link rel="stylesheet" href="stylesheets/app.css">

  <script src="javascripts/modernizr.foundation.js"></script>
</head>
<body>

  <div class="row">
    <div class="eight columns">
      <h3>A GRADE</h3>

      <!—Exemplo de grade-->
      <div class="row"> <!—Linha -->
        <div class="twelve columns"> < !-- Definindo número de colunas -->
          <div class="panel"> < !— Painel --> 
	   <p>Doze colunas</p> < !-- Conteudo dentro do painel -->
          </div> <! – Fim painel -->
        </div> <!—Fim colunas -->
      </div> <! – Fim Linha -->

      <div class="row">
        <div class="six columns">
          <div class="panel">
            <p>Seis colunas</p>
          </div>
        </div>
        <div class="six columns">
          <div class="panel">
            <p>Seis colunas</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="four columns">
          <div class="panel">
            <p>Quatro colunas</p>
          </div>
        </div>
      <div class="row">
        <div class="four columns">
          <div class="panel">
            <p>Quatro colunas</p>
          </div>
        </div>
      </div>
</body>
</html>
Resultado exemplo grade Foundation

Figura 2: Resultado exemplo grade Foundation

Tipografia

Os estilos relacionados à tipografia no Foundation ficam por conta dos arquivos CSS inseridos inicialmente. No exemplo a seguir, por exemplo, temos títulos básicos (h1 a h6) nos quais não foi necessário inserir nenhuma formatação adicional.

Listagem 3: Exemplo tipografia básica


<html>
<head>

  <meta name="viewport" content="width=device-width" />

  <title>Welcome to Foundation</title>

  <!-- Incluindo Arquivos CSS -->
  <link rel="stylesheet" href="stylesheets/foundation.css">
  <link rel="stylesheet" href="stylesheets/app.css">

  <script src="javascripts/modernizr.foundation.js"></script>
</head>
<body>
	<!—Tipografia  texto básico -->
            <h1>h1 header</h1>
	  <h2>h2 header</h2>
	  <h3>h3 header</h3>
	  <h4>h4 header</h4>
	  <h5>h5 header</h5>
	  <h6>h6 header</h6>
</body>
</html>
Tipografia básica

Figura 3: Tipografia básica

Também podemos estilizar textos menores utilizando a tag <small>.

Listagem 4: Exemplo tipografia usando tag small


<html>
<head>

  <meta name="viewport" content="width=device-width" />

  <title>Welcome to Foundation</title>

  <!-- Incluindo Arquivos CSS -->
  <link rel="stylesheet" href="stylesheets/foundation.css">
  <link rel="stylesheet" href="stylesheets/app.css">

  <script src="javascripts/modernizr.foundation.js"></script>
</head>
<body>
	<!—Tipografia  texto menores usando <small> -->
<h1>h1 exemplo <small> texto utilizando small.</small></h1>
	<h2>h2 exemplo <small> texto utilizando small.</small></h2>
	<h3>h3 exemplo <small> texto utilizando small.</small></h3>
	<h4>h4 exemplo <small> texto utilizando small. </small></h4>
	<h5>h5 exemplo <small> texto utilizando small. </small></h5>
	<h6>h6 exemplo <small> texto utilizando small. </small></h6>
</body>
</html>
Exemplo de tipografia usando tag small

Figura 4: Exemplo de tipografia usando tag <small>

Existe ainda uma classe chamada subheader que podemos aplicar sobre alguns elementos para obter um efeito de texto “esmaecido”, que pode ser usado como subtítulo, por exemplo.

Listagem 5: Exemplo tipografia usando classe subheader.


<html>
<head>

  <meta name="viewport" content="width=device-width" />

  <title>Welcome to Foundation</title>

  <!-- Incluindo Arquivos CSS -->
  <link rel="stylesheet" href="stylesheets/foundation.css">
  <link rel="stylesheet" href="stylesheets/app.css">

  <script src="javascripts/modernizr.foundation.js"></script>
</head>
<body>
		<h1 class="subheader">h1.Texto classe subheader </h1>
		<h2 class="subheader">h2.Texto classe subheader </h2>
		<h3 class="subheader">h3.Texto classe subheader </h3>
		<h4 class="subheader">h4.Texto classe subheader </h4>
		<h5 class="subheader">h5.Texto classe subheader </h5>
		<h6 class="subheader">h6.Texto classe subheader </h6>	
</body>
</html>
Exemplo de tipografia usando classe subhearder

Figura 5: Exemplo de tipografia usando classe subhearder

Assim vimos três possibilidades diferentes de estarmos configurando nossos textos dentro da nossa aplicação web. As configurações de tipografia podem ser personalizadas dentro do arquivo foundation.css.

Botões

Nesse framework, existem classes CSS que nos permitem criar botões com diversos tamanhos:

  • Tyni: muito pequeno;
  • Small: pequeno;
  • Medium: médio;
  • Large: grande;

Vejamos agora o exemplo abaixo criando um botão referente a cada um desses tamanhos.

Listagem 6: Criando botões com tamanhos diferentes


<head>

  <meta name="viewport" content="width=device-width" />

  <title>Welcome to Foundation</title>

  <!-- Incluindo Arquivos CSS -->
  <link rel="stylesheet" href="stylesheets/foundation.css">
  <link rel="stylesheet" href="stylesheets/app.css">

  <script src="javascripts/modernizr.foundation.js"></script>
</head>
<body>
	< !-- Botões tamanhos diferente -->
	<a class="tiny button" href="#">Tiny</a><br>
	<a class="small button" href="#">Small</a><br>
	<a class="button" href="#">Medium</a><br>
	<a class="large button" href="#">Large</a><br>

  <script src="javascripts/jquery.js"></script>
  <script src="javascripts/foundation.min.js"></script>
  <script src="javascripts/app.js"></script>

</body>
</html>
Vários tamanhos de botões

Figura 6: Vários tamanhos de botões

Existem ainda os botões de menu suspenso, que podemos utilizar esse quando quisermos apresentar uma lista com vários valores possíveis a serem escolhidos. Os botões suspensos utilizam a mesma classe que os outros botões, o que o diferencia é sua estrutura.

Listagem 7: exemplo de botão suspenso.


<head>

<head>

  <meta name="viewport" content="width=device-width" />

  <title>Welcome to Foundation</title>

  <!-- Incluindo Arquivos CSS -->
  <link rel="stylesheet" href="stylesheets/foundation.css">
  <link rel="stylesheet" href="stylesheets/app.css">

  <script src="javascripts/modernizr.foundation.js"></script>
</head>
<body>
<div href="#" class="large button dropdown">
   Itens
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li class="divider"></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>
  <script src="javascripts/jquery.js"></script>
  <script src="javascripts/foundation.min.js"></script>
  <script src="javascripts/app.js"></script>
</body>
</html>
Botões de menu suspenso

Figura 7: Botões de menu suspenso

Essas são algumas das coisas possíveis de estarmos fazendo com o Foundation, mas muitas outras ferramentas estão disponíveis.

Encerramos mais este artigo. Espero que tenha sido do agrado de todos os leitores.

Abraços e até o próximo.

Conheça também:

Discuta em:

Conheça alguns cursos Front-end web da DevMedia

Curso de HTML básico gratuito

Curso de jQuery Mobile

Curso AngularJS

Curso de Introdução ao Node.js