CSS Grid Layout y los Comics (según explicado por el Gato Barry)

Resulta que CSS Grid es muy bueno en maquetar comics online, especialmente si quieres que tus comics sean flexibles. En éste tutorial, usaremos al Gato Barry para demostrar cómo crear un comic responsivo.

El Gato Barry

Para éste tutorial, he pedido prestado algunos diseños de GraphicRiver; Sleepy Fat Cat es realmente un tipo de letra, pero viene con algunos encantadores vectores de gatos-¡perfectos para éste demo de comic!

Prepara Tu Navegador para la Velocidad

No olvides, necesitarás las funcionalidades de vanguardia del navegador para ver a CSS Grid en acción, así que consulta CSS Grid Layout: Una Guía de Inicio Rápido si estás usando un navegador que no lo soporta. Aquí está lo que vamos a trabajar:

Consulta el demo completo en CodePen para verlo responder a diferentes tamaños de pantalla.

1. El Marcado

Comencemos por estructurar algo de HTML:

1

<section class="grid-1">

2

3

  <div class="panel panel-title">

4

    <h1>Barry’s Cushion</h1>

5

    <p>A tale of lethargy and soft furnishings</p>

6

  </div>

7

    <div class="panel panel-1"></div>

8

    <div class="panel panel-2"></div>

9

    <div class="panel panel-3">

10

      <p>“I should probably get up–things to do.”</p>

11

    </div>

12

    <div class="panel panel-4"></div>

13

    <div class="panel panel-5"></div>

14

    <div class="panel panel-6"></div>

15

    <div class="panel panel-7">

16

      <p>“Naaah.”</p>

17

    </div>

18

    <div class="panel panel-8"></div>

19

    <div class="panel panel-9"></div>

20

    <div class="panel panel-copyright">

21

      <p>Sleepy Fat Cat by messenj4h<br>&copy; Copyright happily ever after <a href="https://webdesign.tutsplus.com">Envato Tuts+</a>

22

    </div>

23

</section>

Aquí tenemos un <section> para actuar como nuestro grid o grilla, con una carga de elementos <div class="panel"> para ser nuestros elementos grid.

Un par de paneles tienen texto en ellos, pero el resto será para nuestras imágenes del comic. Tenemos dos opciones aquí, podemos colocar nuestras imágenes directamente en el HTML dentro de los paneles, o agregar las imágenes mediante CSS. Voy a hacer lo último porque permite un control más sencillo sobre la colocación y la dimensión de los gráficos, pero podrías argumentar que las imágenes en el HTML serían más accesibles. Es tu elección.

2. Estilos Básicos

Para que empiece a rodar la pelota, agreguemos algunos estilos para cubrir nuestra tipografía y colores:

1

/* basics */

2

body {

3

  background: #f8f7f2;

4

  padding: 0 10%;

5

  font: 100%/1.5 'Kalam', cursive;

6

}

7

8

h1 {

9

  margin: 0;

10

  line-height: 1;

11

  padding: 10px;

12

  color: #251b19;

13

}

14

15

