Foundation

Equipe
Karen de Souza Pompeu - 2016001610

Luiz Felipe Gomes Ribeiro - 2016001915

Marcelo Henrique de Oliveira - 2019005570

Sávio Mendes Costa - 2016002510

Introdução
● Foundation é uma família de estruturas responsivas de front-end que facilitam o
design de sites e aplicativos.
● Têm uma boa aparência em qualquer dispositivo.
● A base é semântica, legível, flexível e totalmente personalizável.
● O Foundation fornece um grid responsivo e componentes de HTML e CSS para
UI, Templates, tipografia, formulários, botões, navegação e outros elementos de
interface, bem como funcionalidades opcionais fornecidas por extensões
JavaScript.
● Foundation é um projeto de código aberto, anteriormente mantido pela ZURB.
Desde 2019, a Fundação é mantida por voluntários.
Foundation for Sites
O Foundation for Sites 6 foi projetado para levar seu projeto do protótipo à produção
com mais eficiência do que nunca! Inclui uma ampla gama de componentes
modulares e flexíveis que são facilmente estilizados. Esses blocos de construção
versáteis e leves tornam mais fácil dar vida às suas ideias.
Construa Produtos, Aplicações e Serviços
● Semântica

Tudo é semântico. Você pode ter a marcação mais limpa sem sacrificar a utilidade e a
velocidade do Foundation.
Construa Produtos, Aplicações e Serviços
● Semântica
● Môvel Primeiro

Você pode construir primeiro para pequenos dispositivos. Então, conforme os dispositivos
ficam cada vez maiores, coloque mais complexidade para um design responsivo completo.
Construa Produtos, Aplicações e Serviços
● Semântica
● Môvel Primeiro
● Customizavel

Você pode personalizar sua construção para incluir ou remover certos elementos, bem
como definir o tamanho das colunas, cores, tamanho da fonte e muito mais.
Construa Produtos, Aplicações e Serviços
● Semântica
● Môvel Primeiro
● Customizavel
● Profissional

Milhões de designers e desenvolvedores dependem do Foundation. Foundation possui

suporte comercial, treinamento e consultoria para ajudar a desenvolver produtos e serviços.
Download
https://get.foundation/

https://static.download.foundation/sites-css-latest
Instalação e Utilização
● Sublime, bloco de notas ou qualquer editor de texto
● Descompactador de arquivos
Utilização

Para começar, o arquivo (index.html) inclui alguns estilos básicos

que você pode modificar, brincar ou destruir totalmente para
continuar.
Index.HTML
Documentação
● É fundamental a leitura da documentação do Foundation para maiores
detalhes nos assuntos que serão abordados, e nos baseamos nela em boa
parte da elaboração deste seminário.
● https://get.foundation/sites/docs
Grids
● O Foundation funciona basicamente com grids, que é um padrão de
desenvolvimento para layouts que determina as medidas que devem ser
utilizadas e como o site vai se comportar em cada medida.
● O Foundation trabalha com o padrão de desenvolvimento “mobile-first”, no
qual determina que o projeto seja construído para que funcione em
dispositivos móveis, mas não é obrigatório.
Grids
● 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 baixar o Foundation Framework padrão no site, ele vem com um grid de
12 colunas, mas na mesma página de download, o framework pode ser
personalizado de várias formas como: número de colunas, plugins e cores
padrão.
XY Grid
● O XY veio a partir da versão 6.4 do Foundation e tem a missão de substituir
as versão antigas de Grid (Float Grid e Flex Grid), mas com a adição de uma
série de recursos úteis que antes era possível apenas com Flexbox, como o
alinhamento horizontal e vertical, dimensionamento automático e grade
vertical completa.
XY Grid
● A estrutura do XY grid usa as classes “grid-x”, “grid-y” e “cell” em sua base.
● Exemplo: grid1.html

