Layout em Grade do CSS e Quadrinhos (explicado por Barry o Gato)

() translation by (you can also view the original English article)

A Grade do CSS é bem bacana para projetar histórias em quadrinhos online, especialmente se quisermos que sejam flexíveis. Nesse tutorial, usaremos Barry, o gato, para demonstrar como criar um quadrinho responsivo.

Barry o Gato

Para o tutorial, peguei algumas artes no GraphicRiver. Sleepy Fat Cat é uma fonte de exibição, mas vem com adoráveis vetores de gatos–perfeito para essa demo!

Sleepy Fat Cat on GraphicRiver — Fonte Sleepy Fat Cat, no GraphicRiver

Preparando o Navegador

Não esqueçamos que é preciso um navegador de ponta para ver a Grade do CSS em ação, então, leia Layout em Grade do CSS: Um Guia de Início Rápido se o seu não suportar. Eis o que tentaremos criar:

Veja a demo completa no CodePen e como ela responde aos diferentes tamanhos de tela.

1. Marcação HTML

Comecemos criando algum HTML:

<section class="grid-1">

  <div class="panel panel-title">
    <h1>Barry’s Cushion</h1>
    <p>A tale of lethargy and soft furnishings</p>
  </div>
    <div class="panel panel-1"></div>
    <div class="panel panel-2"></div>
    <div class="panel panel-3">
      <p>“I should probably get up–things to do.”</p>
    </div>
    <div class="panel panel-4"></div>
    <div class="panel panel-5"></div>
    <div class="panel panel-6"></div>
    <div class="panel panel-7">
      <p>“Naaah.”</p>
    </div>
    <div class="panel panel-8"></div>
    <div class="panel panel-9"></div>
    <div class="panel panel-copyright">
      <p>Sleepy Fat Cat by messenj4h<br>&copy; Copyright happily ever after <a href="https://webdesign.tutsplus.com">Envato Tuts+</a>
    </div>
</section>

Aqui temos um <section> agindo como nossa grade e vários <div class="panel"> sendo nossos itens de grade.

Alguns paineis tem texto neles, mas o resta será para as imagens dos quadrinhos. Temos duas opções: podemos adicionar nossas imagens em linha, dentro dos painéis, ou através do CSS. Faremos o último porque o controle é maior no posicionamento e dimensionamento dos gráficos, mas há quem diga que imagens em linha são mais acessíveis. Faça sua escolha.

2. Estilos Básicos

Para a bola (de pelos) continuar rolando, adicionemos alguns estilos, cobrindo a tipografia e cores:

/* basics */
body {
  background: #f8f7f2;
  padding: 0 10%;
  font: 100%/1.5 'Kalam', cursive;
}

h1 {
  margin: 0;
  line-height: 1;
  padding: 10px;
  color: #251b19;
}

p {
  margin: 0;
  padding: 10px;
  color: #251b19;
  font-size: 1.2em;

a {
  color: #e56633;
}

a:hover {
  text-decoration: none;
}

Vamos de Kalam, uma fonte web do Google, para nosso texto–estilo escrita à mão é perfeito para quadrinhos. Precisamos adicioná-la no CSS ou em um link no cabeçalho do documento:

1	<link href="https://fonts.googleapis.com/css?family=Kalam" rel="stylesheet">

3. Nossa Grade

Começando pelo mobile, posicionaremos as coisas em uma coluna com um único painel em cada linha:

.grid-1 {
  display: grid;
  width: 100%;
  max-width: 770px;
  margin: 10% auto;
  grid-template-columns: 1fr;
  grid-template-rows: auto 200px 200px auto 200px 200px 200px auto 200px 200px auto;
  grid-gap: 25px;
}

Olhando nossos tutoriais anteriores sobre Grade, talvez lembre que grid-template-columns diz quantas colunas teremos e o quão largas serão. grid-template-rows faz o mesmo para linhas e definiremos onze delas. As que contem imagens terão 200px de altura e as contendo texto serão dimensionadas automaticamente pelo conteúdo. Por fim, grid-gap definirá nosso espaçamento.

Adicionemos estilos gerais aos nossos painéis:

.panel {
  color: white;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  box-shadow: 0px 0px 0px 5px #251b19;
}

As propriedades background não causam qualquer impacto visual ainda, mas causarão assim que adicionarmos as imagens. E a box-shadow agem como borda. Também podemos usar a propriedade border, mas a box-shadow costuma dar mais flexibilidade.

Vejamos o que temos até agora!

4. Imagens de Gatos

A internet existe para que mesmo, não é? Preparei alguns imagens SVG para adicionar aos painéis, uma-a-uma:

1	.panel-1 {
2	background-image: url(cat-1.svg);
3	}

Parece bom!

Mas não queremos bordas ao redor de todos os painéis. Removeremo-nos (usando box-shadow: none;) dos que contem texto, além do da primeira e última imagens.

5. Consultas de Mídia

Essas imagens ainda não estão perfeitas... Pobre Barry, ficando todo cortado. É hora de ir além do mobile e alterar nossa grade para áreas de visualização maiores. Adicionemos alguns consultas de mídia: uma em 400px e outra em 600px (valores arbitrários, use os que quiser):

/* media query 1 */
@media only screen and (min-width: 400px) {
  
}

/* media query 2 */
@media only screen and (min-width: 600px) {
  
}

Nós os usaremos pra alterar o layout da grade em cada caso.

/* media query 1 */
@media only screen and (min-width: 400px) {
  
  .grid-1 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 200px auto 200px 200px auto 200px auto;
  }  
  
}

