Hola, muy buenas. Maquetar, calendarios con CSS.
Antes era bastante complicado, pero hoy te voy a mostrar cómo lo puedes hacer con solo tres líneas de código CSS.
Así que, vamos allá.
Vamos a crear nuestro calendario, vamos a crear aquí nuestro HTML básico, vamos a hacer el de enero de 2021.
Como al final, un mes no deja de ser una lista ordenada de números, lo que vamos a hacer es utilizar la etiqueta All.
Y con esto, lo que vamos a hacer dentro es listar los 31 días del mes de enero de 2021.
Como no quiero poner todas las etiquetas a mano, voy a utilizar emet.
Emet, si no lo conoces, lo que te permite es escribir HTML rápidamente.
En este caso le voy a decir, créame 31 etiquetas li, y el contenido de la etiqueta es el número de esa iteración.
Así que, con esto, ya tengo los 31 días.
Hasta aquí ya tendríamos el calendario, con todos los días, del 1 al 31, aunque vemos que hay cosas que tenemos que arreglar aquí.
Para empezar, vamos a añadir aquí los estilos.
Voy a poner la etiqueta para cargar los estilos.
Lo primero que podríamos hacer es, justamente, eliminar este número 1, 2, 3, porque es innecesario.
Así que, le vamos a decir que esto no nos lo muestre.
Perfecto.
Y aquí, entra la magia.
Lo que vamos a decirle es que esta lista ordenada va a ser Display Grid.
Así que, vamos a crear una grid para nuestro calendario.
Ahora, no hay ningún tipo de diferencia, pero le vamos a indicar el número de columnas que queremos utilizar.
Vamos a decir que la plantilla de columnas es, utilizando el método Repeat, porque es algo que queremos que se repita,
son 7 días la semana, y cada una de esas columnas va a utilizar una fracción del espacio.
Así que, ahora sí, ya empieza a parecerse un poco más a un calendario.
Ahora, todavía, podríamos hacer algo más.
Y es que, enero del 2021, en realidad, no empieza en lunes.
Esto estaría mal.
Tiene que empezar en viernes.
Así que, lo que vamos a hacer es hacer que este 1 empiece más tarde.
Para eso, tenemos que indicar cuál es el primer día, que, en este caso, sería este.
Vamos a poner First Day.
Y este First Day, vamos a decirle cuándo es que tiene que empezar.
En este caso, le vamos a decir que tiene que empezar en la columna 5, que sería la del viernes.
Ahora sí, lo tendríamos perfectamente.
Todavía podríamos mejorarlo más.
Pero, un momentito, antes de continuar, suscríbete al canal para que no te pierdas más vídeos como este, ¿vale?
Dale, dale.
Y ahora que te he intentado convencer para que te suscribas, ¿cómo lo podemos mejorar?
Vale, básicamente, uno de los problemas que podemos encontrar aquí es que yo no sé cuándo es lunes, es martes y tal.
Así que, vamos a utilizar otra vez Emmet.
Le vamos a decir que nos cree los 7 elementos Lee.
Y aquí, voy a indicar el día de la semana.
Ahora que tengo esto, también los podría estirar.
Voy a poner una clase.
Y vamos a estirar esta clase para que se note mejor la diferencia.
Todavía tenemos que hacer algunas cosas.
Aquí puedes ver un pequeño espacio que no necesitamos y es porque, por defecto, la lista ordenada tiene un padding.
Así que se lo vamos a quitar.
Y ahora vamos a centrarlo todo.
Lo vamos a centrar, pero luego lo arreglaremos.
Porque ahora mismo vamos a hacer que este div que tenemos aquí, lo vamos a centrar.
Y le vamos a poner un ancho máximo.
Ahora que tenemos esto, podemos ver que los números quedan centrados.
En realidad, los calendarios, lo que son justamente los números, normalmente van hacia la derecha.
Pero los días, sí que vamos a querer que todavía, que son el nombre del día, quede centrado y quede ahí.
Ahora con esto, ya tendríamos nuestro calendario totalmente maquetado, utilizado y perfecto para utilizar.