<div class="grid-x">
<div class="cell">full width cell</div>
<div class="cell">full width cell</div>
</div>
<div class="grid-x">
<div class="cell small-6">6 cells</div>
<div class="cell small-6">6 cells</div>
</div>
<div class="grid-x">
<div class="cell medium-6 large-4">12/6/4 cells</div>
<div class="cell medium-6 large-8">12/6/8 cells</div>
</div>
XY Grid
● A estrutura do XY grid usa as classes “grid-x”, “grid-y” e “cell” em sua base.
● Exemplo: grid1.html
XY Grid - Gutters
● Um dos recursos mais importantes da estrutura XY grid é a capacidade do
uso de margem e preenchimento em harmonia. Para definir o tipo de grid
basta usar as classes “grid-margin-x” / “grid-margin-y” ou “grid-padding-x” /
“grid-padding-y”.
<div class="grid-x grid-margin-x">
<div class="cell medium-6 large-4">12/6/4 cells</div>
<div class="cell medium-6 large-8">12/6/8 cells</div>
</div>
<div class="grid-x grid-padding-x">
<div class="cell medium-6 large-4">12/6/4 cells</div>
<div class="cell medium-6 large-8">12/6/8 cells</div>
</div>
XY Grid - Gutters
● Exemplo: grid2.html
XY Grid - Container
● Exemplo: grid3.html
XY Grid - Redimensionamento e Ajustes Responsivos
● Exemplo: grid4.html
Estilos
● Similar aos já estados nas aulas de HTML e CSS

Estilo Exemplos de Tags

Parágrafo <p> </p>

Header (Cabeçalho) <h1> </h1>

Link <a href = "index.html" > Index </a>

Divisor <hr>

Lista não ordenada <ul> <li> </li> </ul>

Lista ordenada <ol> <li> </li> </ol>

Estilos
● Similar aos já estados nas aulas de HTML e CSS

Estilo Exemplos de Tags

Definição de listas <dl> <dt> </dt> <dd> </dd> </dl>

Citação <blockquote> <cite> </cite> </blockquote>

Abreviação <abbr title = "Cristiano Ronaldo"> CR7 </abbr>

Código <code> &lt;div&gt; </code> (vai aparecer: <div>)

Teclas (ou combinação de teclas) <kbd> </kbd>

Texto vs. Imagem <img src = "/img/foto.jpg" alt = "Nome da foto">

Botões - Básico
● Para criar um simples botão, basta usar o atributo type = “button” para ter o
tipo botão e a classe class = “button” para formatação, em seu código. A
redundância no código só feito para fins de exemplificação.

<button type="button" class="button"> Botão </button>

Botões - Grupo
● Adicione a classe “button-group”, e dentro dele coloque quantos botões você
desejar.

<div class="button-group" >

<a class="button">Um</a>
<a class="button">Dois</a>
<a class="button">Três</a>
</div>
Botões - Tamanhos
● Os botões podem ser redimensionados colocando as classes “tiny”, “small”,
“large”, “expanded”.
<div class="button-group tiny">
<a class="button">Botão minúsculo</a>
</div>
<div class="button-group large">
<a class="button">Botão enorme</a>
</div>
Botões - Colorindo
● Os botões podem ser coloridos colocando as classes “primary”, “secondary”,
“success”, “warning” e “alert” .
<div class="button-group">
<a class="primary button">Acessar</a>
<a class="secondary button">Ver</a>
<a class="success button">Confirmar</a>
<a class="warning button">Cuidado</a>
<a class="alert button">Deletar</a>
</div>
Botões - Sem Preenchimento
● Os botões podem ficar sem preenchimento também, bastando usar a classe
“hollow” .
<button class="hollow button" href="#">Primário</button>
<button class="hollow button secondary" href="#">Secundário</button>
<button class="hollow button success" href="#">Sucesso</button>
<button class="hollow button alert" href="#">Alerta</button>
<button class="hollow button warning" href="#">Cuidado</button>
<button class="hollow button" href="#" disabled>Desabilitado</button>
Botões - Exemplos
● Exemplo: botoes.html
Navegação
Recursos necessários para um usuário interagir com o sistema de forma eficiente.

