O Foundation é um framework CSS e JavaScript desenvolvido para agilizar o desenvolvimento front-end, desde wireframes até o layout final. Ele fornece recursos como grids responsivas, componentes de navegação, botões, formulários e outros para facilitar a criação de sites e aplicativos responsivos.
2. O Foundation é um Framework CSS desenvolvido pela Zurb.
Ele foi desenvolvido para minimizar o trabalho do
desenvolvedor front-end, desde o wireframes até o
desenvolvimento final do layout front-end. Outro ponto
importante e que ele mantem um na codificação de um projeto
caso outros desenvolvedores estejam fazendo o projeto.
O Foundation tem uma séries de recursos no código fonte
baseado em em CSS e JavaScript que agiliza o
desenvolvimento do projeto, onde basta chamar a classe do
elemento desejado, para se chegar ao resultado do layout
apresentado pelo design.
O que é o Foundation Framework
3. • Grid
• Navigation
• Buttons
• Forms
• Typography
• CSS Components
• Javascript
O Framework conta com as seguintes
categorias de desenvolvimento:
4. Grid
O Foundation funciona basicamente 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. O foundation trabalha com o padrão de
desenvolvimento “mobile-first”, no qual que determina que projeto no qual esteja
desenvolvimento seja construído para dispositivos moveis, mas não é obrigatório.
No caso do framework, os grids são usados para alinhar e organizar o conteúdo do
projeto de acordo com o layout desenvolvido pelo design.
Ao baixa o Foundation Framework padrão no site, ele vem com um grid de 12
colunas, mas na mesma página do download, o framework pode ser personalizado
de varias formas como: numero de colunas, plugins e cores padrão.
Categorias do Foundation
14. Navigation
-Breadcrumbs
É a barra que faz a trilha de navegação do seu projeto,
onde são apresentadas as paginas que o usuário pode ir
e de que pagina ele veio. 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.
Categorias do Foundation
16. Buttons
-Buttons
O código fonte do Foundation conta com botões pré
configurados, basta digitar a class button no seu
código.
Categorias do Foundation
22. Forms
-Forms
O Foundation da total suporte para elaboração de
Form responsiva pois utiliza também as grids para
agrupar os elementos da form e como todos os
outros elementos que já analisamos, ele também
estiliza a form de uma forma padrão que agrada o
usuário.
Categorias do Foundation
25. Typography
-Type
O Foundation estiliza por padrão o texto apresentado na sua
página feita com o Framework, além de utilizar o Normalize.css
para padronizar os elementos de texto.
Para estilizar o texto não é necessário aplicar nenhuma classe ou
marcação especial para a maioria dos elementos bastando utilizar a
marcação padrão do HTML pois a definição CSS feita pelo
Framework está aplicada aos elementos HTML padrão com
exceção da classe “subheader” para os elementos de titulo.
Categorias do Foundation
27. Typography
-Labels
Essa função é bem interessante, ela cria um fundo com cores
padrões (ou não, é customizável) para uma certa parte do texto,
não existe uma tradução exata para essa funções portanto
vamos chama-la de label mesmo.
As labels funcionam da mesma forma que os botões em
relação aos estilos pré-definidos como o round, radius, alert,
success e etc..
Categorias do Foundation
31. CSS Components
-Alert Boxes
E uma caixa de alerta que você pode configurar para
aparecer quando algum processo é executado no
seu projeto ou por exemplo quando algum campo da
form não está correto quando clicado no botão
enviar.
Categorias do Foundation
33. CSS Components
-Panels
O Panel é um componente CSS do Foundation que da a
possibilidade de se criar, digamos, um painel para enfase
de conteúdo. É muito utilizada para transformar uma DIV
em um quadro para uma imagem por exemplo, ou um
quadro que apresenta um texto, pois estiliza os atributos
margin e padding do quadro, como na imagem:
Categorias do Foundation
35. CSS Components
-Pricing Tables
É um item que tem pouca utilização, que é uma
tabela de preço pronta, basta apenas você declarar
as informações que nela vão ser apresentadas.
Categorias do Foundation
37. CSS Components
-Progress Bar
O Foundation conta com uma forma simples e fácil de
adicionar barra de progresso a alguma função do seu
projeto. Vale ressaltar que praticamente todos os
componentes CSS do Framework seguem o mesmo
padrão de classes, o que torna cabível a configuração da
barra de progresso por parte do desenvolvedor.
Categorias do Foundation
41. CSS Components
-Flex Video
Esse componente é utilizado para corrigir problemas
de visualização de videos em dispositivos móveis,
ele torna responsivos os vídeos presentes na pagina.
Categorias do Foundation
43. CSS Components
-Tables
O Foundation estiliza automaticamente qualquer
tabela que você tenha configurada em sua página,
pois o estilo CSS é empresado para a tag table..
Categorias do Foundation