/* media query 2 */
@media only screen and (min-width: 600px) {
  
  .grid-1 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 200px 200px 200px auto;
  }
  
}

Usaremos duas colunas e dez linhs para telas um pouco maiores e três colunas e cinco linhas para ainda maiores.

Abrangendo

Agora que não estão presos a uma única coluna, podemos ser mais criativos. Precisamos, por exemplo, que o título tome toda a largura do quadrinho. O mesmo é verdadeiro do texto dos painéis e da nota sobre direitos de cópia. Mesmo algumas imagens seriam melhor com toda a largura dos painéis. Assim, adicionaremos esses detalhes à primeira consulta de mídia:

  .panel-title,
  .panel-3,
  .panel-6,
  .panel-7,
  .panel-copyright {
    grid-column: span 2;
  }

Mudamos a tipografia em alguns lugares, também. No final, temos isso:

Nosso layout de duas colunas está ótimo! Porém, o de três precisa de ajustes.

6. Ajustando o Layout de Três Colunas

Como colocamos o mobile primeiro, as regras aplicadas à nossa primeira consulta de mídia ainda se aplicam a telas maiores. Precisamos trabalhar os painéis e resetar alguns estilos.

Comecemos fazendo .panel-title tomar três colunas ao invés de duas. Assim, .panel-3 (com texto) pode voltar para grid-column: span 1; ou grid-column: auto;

O mesmo se aplica a .panel-6. Com mais algumas mudanças, devemos ter algo assim:

Um Pouquinho de Flexbox

Queremos que o primeiro diálogo seja centralizado verticalmente, então usamos flexbox para isso. Adicionemos isso à segunda consulta de mídia:

1	.panel-3 {
2	display: flex;
3	align-items: center;
4	}

before flexbox after flexbox — Antes e depois dos flexbox

7. Sobrepondo Painéis

A Grade não nos restringe a blocos equidistantes seguindo o fluxo da página. Também podemos sobrepor os painéis. Tornaremos o texto final um pouco mais interessante, atribuindo à mesmo localização da grade que o próximo painel:

  .panel-7 {
    grid-column: 1;
    grid-row: 4;
    z-index: 1;
  }
  
  .panel-8 {
    grid-column: 1 / span 2;
    grid-row: 4;
  }

Aqui, posicionamos ambos .panel-7 e .panel-8 em grid-column: 1; e grid-row: 4;. Isso significa que ambos ocupam o mesmo espaço e o que vem por último no DOM aparece em cima do primeiro.

Podemos usar z-index para alterar a ordem de pilhagem, assim, dando z-index: 1; para .panel-7, ele vem para frente:

Nota: como removemos uma linha, precisamos checar se grid-template-rows está certa.

Adicionemos mais um pouco de estilo ao "Naaah". De novo, os itens de grade não são tão restritos quanto se pensa–podemos mexê-los com margens negativas e até transformações, sem problemas. Adicionando mais alguns estilos ao painel e parágrafos dentro dele, obtemos:

Conclusão

Muito bem–eis o que construímos!

Um exercício legal para usar a Grade do CSS além de introduzir alguns novos conceitos ao mesmo tempo. Espero que tenha curtido–se não se importar, tirarei um cochilo agora.

Leitura Adicional

Entendendo o Layout em Grade do CSS série para iniciante
Fonte Sleepy Fat Cat no GraphicRiver
As Mecânicas dos Quadrinhos
Entendendo Quadrinhos por Scott McCloud