41 / 68
CONHEÇA O
FOUNDATION
41
F
oundation 5 é um framework para
desenvolvimento de sites e
aplicativos. A plataforma permite
trabalhar com folhas de estilo,
WLSRJUDëD XP JULG SDUD LQVHULU
elementos de design.
Para começar a usar
(como será ensinado nas páginas a seguir),
deve-se instalá-lo. Acesse o link e escolha o
pacote mais apropriado para suas necessidades:
http://lwgo.to/14y.No tutorial, foi escolhido o Complete. Uma vez
baixado o pacote, basta descompactar em um diretório.
Um arquivo index.html será criado no diretório raiz, e três
subdiretórios (css, img, js) serão gerados com os arquivos
necessários. Para usar o Foundation, é preciso apenas
referenciar os arquivos javascript e css. Depois, deve-se
FRSLDU R FµGLJR GH LQLFLDOL]D©¥R QR íQDO GR DUTXLYR DQWHV
da tag </body>. As linhas para inserir na página são as
seguintes (dentro das tags
<head> e </head>
):
<link href="css/foundation.css" rel="stylesheet" />
OLQN KUHI KWWS FGQMV FORXGîDUH FRP DMD[ OLEV
foundicons/3.0.0/foundation-icons.css" rel="stylesheet"
/>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.dropdown.js"></
script>
<script src="js/vendor/modernizr.js"></script>
Imediatamente antes da tag </body>
<script>
$(document).foundation();
</script>
Para iniciar o uso, a ideia é criar um arquivo chamado
TESTE.HTML e inserir algum código para ver como os
elementos do framework funcionam. Abra o bloco de
notas e digite as linhas abaixo.
<!doctype html>
<html >
<head>
<meta charset="utf-8" />
***Linhas de arquivos CSS e JS ****
</head>
<body>
<a href="#" class="small button">Meu
primeiro botão</a><br/>
<script>
$(document).foundation();
</script>
</body>
</html>
Salve o arquivo e abra no navegador para ver um
botão. A linha importante desse código cria um botão
usando a classe “small button”. A imagem abaixo mostra
uma série de botões que podem ser criados rapidamente
com essas classes já prontas do Foundation.
E o código relacionado a cada um deles:
<!-- Size Classes -->
Foundation 5 é
poderoso e cheio
de recursos;
para detalhar
cada aspecto
de todos seriam
necessários
diversos livros
COMEÇAR DO ZERO UMPROJETO É SEMPRE MUITO
TRABALHOSO. POR ISSO, USE A PLATAFORMA COMO
BASE E TRABALHE COM FOLHAS DE ESTILO, TIPOGRAFIA,
GRID E DEMAIS ELEMENTOS DE DESIGN
Por Homero Ottoni
REVISTA LOCAWEB
FOUNDATION