IntroduçãoNeste artigo vamos falar sobre Foundation 3, que é um framework CSS construído com Sass, um pré-processador CSS ...
o     CSS padrão: Esta versão do Foundation inclui padrões inteligentes e não requerem Sass ou qualquer      outra ferrame...
9    10< !-- Mordernizr personalizado para a fundação. -->    11    12<script src="javascript/modernizr.foundation.js"></s...
1112 <script src="javascripts/modernizr.foundation.js"></script>13</head>   <body>1415 <div class="row">16     <div class=...
Figura 2: Resultado exemplo grade FoundationTipografiaOs estilos relacionados à tipografia no Foundation ficam por conta d...
Figura 3: Tipografia básicaTambém podemos estilizar textos menores utilizando a tag<small>.Listagem 4: Exemplo tipografia ...
Figura 4: Exemplo de tipografia usando tag<small>Existe ainda uma classe chamada subheader que podemos aplicar sobre algun...
Figura 5: Exemplo de tipografia usando classe subhearder    Assim vimos três possibilidades diferentes de estarmos configu...
15    <a class="button"href="#">Medium</a><br>16    <a class="large button"href="#">Large</a><br>17    <script src="javasc...
23 <script src="javascripts/app.js"></script>24</body>   </html>25Figura 7: Botões de menu suspensoEssas são algumas das c...
Upcoming SlideShare
Loading in …5
×

Devmedia - Conhecendo o framework front-end Foundation

1,914 views

Published on

