Design responsívo: conteúdo multimídia dividido em colunas
Muitas vezes pode ser interessante dividir um texto em colunas, como em um artigo de jornal ou revista. Sketch fornece classes para dividir textos em colunas.
Atenção:
O design responsívo visa garantir que o conteúdo de um website possa ser legível em diversos dispositivos, independente de sua resolução de vídeo. Assim, caso a tela do usuário seja pequena, o conteúdo multimídia é exibido em uma única coluna.
A tabela abaixo apresenta as classes necessárias para apresentar conteúdo em várias colunas.
| Classe | Descrição |
|---|---|
| content-in-one-column | mantém o conteúdo em uma coluna |
| content-in-two-columns | divide o conteúdo em duas colunas |
| content-in-three-columns | divide o conteúdo em três colunas |
| content-in-four-columns | divide o conteúdo em quatro colunas |
| content-in-five-columns | divide o conteúdo em cinco colunas |
Considere o exemplo abaixo:
<div class="container small-padding small-border-frame border-color-silver content-in-three-columns"> <p class="no-padding"> Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. </p></div>Isso irá resultar em:
Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.
Também é possível controlar o espaçamento entre as colunas. A tabela abaixo apresenta as classes disponíveis para isso:
| Classe | Comprimento do espaçamento |
|---|---|
| small-content-column-gap | 40px |
| medium-content-column-gap | 70px |
| large-content-column-gap | 90px |
Vamos ver o que aconteceria se adicionássemos um espaçamento de 70px às colunas do exemplo anterior, que agora irá possuir uma imagem adicionada ao final do texto em colunas:
<div class="container small-padding small-border-frame border-color-silver content-in-three-columns medium-content-column-gap"> <p class="no-padding"> Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. <img src="https://raw.githubusercontent.com/celmaster/sketch-core/master/public_html/assets/image/Sketch.jpg" alt="" title=""> </p></div>Isso irá resultar em:
Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.
Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.
Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.
Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.
Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.
Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.
Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.
Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.
Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.
Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.
Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.
Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.
Finalmente, também é possível adicionar bordas às colunas para ter uma melhor noção de sua divisão. A tabela abaixo apresenta as principais classes responsáveis por adicionar bordas às colunas.
| Classe | Descrição |
|---|---|
| border-column-solid | borda sólida |
| border-column-dashed | borda tracejada |
| border-column-double | borda dupla |
| border-column-dotted | borda pontilhada |
| border-column-groove | aplica efeito 3D na borda com realce à direita |
| border-column-ridge | aplica efeito 3D na borda com realce à esquerda |
| border-column-inset | concebe um efeito de graduação com bordas que vão da cor mais escura para a mais clara |
| border-column-outset | aconcebe um efeito de graduação com bordas que vão da cor mais clara para a mais escura |
Vamos utilizar exemplo anterior como cenário de teste para adicionar uma borda pontilhada entre as culunas:
<div class="container small-padding small-border-frame border-color-silver content-in-three-columns medium-content-column-gap border-column-dotted"> <p class="no-padding"> Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas. <img src="https://raw.githubusercontent.com/celmaster/sketch-core/master/public_html/assets/image/Sketch.jpg" alt="" title=""> </p></div>Isso irá resultar em:
Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.
Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.
Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.
Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.
Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.
Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.
Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.
Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.
Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.
Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.
Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.
Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.Isto é um texto dividido em colunas.