Devmedia - 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.

o CSS padrão: Esta versão do Foundation inclui padrões inteligentes e não requerem Sass ou qualquer
outra ferramenta instalada.

o CSS Personalizado: Podemos personalizar o pacote de download do Foundation bem como definir o
tamanho das colunas, cores, tamanho da fonte, e muito mais.

o Sass + Bússola: Foundation é construído usando SCSS e podemos trabalhar com ele da mesma forma.

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.

o 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.

o 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.

o “todos os js são iniciados por padrão.”

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.

o 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

1 <head>
2
3 <metaname="viewport"content="width=device-width"/>
4
<title>Estrutura Foundation </title>
5
6 
7 <link rel="stylesheet"href="stylesheets/foundation.css">
8 <link rel="stylesheet"href="stylesheets/app.css">

9
10< !-- Mordernizr personalizado para a fundação. -->
11
12<script src="javascript/modernizr.foundation.js"></script>
13
</head>
14
15<body>
16 Conteúdo.
17 Conteúdo.
18
19<!—Incluindo arquivos javascript -->
20
21 <script src="javascript/jquery.js"></script>
<script src="javascript/foundation.min.js"></script>
22
23
24 <!—Inicializando os plug-ins javascript -->
25 <script src="javascript/app.js"></script>
26</body>
27
28
29

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

o 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.

o 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.

o 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.

o 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 O arquivo foundation.min.js inclui todos os plug-ins disponíveis.

o 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

1 <head>
2 <meta charset="utf-8"/>
3
4 <!—Definindo resolução dos dispositivos moveis -->
<meta name="viewport"content="width=device-width"/>
5
6 <title>Exemplo de Grade Foundation.</title>
7

11
12 <script src="javascripts/modernizr.foundation.js"></script>
13</head>
<body>
14
15 <div class="row">
16 <div class="eight columns">
17 <h3>A GRADE</h3>
18
19 <!—Exemplo de grade-->
<divclass="row"><!—Linha -->
20 <divclass="twelvecolumns">< !-- Definindo número de colunas -->
21 <div class="panel">< !— Painel -->
22 <p>Doze colunas</p>< !-- Conteudo dentro dopainel -->
23 </div><! – Fim painel -->
24 </div><!—Fim colunas -->
</div><! – Fim Linha -->
25
27 <div class="six columns">
28 <div class="panel">
29 <p>Seiscolunas</p>
</div>
30 </div>
31 <div class="six columns">
33 <p>Seiscolunas</p>
34 </div>
</div>
35 </div>
37 <div class="four columns">
39 <p>Quatro colunas</p>
</div>
40 </div>
42 <div class="four columns">
<p>Quatrocolunas</p>
44 </div>
45 </div>
46 </div>
47</body>
48</html>
49
50
51
52
53
54
55
56

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

1
2
<html>
3 <head>
4
5 <meta name="viewport"content="width=device-width"/>
6
7 <title>Welcome to Foundation</title>
8
<link rel="stylesheet"href="stylesheets/app.css">
11
13</head>
14<body>
15 <!—Tipografia texto básico -->
<h1>h1 header</h1>
16 <h2>h2 header</h2>
</body>
21</html>
22
23

Figura 3: Tipografia básica

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

Listagem 4: Exemplo tipografia usando tagsmall

1
2
<html>
3 <head>
4
6
8
<link rel="stylesheet"href="stylesheets/app.css">
11
13</head>
14<body>
15 <!—Tipografia texto menores usando <small> -->
<h1>h1 exemplo <small> texto utilizando small.</small></h1>
16 <h2>h2 exemplo <small> texto utilizando small.</small></h2>
17 <h3>h3 exemplo <small> texto utilizando small.</small></h3>
18 <h4>h4 exemplo <small> texto utilizando small. </small></h4>
</body>
21</html>
22
23

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.

1
2
<html>
3 <head>
4
6
8
<link rel="stylesheet"href="stylesheets/foundation.css">
11
13</head>
14<body>
15 <h1 class="subheader">h1.Texto classesubheader</h1>
<h2 class="subheader">h2.Texto classesubheader</h2>
16 <h3 class="subheader">h3.Texto classesubheader</h3>
17 <h4 class="subheader">h4.Texto classe subheader</h4>
</body>
20</html>
21
22

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:

o Tyni: muito pequeno;

o Small: pequeno;

o Medium: médio;

o 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

1 <head>
2
4
<title>Welcome to Foundation</title>
5
9
11</head>
<body>
12 < !-- Botões tamanhos diferente -->
13 <a class="tiny button"href="#">Tiny</a><br>
14 <a class="small button"href="#">Small</a><br>

15 <a class="button"href="#">Medium</a><br>
16 <a class="large button"href="#">Large</a><br>
17
<script src="javascripts/jquery.js"></script>
18 <script src="javascripts/foundation.min.js"></script>
19 <script src="javascripts/app.js"></script>
20
21</body>
22</html>
23
24
25

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.

1 <head>
2
<head>
3
5
7
11
<script src="javascripts/modernizr.foundation.js"></script>
12</head>
13<body>
14<div href="#"class="large button dropdown">
15 Itens
16 <ul><li><a href="#">Item 1</a></li>
17 <li><a href="#">Item 2</a></li>
18 <li class="divider"></li>
19 <li><a href="#">Item 3</a></li>
20 </ul>
</div>
21 <script src="javascripts/jquery.js"></script>
22 <script src="javascripts/foundation.min.js"></script>

23 <script src="javascripts/app.js"></script>
24</body>
</html>
25

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.

Leia mais em: Conhecendo o framework front-end Foundation http://www.devmedia.com.br/conhecendo-o-
framework-front-end-foundation/27160#ixzz2KEcJN57s

Devmedia - Conhecendo o framework front-end Foundation

Mais conteúdo relacionado

Mais procurados

Semelhante a Devmedia - Conhecendo o framework front-end Foundation

Mais de Devmedia

Último

Devmedia - Conhecendo o framework front-end Foundation