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-3 large-4">
        <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-3 large-4">
        <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ços</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

Imagem de cabeçalho com 1240x698 px
Legenda — Foto: arquivo pessoal
Coluna texto
adicionar imagem
Legenda aqui
adicionar imagem
Legenda aqui
Coluna texto

Serviços

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-3 large-4">
        <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-3 large-4">
        <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-3 large-4">
        <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-3 large-4">
        <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

célula com largura cheia
full width cell
6 células
6 cells
12/6/4 células
12/6/8 cells
Ocupa toda a tela em um celular
Ocupa a metade da tela em um celular

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

Você não está em uma tela média ou grande.

Você não está em uma tela grande ou extra grande.

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>

 

Resultado 2

Você definitivamente não está em uma tela pequena.

Você definitivamente não está em uma tela média.

Você definitivamente não está em uma tela grande.

 


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ê

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.

Essa é a luz no fim do túnel.


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

12/6/4 células
12/6/8 cells
12/6/4 células
12/6/8 cells

Alinhamentos

https://get.foundation/sites/docs/flexbox-utilities.html

 

GALERIA

<h4>Galeria de fotos | Deglutindo Buscky</h4>
<section class="orbit" role="region" aria-label="Deglutindo Bruscky" 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">Carlos Monaretta - egresso do curso de Licenciatura em Artes Visuais (2020)</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">Instalação Deglutindo Bruscky - O que é arte? Qual é o seu papel hoje?</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">A estrutura da instalação é composta por lápis, canetas, cadeira e mesa</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">Espaço expositivo da Do write (rigth) to me</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 | Deglutindo Buscky

Carlos Monaretta - egresso do curso de Licenciatura em Artes Visuais (2020)
Instalação Deglutindo Bruscky - O que é arte? Qual é o seu papel hoje?
A estrutura da instalação é composta por lápis, canetas, cadeira e mesa
Espaço expositivo da Do write (rigth) to me