Es difícil superar la sensación de encontrar un uso perfecto para una nueva tecnología. Puedes leer cada manual práctico bajo el sol y ooh-y-ahh en demostraciones llamativas, pero la primera vez que lo usas en tu propio proyecto … ahí es cuando las cosas realmente encajan.
Adquirí una nueva apreciación por CSS Grid al crear un diseño flexible para un programa de conferencias. Las necesidades del proyecto se alinearon perfectamente con las fortalezas de la cuadrícula: un diseño bidimensional (vertical y horizontal) con una ubicación compleja de elementos secundarios. En el proceso de construcción de una prueba de concepto, encontré algunas técnicas que hicieron que el código fuera muy legible y divertido de trabajar.
La demostración resultante incluyó algunos usos interesantes de las características de CSS Grid y me obligó a lidiar con algunos detalles de la grilla con los que no se encuentra todos los días.
Antes de comenzar, podría ser una buena idea mantener abierta otra pestaña con la guía Programar Pluspara CSS Grid para hacer referencia a los conceptos que cubrimos a lo largo de la publicación.
Definición de nuestros requisitos de diseño
Me propuse crear el siguiente diseño gracias a WordCamp, los cientos de conferencias centradas en WordPress que se realizan en todo el mundo cada año. Estos eventos variados varían en tamaño y formato, pero todos usan la misma herramienta de diseño de horarios.
El diseño final que construiremos.
Ayudé a programar un par de WordCamps y diseñé un sitio web de WordCamp, así que conocía las deficiencias del diseño de tabla HTML existente. Si su horario no encajaba en una cuadrícula uniforme, bueno… ¯ _ (ツ) _ / ¯
Con el objetivo de encontrar una mejor manera, comencé enumerando los requisitos de diseño:
- Sesiones de duración variable (limitadas a establecer incrementos de tiempo)
Imagínese charlas consecutivas de una hora en tres salas junto con un taller de dos horas en otra.
- Sesiones que abarcan una o más “Pistas”Las pistas suelen estar asociadas a una sala específica del lugar. En el caso de mi WordCamp local en Seattle, ¡el lugar puede literalmente quitar una pared para combinar dos habitaciones!
- El horario puede incluir un espacio vacío
Una cancelación de último minuto o una sesión extra corta crea lagunas en un horario.
- El diseño es fácil de personalizar con CSS
Los sitios web de WordCamp solo permiten la creación de temas a través de CSS.
- El diseño se puede generar automáticamente a partir del contenido de CMS
Dado que estamos creando un diseño a partir de datos de sesión estructurados en miles de sitios web, no podemos confiar en ningún HTML o CSS que sea demasiado inteligente o personalizado.
Introducción: HTML sólido
Antes de escribir CSS, siempre empiezo con HTML sólido como una roca.
El nivel superior <div> tendrá una clase de .schedule y sirve como padre de la cuadrícula. Cada hora de inicio única tiene su propio título seguido de todas las sesiones que comienzan en ese momento. El marcado para cada sesión no es muy importante, pero asegúrese de que no sea necesario ver el diseño para comprender cuándo y dónde ocurre una sesión. (Verás por qué en un momento).
<h2>Conference Schedule</h2>
<div class="schedule">
<h3 class="time-slot">8:00am</h3>
<div class="session session-1 track-1">
<h4 class="session-title"><a href="https://css-tricks.com/building-a-conference-schedule-with-css-grid/#">Session Title</a></h4>
<span class="session-time">8:00am - 9:00am</span>
<span class="session-track">Track 1</span>
<span class="session-presenter">Presenter Name</span>
</div>
<!-- Sessions 2, 3, 4 -->
<h3 class="time-slot">9:00am</h3>
<div class="session session-5 track-1">
<h4 class="session-title"><a href="https://css-tricks.com/building-a-conference-schedule-with-css-grid/#">Session Title</a></h4>
<span class="session-time">9:00am - 10:00am</span>
<span class="session-track">Track 1</span>
<span class="session-presenter">Presenter Name</span>
</div>
<!-- Sessions 6, 7, 8 -->
<!-- etc... -->
</div> <!-- end .schedule -->¡Diseño móvil y respaldo de cuadrícula completo!
Añadiendo un poco de CSS para hacer las cosas bonitas, nuestro diseño móvil y respaldo para navegadores que no son compatibles con CSS Grid ya están completos.
Así es como se ve el mío con los colores que usé:
Las personas que utilizan teléfonos, hacen zoom en sus navegadores o incluso utilizan Internet Explorer no tendrán problemas para encontrar sus sesiones favoritas en esta conferencia.
Agregar el diseño de la cuadrícula
¡Ahora para la parte real de CSS Grid!
Mi momento ah-ha cuando construí esto vino de leer el artículo de Robin aquí sobre CSS-Tricks, “Cómo hacer un gráfico de barras con CSS Grid”. TL; DR: Una fila de la cuadrícula representa el 1% de la altura del gráfico, por lo que una barra abarca el mismo número de filas que el porcentaje que representa.
.chart {
display: grid;
grid-template-rows: repeat(100, 1fr); /* 1 row = 1%! */
}
.fifty-percent-bar {
grid-row: 51 / 101; /* 101 - 51 = 50 => 50% */
}Eso me ayudó a darme cuenta de que la cuadrícula es perfecta para cualquier diseño vinculado a alguna unidad incremental regular. En el caso de un horario, esa unidad es hora! Para esta demostración, usaremos incrementos de 30 minutos, pero haremos lo que tenga sentido para usted. (Solo tenga cuidado con el error de Chrome que limita los diseños de cuadrícula a 1000 filas).
La primera versión que probé usó una sintaxis similar a la del gráfico de barras de Robin y algunas matemáticas básicas para ubicar las sesiones. Estamos usando ocho filas porque hay ocho incrementos de 30 minutos entre las 8 am y las 12 pm Recuerde que los números de línea de la cuadrícula implícita comienzan en uno (no cero), por lo que las filas de la cuadrícula se numeran del uno al nueve.
Una versión rudimentaria de un programa de una sola columna con líneas de cuadrícula numeradas. (Ver demostración: líneas de cuadrícula numeradas frente a líneas de cuadrícula con nombre)
.schedule {
display: grid;
grid-template-rows: repeat(8, 1fr);
}
.session-1 {
grid-row: 1 / 3; /* 8am - 9am, 3 - 1 = 2 30-minute increment */
}
.session-2 {
grid-row: 3 / 6; /* 9am - 10:30am, 6-3 = 3 30-minute increments */
}El problema con esta técnica es que colocar elementos en una cuadrícula con muchas filas es muy abstracto y confuso. (Este problema también agregó mucha complejidad a la demostración del gráfico de barras de Robin).
¡Aquí es donde las líneas de cuadrícula con nombre vienen al rescate! En lugar de depender de los números de línea de la cuadrícula, podemos darle a cada línea un nombre predecible basado en la hora correspondiente del día.
Al usar líneas de cuadrícula con nombre para la programación, es mucho más fácil colocar una sesión. (Ver demostración: líneas de cuadrícula numeradas frente a líneas de cuadrícula con nombre)
.schedule {
display: grid;
grid-template-rows:
[time-0800] 1fr
[time-0830] 1fr
[time-0900] 1fr
[time-0930] 1fr;
/* etc...
Note: Use 24-hour time for line names */
}
.session-1 {
grid-row: time-0800 / time-0900;
}
.session-2 {
grid-row: time-0900 / time-1030;
}Eso es gloriosamente fácil de entender. No hay matemáticas complicadas para calcular cuántas filas hay antes y después de que comience o finalice una sesión. Aún mejor, podemos generar nombres de líneas de cuadrícula y estilos de diseño de sesiones con información almacenada en WordPress. Lanza una hora de inicio y finalización en la cuadrícula, ¡y listo!
Dado que el programa tiene varias pistas, necesitaremos una columna para cada una. Las pistas funcionan de manera similar a los tiempos, utilizando líneas de pista con nombre para cada línea de columna de la cuadrícula. También hay una primera columna adicional para los encabezados de la hora de inicio.
.schedule { /* continued */
grid-template-columns:
[times] 4em
[track-1-start] 1fr
[track-1-end track-2-start] 1fr
[track-2-end track-3-start] 1fr
[track-3-end track-4-start] 1fr
[track-4-end];
}Aquí, sin embargo, llevamos las líneas de cuadrícula con nombre un paso más allá. Cada línea recibe dos nombres: uno para la pista que comienza y otro para la pista que termina. Esto no es estrictamente necesario, pero hace que el código sea mucho más claro, especialmente cuando una sesión abarca más de una columna.
Con las líneas de cuadrícula basadas en el tiempo y la pista definidas, ahora podemos colocar cualquier sesión que queramos solo sabiendo que es la hora y la pista.
.session-8 {
grid-row: time-1030 / time-1100;
grid-column: track-2-start / track-3-end; /* spanning two tracks! */
}Poniendo todo eso junto, obtenemos un código extenso pero extremadamente legible con el que es un verdadero placer trabajar.
@media screen and (min-width: 700px) {
.schedule {
display: grid;
grid-gap: 1em;
grid-template-rows:
[tracks] auto /* Foreshadowing! */
[time-0800] 1fr
[time-0830] 1fr
[time-0900] 1fr
[time-0930] 1fr
[time-1000] 1fr
[time-1030] 1fr
[time-1100] 1fr
[time-1130] 1fr
[time-1200] 1fr;
grid-template-columns:
[times] 4em
[track-1-start] 1fr
[track-1-end track-2-start] 1fr
[track-2-end track-3-start] 1fr
[track-3-end track-4-start] 1fr
[track-4-end];
}
.time-slot {
grid-column: times;
}
}<div class="session session-1 track-1" style="grid-column: track-1; grid-row: time-0800 / time-0900;">
<!-- details -->
</div>
<div class="session session-2 track-2" style="grid-column: track-2; grid-row: time-0800 / time-0900">
<!-- details -->
</div>
<!-- etc... -->El código final utiliza estilos en línea para la ubicación de la sesión, lo que me parece correcto. Si no le gusta esto y está trabajando con navegadores más modernos, puede pasar los nombres de las líneas a CSS a través de variables CSS.
Nota rápida: uso de unidades fr versus el valor automático para alturas de fila
Un detalle digno de mención es el uso de la fr unidad para definir alturas de hileras.
Cuando usas 1fr para determinar la altura de las filas, todas las filas tienen la misma altura. Esa altura está determinada por el contenido de la fila más alta del programa. (Tuve que leer las especificaciones del W3C para fr ¡para resolver esto!) Eso produce un hermoso horario donde la altura es proporcional al tiempo, pero también puede conducir a un diseño muy alto.
Utilizando 1fr produce filas de igual altura determinadas por la fila más alta de la cuadrícula. (Ver demostración: alturas de fila de cuadrícula 1fr vs automático)
Por ejemplo, si su cuadrícula de programación tiene incrementos de 15 minutos de 7 am a 6 pm, eso es un total de 48 filas de cuadrícula. En ese caso, probablemente desee utilizar auto para la altura de la fila porque el programa es mucho más compacto y la altura de cada fila de la cuadrícula está determinada por su contenido.
Utilizando auto hace que cada fila tenga la altura de su contenido. (Ver demostración: alturas de fila de cuadrícula 1fr vs automático)
Unas palabras sobre accesibilidad
Existe una preocupación real sobre la accesibilidad de ciertas técnicas de CSS Grid. Específicamente, la capacidad de cambiar el orden de la información visualmente de formas que no coincidan con el orden de la fuente causa problemas a las personas que utilizan la navegación por teclado.
Este diseño utiliza esa capacidad para colocar elementos arbitrariamente en una cuadrícula, por lo que se requiere cierta precaución. Sin embargo, debido a que el encabezado y el orden de las fuentes se alinean con la visualización de las horas de inicio, esto me parece un uso seguro.
Si está inspirado para hacer algo similar, considere cuidadosamente la accesibilidad. Tiene sentido ordenar la información por tiempo en este caso, pero puedo imaginar un caso legítimo para TAB para ir hacia abajo de las columnas en lugar de a través de las filas. (¡Modificar esta demostración para hacer eso no debería ser demasiado difícil!)
Hagas lo que hagas, siempre considera la accesibilidad.
Agregar nombres de pistas adhesivas
Finalmente, es hora de agregar los nombres de las pistas que parecen encabezados de tabla en la parte superior de cada columna. Dado que la pista de una sesión ya es visible, elegí ocultar los “encabezados” de la tecnología de asistencia con aria-hidden="true".
Los nombres de las pistas van en la primera fila de la cuadrícula, convenientemente denominados “pistas”. Siempre que no tenga ningún problema de desbordamiento extraño, position: sticky los mantiene a la vista mientras se desplaza.
<span class="track-slot" aria-hidden="true" style="grid-column: track-1;">Track 1</span>
<span class="track-slot" aria-hidden="true" style="grid-column: track-2;">Track 2</span>
<span class="track-slot" aria-hidden="true" style="grid-column: track-3;">Track 3</span>
<span class="track-slot" aria-hidden="true" style="grid-column: track-4;">Track 4</span>.track-slot {
display: none; /* only visible with Grid layout */
}
@supports( display:grid ) {
@media screen and (min-width:700px) {
.track-slot {
grid-row: tracks;
display: block;
position: sticky;
top: 0;
z-index: 1000;
background-color: rgba(255,255,255,.9);
}
}
}Es un pequeño y elegante toque final a la demostración final. ✨
El resultado
¡Así es como se ven las cosas con todo lo que hemos cubierto juntos!
Ver la pluma
Programa de conferencias con CSS Grid por Mark Root-Wiley (@mrwweb)
en CodePen.
Recién estamos comenzando
Este programa es definitivamente el uso más satisfactorio de CSS Grid que he hecho. Me encanta lo “basado en datos” y semántico que es la denominación de línea, y los requisitos de accesibilidad y CMS encajan perfectamente sin ningún inconveniente.
La única pregunta que me queda es ¿qué otros tipos de cuadrículas “basadas en datos” existen para construir? He visto algunos diseños de calendario geniales y aquí hay un diseño de tablero de Monopoly. ¿Qué tal un campo de fútbol, una línea de tiempo, mesas de restaurante o asientos de teatro? ¿Qué más?