p {

16

  margin: 0;

17

  padding: 10px;

18

  color: #251b19;

19

  font-size: 1.2em;

20

21

a {

22

  color: #e56633;

23

}

24

25

a:hover {

26

  text-decoration: none;

27

}

He elegido Kalam como la fuente de Google para nuestro texto-su estilo manuscrito es perfecto para los cómics que tengo. Necesitarás colocarlo en tu CSS o mediante un enlace en el head de tu documento:

1

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

3. Nuestro Grid o Grilla

Comenzando con el planteamiento de primero dispositivos móviles, ponemos las cosas en una columna con un solo panel en cada fila:

1

.grid-1 {

2

  display: grid;

3

  width: 100%;

4

  max-width: 770px;

5

  margin: 10% auto;

6

  grid-template-columns: 1fr;

7

  grid-template-rows: auto 200px 200px auto 200px 200px 200px auto 200px 200px auto;

8

  grid-gap: 25px;

9

}

Regresando a nuestros tutoriales anteriores de Grid, recordarás que grid-template-columns asigna cuántas columnas tendremos, y qué tan anchas serán. grid-temploate-rows hace lo mismo para las filas; aquí definiremos once de ellas. Las que contienen imágenes serán de 200px de altura, las que contengan texto se dimensionarán automáticamente de acuerdo al contenido. Finalmente, grid-gap define el tamaño del medianil.

Ahora agreguemos algunos estilos generales a nuestros paneles:

1

.panel {

2

  color: white;

3

  background-repeat: no-repeat;

4

  background-position: center center;

5

  background-size: cover;

6

  box-shadow: 0px 0px 0px 5px #251b19;

7

}

Las propiedades background no tienen ningún impacto visual aún, pero lo tendrán tan pronto como agreguemos algunas imágenes de fondo. Y el box-shadow actúa como un borde. También puedes usar las tradicionales propiedades de border aquí si lo prefieres, pero box-shadow a veces proporciona mayor flexibilidad.

¡Veamos lo que tenemos hasta ahora!

4. Imágenes del Gato

Para que se hizo la internet, ¿verdad? He preparado unas cuántas imágenes SVG para añadir a los paneles, lo que hago una a una:

1

.panel-1 {

2

  background-image: url(cat-1.svg);

3

}

¡Se ve bien!

Pero no quiero bordes alrededor de todos los paneles. Los eliminaré (usando box-shadow: none;) de las que contienen texto, junto con la primera imagen, y la última imagen.

5. Media Queries

Éstas imágenes no están funcionando perfectamente aún; pobre Barry ha sufrido algunos cortes. Es momento de ver más allá de los dispositivos móviles y alterar nuestro grid para ventanas gráficas más grandes. Agreguemos algunas media queries; una en 400px y una en 600px (cifras arbitrarias, usa las que quieres):

1

/* media query 1 */

2

@media only screen and (min-width: 400px) {

3

4

}

5

6

/* media query 2 */

7

@media only screen and (min-width: 600px) {

8

9

}

Las usaremos para alterar el maquetado del grid o la grilla en cada caso.

1

/* media query 1 */

2

@media only screen and (min-width: 400px) {

3

4

  .grid-1 {

5

    grid-template-columns: repeat(2, 1fr);

6

    grid-template-rows: auto 200px auto 200px 200px auto 200px auto;

7

  }  

8

9

}

10

11

/* media query 2 */

12

@media only screen and (min-width: 600px) {

13

14

  .grid-1 {

15

    grid-template-columns: repeat(3, 1fr);

16

    grid-template-rows: auto 200px 200px 200px auto;

17

  }

18

19

}

Vamos por dos columnas y ocho filas para pantallas ligeramente más grandes, luego tres columnas y cinco filas para aún más grandes.

Expandiendo

Ahora que nos hemos salido de las limitaciones de una columna podemos ser un poco más creativos. Necesitamos, por ejemplo, que nuestro título abarque el ancho de todo el cómic. Lo mismo es cierto de los paneles que contienen texto, y el enunciado de derechos de autor. Aún algunas de las imágenes funcionarían mejor en paneles del ancho completo. Así que agregaremos esos detalles a la primera de nuestras media queries:

1

  .panel-title,

2

  .panel-3,

3

  .panel-6,

4

  .panel-7,

5

  .panel-copyright {

6

    grid-column: span 2;

7

  }

He cambiado la tipografía en un par de casos también, al final nos da:

¡Nuestro maquetado de dos columnas luce magnífico! Sin embargo, nuestro comic de tres columnas necesita arreglos.

6. Arreglando Nuestro Maquetado de Tres Columnas

Como estamos trabajando en el planteamiento primero dispositivos móviles, las reglas que aplicamos a nuestra primera media query están todavía teniendo efecto en las pantallas más grandes. Necesitamos trabajar a nuestra manera a través de los paneles y restablecer algunos estilos.

Comenzamos por hacer que el .panel-title se extienda tres columnas, en lugar de sólo dos. Posteriormente .panel-3 (con el texto) puede ser definido otra vez en grid-column: span 1; o grid-column: auto;

Lo mismo aplica a .panel-6 . Con un par de cambios más deberías terminar con algo como ésto:

Un Poco de Flexbox

Me gustaría que la primera frase del diálogo estuviera centrada verticalmente, así que utilicemos flexbox para hacer eso. Añade lo siguiente a la segunda media query:

1

  .panel-3 {  

2

    display: flex;

3

    align-items: center;

4

  }

7. Superponiendo Paneles

Grid no nos restringe a bloques equidistantes que corren a lo largo y ancho de la página, podemos felizmente poner en capas nuestros paneles también. Vamos a hacer nuestro fragmento de texto final un poco más interesante al asignarlo a la misma ubicación en la grilla que el siguiente panel:

1

  .panel-7 {

2

    grid-column: 1;

3

    grid-row: 4;

4

    z-index: 1;

5

  }

6

7

  .panel-8 {

8

    grid-column: 1 / span 2;

9

    grid-row: 4;

10

  }

Aquí, hemos posicionado ambos .panel-7 y .panel-8 en grid-column: 1; y grid-row: 4; Eso significa que ambos están en el mismo lugar, con cualquiera que aparezca como segundo en el DOM siendo colocado arriba del primero.

Podemos utilizar z-index para alterar el orden de apilamiento, así que dando a .panel-7 un z-index: 1; lo coloca arriba:

Nota: ahora que hemos eliminado eficazmente una fila, necesitarás revisar que tu grid-template-rows esté correcto.

Agreguemos un poco más de estilo a nuestro "Naaah". De nuevo, elementos grid no están restringidos tanto como pudieras pensar-podemos cambiarlos con márgenes negativos y aún transformarlos sin ningún problema. He agregado algunos estilos al panel y al párrafo dentro de él para dar ésto:

Conclusión

¡Bien hecho-aquí está lo que creamos!

Éste fue un ejercicio divertido usando CSS Grid, mientras te presenté algunos nuevos conceptos de Grid a lo largo del tutorial. Espero que lo hayas disfrutado-ahora si no te importa me iré a dormir una siesta.

Más material para Leer

• Comprendiendo CSS Grid Layout serie para el principiante
• Tipo de Letra Sleepy Fat Cat en GraphicRiver
• La Mecánica del Comic
• Comprendiendo los Comics por Scott McCloud