ZURB FOUNDATION: Framework css de front-end, que oferece uma interface

para criar layouts inteiros, utilizando ferramentas, funções e estilos pré
configurados.

Permite personalizar estilos criados.

Referências Sass.
Menu
Componente flexível e multifacetado para navegação.

Foundation possui uma grande quantidade de componentes de menu que

facilitam a construção de muitos padrões de navegação.

● Basic Menu
● Drop Down Menu
● Drill Down Menu
● According Menu
Basic Menu
Criação: <ul class="menu">
<li><a href="#">1</a></li>
<li><a href="#">dois</a></li>
<li><a href="#">Três</a></li>
<li><a href="#">Quatro</a></li>
</ul>

Classes Importantes:

● .align-
● .expanded
Vertical Menu
Classes Importantes:

● .vertical
● .align-
● .simple
Menu aninhado e Textos de Menu
Classes Importantes:

● .nested-
● .menu-text
Ícones
Os itens do menu podem conter ícones;

Classe Importante:
<ul class =”menu icons icon-right>

● .icons
● Obs: A classe de layout escolhido para o menu deve ser adicionada junto.
Barras de Navegação - TOPBAR
@include top-bar-container

1 barra superior pode ter até 2 sessões:

● Esq -> .top-bar-left

● Dir -> .top-bar-right

* O menu irá herdar a cor do fundo da topbar.

* Em telas pequenas as sessões são empilhadas umas sobre as outras.

* Versão Sass: $topbar-submenu-background variável.

 TopBar

Opções avançadas da Layout

Menu suspenso - Drop Down
Esse tipo de menu é desenvolvido com base na sintaxe do componente menu.

Para configurar esse tipo de menu:

● Add a classe .dropdown

● Add o atributo data-dropdown-menu

*é possível aninhar 1 ou mais menus dentro do dropdown para criar mais

níveis no menu suspenso.

● Classes importantes: .vertical e .max-width

Menu suspenso
Menu Detalhado - Drill Down
Add a classe .data-drilldown ao menu raíz para configurar o detalhamento.

Para criar submenus: colocar um <ul> associado a um <a>.

Para menus muito longos, deve-se add a classe .scrolltop.

Utilização de plugins.

Plugin de detalhamento automatico: Add um botão voltar ao topo de cada menu

aninhado.

.js-drilldown-back class
Menu Detalhado
Menu Acordeão - According Menu
Para criar um According menu add a classe .data-according-menu.

Add também a classe .vertical para melhor configuração do menu.

Classe .nested add 1 recuo a 1 menu aninhado.

Classe .is-active exibe o menu ao carregar a página.

Quando emparelhado a uma <url> menu desliza ↑↓ ao clicar.

Permite alternar submenus separadamente.

Menu Acordeão
According Menu - Alternar submenus
Em According Menus é possível ter um alternador de submenu separado.

Permite que o item pai tenha seu próprio link.

Permite que o submenu seja aberto/fechado.

Configuração: Add a class .according-menu;

Add o atributo de dados data-submenu-toggle =”TRUE”

Navegação Responsiva
O menu possui classes css que permitem o ajuste para diferentes tamanhos de
tela.

VOLTRON -> Plugin responsivo.

Para não empilhar sessões em tela pequena: use a classe .stacked-for-tamanho

.stacked-for-small

.stacked-for-medium

.stacked-for-large
Responsividade

<ul class="vertical medium-horizontal menu"> : classe responsiva integrada.

Conversão de menus utilizando Voltron.

Configuração mais adequada
Drill down Menu funciona melhor em dispositivos móveis.

Para usar esse menu em telas maiores é necessário convertê-lo em um Menu

suspenso (bug 6.3.1).

According menu são mais indicados para mobile (conversão para telas maiores).

According também é ótimo para aplicações de desktop (conversão para Drill down
no mobile).

Barras de títulos: Não aparecem em telas menores.