Veja neste artigo uma breve apresentação do framework front-end Foundation 3, que nos fornece vários estilos para formatação de diversos elementos da página de forma prática e elegante, bem como permite o desenvolvimento de um layout responsivo.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,914
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
65
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Devmedia - Conhecendo o framework front-end Foundation

  1. 1. IntroduçãoNeste 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 nosdisponibiliza 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 aolongo do tempo sem as dores de cabeça típicas, temos também plug-ins JavaScript que fazem interações úteise mais fáceis de implementar em diferentes resoluções de tela.Com o Foundation podemos utilizar os seguintes recursos ao criarmos nossa aplicação.ElementosGrade: É construída por dois elementos fundamentais colunas e linhas, as colunas criam a estrutura real. Parao layout funcionar corretamente temos que colocar o conteúdo dentro de uma linha e uma coluna. O queprecisamos saber é que essas colunas não possuem um tamanho fixo, o tamanho pode variar de acordo com aresolução da tela ou o tamanho da janela .Detalhes: A grade é construída com os elementos “box-sizing” e “border-box”. Propriedades CSS poderosasque informam ao navegador para considerar o espaçamento e a borda como parte de um elemento e não comoalgo adicional, assim podemos criar uma grade extremamente simples. Espaçamentos são criados apenas coma 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 classesCSS.Tipografia: Utiliza uma escala modular. A ideia de uma escala modular é que o tamanho e espaçamento detoda a tipografia na grade é derivada de um valor inicial, um outro valor arbitrário “importante” e umaproporção particular.Botões: Os botões são os elementos mais utilizados quando se trata de interação com o usuário. O Foundationinclui uma série de botões fácil de utilizar e estilos que podemos usar ou substituir para atender às nossasnecessidades.Navegação: O Foundation veio com uma série de opções de navegação para uma série de situações e omelhor 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çãoentre a grade do Foundation e os estilos de formulários, podemos fazer basicamente tudo que precisarmos emtermos de layout.Elementos UI: Nossas prototipagens terão mais do que apenas navegação, guias ou tipografia. Por isso oFoundation 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 opacote 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 comconteú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.DownloadPara começarmos a utilizar o Foundation em nossas aplicações, temos que antes de tudo fazer o download doseu 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.
  2. 2. 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 <!-- IncluindoArquivos CSS --> 7 <link rel="stylesheet"href="stylesheets/foundation.css"> 8 <link rel="stylesheet"href="stylesheets/app.css">
  3. 3. 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 8 <!-- IncluindoArquivos CSS --> 9 <link rel="stylesheet"href="stylesheets/foundation.css"> 10 <link rel="stylesheet"href="stylesheets/app.css">
  4. 4. 1112 <script src="javascripts/modernizr.foundation.js"></script>13</head> <body>1415 <div class="row">16 <div class="eight columns">17 <h3>A GRADE</h3>1819 <!—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 -->2526 <div class="row">27 <div class="six columns">28 <div class="panel">29 <p>Seiscolunas</p> </div>30 </div>31 <div class="six columns">32 <div class="panel">33 <p>Seiscolunas</p>34 </div> </div>35 </div>36 <div class="row">37 <div class="four columns">38 <div class="panel">39 <p>Quatro colunas</p> </div>40 </div>41 <div class="row">42 <div class="four columns">43 <div class="panel"> <p>Quatrocolunas</p>44 </div>45 </div>46 </div>47</body>48</html>4950515253545556
  5. 5. Figura 2: Resultado exemplo grade FoundationTipografiaOs estilos relacionados à tipografia no Foundation ficam por conta dos arquivos CSS inseridos inicialmente. Noexemplo a seguir, por exemplo, temos títulos básicos (h1 a h6) nos quais não foi necessário inserir nenhumaformatação adicional.Listagem 3: Exemplo tipografia básica12 <html>3 <head>45 <meta name="viewport"content="width=device-width"/>67 <title>Welcome to Foundation</title>89 <!-- IncluindoArquivos CSS -->10 <link rel="stylesheet"href="stylesheets/foundation.css"> <link rel="stylesheet"href="stylesheets/app.css">1112 <script src="javascripts/modernizr.foundation.js"></script>13</head>14<body>15 <!—Tipografia texto básico --> <h1>h1 header</h1>16 <h2>h2 header</h2>17 <h3>h3 header</h3>18 <h4>h4 header</h4>19 <h5>h5 header</h5>20 <h6>h6 header</h6> </body>21</html>2223
  6. 6. Figura 3: Tipografia básicaTambém podemos estilizar textos menores utilizando a tag<small>.Listagem 4: Exemplo tipografia usando tagsmall12 <html>3 <head>45 <meta name="viewport"content="width=device-width"/>67 <title>Welcome to Foundation</title>89 <!-- IncluindoArquivos CSS -->10 <link rel="stylesheet"href="stylesheets/foundation.css"> <link rel="stylesheet"href="stylesheets/app.css">1112 <script src="javascripts/modernizr.foundation.js"></script>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>19 <h5>h5 exemplo <small> texto utilizando small. </small></h5>20 <h6>h6 exemplo <small> texto utilizando small. </small></h6> </body>21</html>2223
  7. 7. Figura 4: Exemplo de tipografia usando tag<small>Existe ainda uma classe chamada subheader que podemos aplicar sobre alguns elementos para obter um efeitode texto “esmaecido”, que pode ser usado como subtítulo, por exemplo.Listagem 5: Exemplo tipografia usando classe subheader.12 <html>3 <head>45 <meta name="viewport"content="width=device-width"/>67 <title>Welcome to Foundation</title>89 <!-- IncluindoArquivos CSS --> <link rel="stylesheet"href="stylesheets/foundation.css">10 <link rel="stylesheet"href="stylesheets/app.css">1112 <script src="javascripts/modernizr.foundation.js"></script>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>18 <h5 class="subheader">h5.Texto classe subheader</h5>19 <h6 class="subheader">h6.Texto classe subheader</h6> </body>20</html>2122
  8. 8. 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 3 <meta name="viewport"content="width=device-width"/> 4 <title>Welcome to Foundation</title> 5 6 <!-- IncluindoArquivos CSS --> 7 <link rel="stylesheet"href="stylesheets/foundation.css"> 8 <link rel="stylesheet"href="stylesheets/app.css"> 9 10 <script src="javascripts/modernizr.foundation.js"></script> 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>
  9. 9. 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>2021</body>22</html>232425Figura 6: Vários tamanhos de botõesExistem ainda os botões de menu suspenso, que podemos utilizar esse quando quisermos apresentar uma listacom vários valores possíveis a serem escolhidos. Os botões suspensos utilizam a mesma classe que os outrosbotões, o que o diferencia é sua estrutura.Listagem 7: exemplo de botão suspenso.1 <head>2 <head>34 <meta name="viewport"content="width=device-width"/>56 <title>Welcome to Foundation</title>78 <!-- IncluindoArquivos CSS -->9 <link rel="stylesheet"href="stylesheets/foundation.css">10 <link rel="stylesheet"href="stylesheets/app.css">11 <script src="javascripts/modernizr.foundation.js"></script>12</head>13<body>14<div href="#"class="large button dropdown">15 Itens16 <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>
  10. 10. 23 <script src="javascripts/app.js"></script>24</body> </html>25Figura 7: Botões de menu suspensoEssas são algumas das coisas possíveis de estarmos fazendo com o Foundation, mas muitas outras ferramentasestã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

×