modelos layout fav
Tutorial da FAV - Weby
MENU
Template duas colunas para as notícias
<div class="grid-x grid-margin-x">
<div class="cell small-12 medium-12 large-12">
<figure class="image"><img src="https://files.cercomp.ufg.br/weby/up/403/o/head_exemplo.png"
alt="Imagem de cabeçalho com 1240x698 px" width="100%" height="auto" />
<figcaption>Legenda — Foto: arquivo pessoal</figcaption>
</figure>
</div>
</div>
<div class="grid-x grid-margin-x">
<div class="cell small-12 medium-7 large-6">Coluna texto</div>
<div class="cell hide-for-small-only medium-1 large-1"></div>
<div class="cell small-12 medium-4 large-5">
<figure class="image"><img src="https://files.cercomp.ufg.br/weby/up/403/o/adicionar_imagem.png"
alt="adicionar imagem" width="100%" height="auto" />
<figcaption>Legenda aqui</figcaption>
</figure>
</div>
</div>
<div class="grid-x grid-margin-x">
<div class="cell small-12 medium-4 large-5">
<figure class="image"><img src="https://files.cercomp.ufg.br/weby/up/403/o/adicionar_imagem.png"
alt="adicionar imagem" width="100%" height="auto" />
<figcaption>Legenda aqui</figcaption>
</figure>
</div>
<div class="cell hide-for-small-only medium-1 large-1"></div>
<div class="cell small-12 medium-7 large-6">Coluna texto</div>
</div>
<hr />
<p><strong>Serviço</strong></p>
<p><strong>O que:</strong> <em>EVENTO</em><br /><strong>Quando:</strong> data<br /><strong>Onde:</strong> endereço ou
site</p>
<p><strong>Créditos</strong></p>
<p>Com informações de XXX</p>Resultado
Serviço
O que: EVENTO
Quando: data
Onde: endereço ou site
Créditos
Com informações de XXX
Títulos internos no texto
<div class="grid-x grid-margin-x">
<div class="cell small-12 medium-12 large-12">
<p><strong>TÍTULO</strong></p>
</div>
</div>Coluna com texto (esq.) e imagem (dir.)
<div class="grid-x grid-margin-x">
<div class="cell small-12 medium-7 large-6">Coluna texto</div>
<div class="cell hide-for-small-only medium-1 large-1"></div>
<div class="cell small-12 medium-4 large-5">
<figure class="image"><img src="https://files.cercomp.ufg.br/weby/up/403/o/adicionar_imagem.png"
alt="adicionar imagem" width="100%" height="auto" />
<figcaption>Legenda aqui</figcaption>
</figure>
</div>
</div>Quebra de parágrafo com texto (esq.) e imagem (dir.)
</div>
<div class="cell hide-for-small-only medium-1 large-1"></div>
<div class="cell small-12 medium-4 large-5">
<figure class="image"><img src="https://files.cercomp.ufg.br/weby/up/403/o/adicionar_imagem.png"
alt="adicionar imagem" width="100%" height="auto" />
<figcaption>Legenda aqui</figcaption>
</figure>
</div>
</div>
<div class="grid-x grid-margin-x">
<div class="cell small-12 medium-7 large-6">Coluna com imagem (esq.) e texto (dir.)
<div class="grid-x grid-margin-x">
<div class="cell small-12 medium-4 large-5">
<figure class="image"><img src="https://files.cercomp.ufg.br/weby/up/403/o/adicionar_imagem.png"
alt="adicionar imagem" width="100%" height="auto" />
<figcaption>Legenda aqui</figcaption>
</figure>
</div>
<div class="cell hide-for-small-only medium-1 large-1"></div>
<div class="cell small-12 medium-7 large-6">Coluna texto</div>
</div>Quebra de parágrafo com imagem (esq.) e texto (dir.)
</div>
</div>
<div class="grid-x grid-margin-x">
<div class="cell small-12 medium-4 large-5">
<figure class="image"><img src="https://files.cercomp.ufg.br/weby/up/403/o/adicionar_imagem.png"
alt="adicionar imagem" width="100%" height="auto" />
<figcaption>Legenda aqui</figcaption>
</figure>
</div>
<div class="cell hide-for-small-only medium-1 large-1"></div>
<div class="cell small-12 medium-7 large-6">Estrutura em Grid
Básico | Fonte
A estrutura XY grid usa as classes grid-x, grid-y e cell enquanto base. Se não for definido nenhum recuo, as células simplesmente dividirão o espaço da tela sem qualquer espaço entre elas.
As classes small, medium e large correspondem às telas pequenas, médias e grandes respectivamente. Exemplos: small=celular; medium=tablet; large = monitor > 1280x720.
A tela é dividida em no máximo 12 partes – vertical e horizontal – sendo que a informação deve ser passada em conjunto com a classe de tamanho da célula. Ex.: small-12 ocupa toda a tela em um celular; large-6 ocupa a metade da tela de um monitor. Podem ser realizadas combinações diferentes para fins de responsividade.
Código
<div class="grid-x grid-margin-x">
<div class="cell">célula com largura cheia</div>
<div class="cell">full width cell</div>
</div>
<div class="grid-x grid-margin-x">
<div class="cell small-6">6 células</div>
<div class="cell small-6">6 cells</div>
</div>
<div class="grid-x grid-margin-x">
<div class="cell medium-6 large-4">12/6/4 células</div>
<div class="cell medium-6 large-8">12/6/8 cells</div>
</div>
<div class="grid-x grid-margin-x">
<div class="cell small-12 medium-6 large-4">Ocupa toda a tela em um celular</div>
<div class="cell small-6 medium-6 large-8">Ocupa a metade da tela em um celular</div>
</div>
Resultados
Mostrar ou ocultar (fonte)
É possível mostrar ou ocultar um conteúdo a depender do tamanho da tela.
Mostrar conteúdo pelo tamanho da tela.
Você pode usar a classe de visibilidade show para mostrar um conteúdo a depender do dispositivo que o usuário usa para visualizar a página. Se o navegador dele coincidir com a condição imposta pela classe, o elemento (a div) será exibida. Caso contrário, o elemento será ocultado.
Código
<p>Você está em uma tela pequena a grande.</p>
<p class="show-for-medium">Você está em uma tela média ou grande</p>
<p class="show-for-large">Você está em uma tela grande ou extra-grande.</p>
Resultado
Você está em uma tela pequena a grande.
Você está em uma tela média ou grande
Você está em uma tela grande ou extra-grande.
Explicação
Essas classes automaticamente escondem o elemento em telas menores do que foi especificado. Então, show-for-medium esconderá o elemento em telas pequenas e mostrará em telas médias e grandes.
Uma funcionalidade específica da classe permite que você mostre o conteúdo somente para um tamanho específico de tela. Basta adicionar -only no final da classe. Ex.: show-for-small-only só exibirá o conteúdos em telas pequenas sendo ocultado para telas maiores.
Código 2
<p class="show-for-small-only">Você está <em>definitivamente</em> em uma tela pequena.</p>
<p class="show-for-medium-only">Você está <em>definitivamente</em> em uma tela média.</p>
<p class="show-for-large-only">Você está <em>definitivamente</em> em uma tela grande.</p>
Resultado 2
Você está definitivamente em uma tela pequena.
Você está definitivamente em uma tela média.
Você está definitivamente em uma tela grande.
Se você não conseguir visualizar os elementos anteriores, talvez você esteja em uma tela extra grande.
Ocultar conteúdo pelo tamanho da tela
Essa opção é a oposta da classe show. Basta usar a classe hide para ocultar os elementos considerando o tamanho da tela do dispositivo.
Não há a classe hide-for-small porque esse elemento seria permanentemente ocultado. Se quiser esconder tudo, basta usar a classe hide.
Código
<p class="hide-for-medium">Você <em>não</em> está em uma tela média ou grande.</p>
<p class="hide-for-large">Você <em>não</em> está em uma tela grande ou extra grande.</p>
Resultado
Como a classe show, essa classe também tem a sua versão -only.
Código 2
<p class="hide-for-small-only">Você <em>definitivamente não</em> está em uma tela pequena.</p>
<p class="hide-for-medium-only">Você <em>definitivamente não</em> está em uma tela média.</p>
<p class="hide-for-large-only">Você <em>definitivamente não</em> está em uma tela grande.</p>
Classes genéricas para ocultar/mostrar
Se você quer simplesmene ocultar um conteúdo, essa classe pode ser usada. A classe hide e invisible significam a valor da propriedade display: none e visibility: hidden respectivamente para um elemento. Perceba que ambas as classes escondem o conteúdo das telas.
Código
<p class="hide">Você não me vê</p>
<p class="invisible">Você não me vê, mas sabe que eu estou aqui.</p>
<p class="visible">Você pode me ver.</p>
Resultado
Você não me vê
Olá, mundo!
Você não vê o que há dentro do espaço acima (paragrafo), mas sabe que existe algo ali. [veja o código fonte da página]
Você pode me ver.
Detectar orientação da tela
Essa classe permite mostrar um conteúdo a depender da orientação da tela – paisagem ou retrato –. Ela é automaticamente autolizada em tempo real quando o usuário rotacionar o dispositivo, mostrando ou escondendo o elemento. Geralmente isso acontecerá em dispositivos móveis sendo que, monitores de computadores em sua grande maioria estarão na modalidade paisagem.
Código
<p class="show-for-landscape">Você está na orientação de paisagem.</p>
<p class="show-for-portrait">Você está na orientação de retrato.</p>
Resultado
Você está na orientação de paisagem.
Você está na orientação de retrato.
Detecção de modo Escuro (Dark Mode)
A classe show-for-dark-mode e hide-for-dark-mode permitirá a ocultação ou exibição de um conteúdo quando for desenvolvido para o modo escuro (ou que o sistema do usuário estiver configurado para modo escuro).
Código
<p class="show-for-dark-mode">Eu tenho medo de escuro.</p>
<p class="hide-for-dark-mode">Essa é a luz no fim do túnel.</p>
Resultado
Eu tenho medo de escuro.
Recuos
Essa função habilita o uso de margin e padding no grid. Para definir o tipo de grid, use na classe as opções grid-margin-x | grid-margin-y ou grid-padding-x | grid-padding-y
Código
<div class="grid-x grid-margin-x">
<div class="cell medium-6 large-4">12/6/4 células</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 células</div>
<div class="cell medium-6 large-8">12/6/8 cells</div>
</div>
Resultado
Alinhamentos
https://get.foundation/sites/docs/flexbox-utilities.html
GALERIA
<h4>Galeria de fotos</h4>
<section class="orbit" role="region" aria-label="Galeria" data-orbit="">
<div class="orbit-wrapper">
<div class="orbit-controls"><button class="orbit-previous"> <span class="show-for-sr">Slide anterior</span>◀︎ </button> <button class="orbit-next"> <span class="show-for-sr">Próximo slide</span>▶︎ </button></div>
<div class="orbit-container">
<div class="is-active orbit-slide">
<div class="orbit-figure"><img class="orbit-image" src="https://files.cercomp.ufg.br/weby/up/403/o/_MG_0007.jpg" alt="" />
<div class="orbit-caption">Legenda</div>
</div>
</div>
<div class="orbit-slide">
<div class="orbit-figure"><img class="orbit-image" src="https://files.cercomp.ufg.br/weby/up/403/o/3.jpeg" alt="" />
<div class="orbit-caption">Legenda</div>
</div>
</div>
<div class="orbit-slide">
<div class="orbit-figure"><img class="orbit-image" src="https://files.cercomp.ufg.br/weby/up/403/o/4.jpeg" alt="" width="auto" height="auto" />
<div class="orbit-caption">Legenda</div>
</div>
</div>
<div class="orbit-slide">
<div class="orbit-figure"><img class="orbit-image" src="https://files.cercomp.ufg.br/weby/up/403/o/4_%282%29.jpeg" alt="" width="auto" height="auto" />
<div class="orbit-caption">Legenda</div>
</div>
</div>
</div>
</div>
<div class="orbit-bullets"><button class="is-active" data-slide="0"> <span class="show-for-sr">primeiro slide</span> <span class="show-for-sr">slide atual</span> </button> <button data-slide="1"> <span class="show-for-sr">segundo slide</span> </button> <button data-slide="2"> <span class="show-for-sr">terceiro slide</span> </button> <button data-slide="3"> <span class="show-for-sr">quarto slide</span> </button></div>
</section>Galeria de fotos
