Crea tu planeador semanal con CSS Grid, Flexbox y Glassmorphism

Glassmorphism es una tendencia de diseño que combina efectos de vidrio con colores muy vivos y elementos translúcidos flotando por la interfaz.

En este tutorial te enseñaré cómo maquetar un planeador semanal con CSS Grid, Flexbox y este estilo visual tan bello.

Los cursos de Platzi que te recomiendo antes o después de completar este tutorial son los siguientes:

• Curso de Frontend Developer
• Curso de CSS Grid Layout
• Curso de Diseño Web con CSS Grid y Flexbox

Paso 0: planeación

Siempre que empiezo un proyecto me encanta planear muy bien cada paso, así tengo una visión más clara de lo que quiero lograr y sé más o menos cuánto tiempo me va a llevar hacerlo.

En este caso, realizaremos los siguientes 5 pasos:

1. Creación de un wireframe
2. Selección de la paleta de colores, fuentes e íconos
3. Identificación de elementos padres e hijos
4. Elaboración del efecto Glassmorphism con CSS
5. Creación de los diferentes elementos con HTML y CSS
6. Reto: responsive design

⚠️ Recomendación
Evita copiar y pegar el código. Trata de transcribir cada detalle y entender muy bien su funcionamiento. Solo de esta forma podrás convertirte en experta o experto maquetando con CSS.​

ʕ•́ᴥ•̀ʔっ ¡Empecemos!
​

Paso 1: diseña el primer wireframe

​
​Lo primero que debes hacer es diseñar el layout de tu planeador.

Un wireframe es un boceto donde definimos de forma muy sencilla y esquemática el contenido y la posición de los diversos bloques de nuestro proyecto. Esto lo hacemos con el fin de tener una idea clara antes de comenzar a escribir código.

Te recomiendo que antes de empezar escribas una lista de requerimientos, problemas y soluciones que buscas resolver con tu planeador. Siéntete libre de expresar toda tu creatividad.

Este es mi wireframe:

• Selectores básicos, combinadores y pseudoclases.
• CSS Grid Layout.
• Flexbox.
• Modelo de caja.
• Positions.
• Contexto de apilamiento.

Los cursos de Platzi que te recomiendo, son:

• Curso de Frontend Developer
• Curso de CSS Grid Layout
• Curso de Diseño Web con CSS Grid y Flexbox
  ​

Paso 2: añade colores, fuentes e iconos

​
Ahora que tienes tu wireframe, puedes usar tus herramientas y plataformas favoritas para añadir los detalles restantes de tu diseño. Yo voy a usar las siguientes:

• Colores degradados con Color Space
• Íconos gratis con Icons8
• Fuentes gratis con Google fonts

Gracias a estas herramientas pude detallar un poco más el diseño de mi planeador personal:

​

Paso 3: identifica los elementos padres e hijos

​
Aún no vamos a maquetar (escribir código HTML y CSS), solo vamos a identificar los elementos y contenedores que necesitará nuestra aplicación para funcionar.

Identificar los elementos padres e hijos de nuestro wireframe nos va a permitir trabajar muchísimo mejor con las diferentes propiedades y valores tanto de CSS Grid como de Flexbox. Lo más recomendado es comenzar desde los elementos más externos hasta los elementos más internos. Podemos hacer algo como lo siguiente:
​

Este ejercicio es extremadamente útil y necesario al desarrollar el frontend de una aplicación web. Puedo asegurarte que le sacarás mucho provecho.

Recordemos que los elementos hijos que también son padres pueden usar propiedades tanto de padre como de hijos, es decir, que pueden alinear (o ubicar) a sus hijos, pero también se pueden alinear (o ubicar) a sí mismos. Caso contrario con los elementos que son solo padres (pueden alinear o ubicar a otros pero no a sí mismos) o que son solo hijos (pueden alinearse o ubicarse a sí mismos únicamente).

En estas dos siguientes guías de Flexbox y de CSS Grid vas a encontrar las propiedades tanto de elementos padre (lado izquierdo) como de elementos hijos (lado derecho) para tener más claridad sobre ese tema. Sin embargo, te recomiendo mucho que hagas los cursos que te mencioné anteriormente.

• A Complete Guide to Grid
• A Complete Guide to Flexbox
  ​

Paso 4: conseguir el efecto Glassmorphism con CSS

​
Glassmorphism es una tendencia de UI que se está volviendo cada vez más popular entre los diseñadores, y se caracteriza por:

• Tener un efecto de vidrio con blur en los objetos que estén en el fondo.
• Varias capas con objetos flotando en el espacio.
• Colores vivos para resaltar la transparencia borrosa.
• Un borde ligero y sutil en los objetos translúcidos.

Fuente y lectura recomendada: Glassmorphism in user interfaces

Algunos de nuestros elementos de HTML van a tener un estilo Glassmorphism. Para esto debemos crear una clase de CSS única y agregarla a cada elemento cada vez que necesitemos este aspecto vidrioso.

Para crear este estilo podemos usar generadores como Glassmorphism CSS Generator. Interactúa con los valores blue y transparency para lograr el efecto que más te guste. Luego de eso, copia y pega el código resultante en una clase de CSS como la siguiente:
​

.glassmorphism-effect {
    background: rgba( 255, 255, 255, 0.10 );
    box-shadow: 08px32px0rgba( 31, 38, 135, 0.37 );
    -webkit-backdrop-filter: blur( 4px );
            backdrop-filter: blur( 4px );
    border-radius: 16px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}

Para profundizar, te recomiendo buscar en internet acerca de cada una de estas propiedades: background, box-shadow, backdrop-filter, border-radius y border. También, sobre los diferentes valores que pueden recibir.
​

Paso 5: crea el esqueleto en HTML

​
¡Ahora sí! ¡Vamos a escribir código!

Teniendo en cuenta la identificación de elementos padres e hijos que hicimos anteriormente, vamos a empezar a crear nuestras estructuras de HTML y posteriormente de CSS.

A mi me gusta mucho trabajar en editores en línea como CodePen, pero tú puedes trabajar en tu editor de preferencia (Visual Studio Code, Atom, Brackets, etc).

Lo que haremos será:

• Estilizar nuestro body y agregar importaciones necesarias.
• Estructurar HTML y CSS del contenedor.
• Estructurar HTML y CSS de la sección del lado izquierdo (Objetivos).
• Estructurar HTML y CSS de la sección del lado derecho (planeador semanal).

☾ Estilizar nuestro body y agregar importaciones necesarias

La fuente que escogí se llama Nunito con un weight de 200 y 600. Así que Google Fonts me provee el siguente código que se agrega en la parte superior del archivo de CSS:

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;600&display=swap');

Y, también se debe agregar font-family: 'Nunito', sans-serif; a los estilos del body o del elemento deseado.

Adicionalmente, en la página que te recomendé para escoger el color degradado, escogí el color que se muestra por defecto:

background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);

Teniendo en cuenta lo anterior, el código CSS inicial quedaría de la siguiente manera:

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;600&display=swap');

body {
    background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
    display: grid;
    font-family: 'Nunito', sans-serif;
    height: 100vh;
    margin: 0;
    place-items: center;
}

Donde:

• display: grid → Hará que nuestro valor interno de visualización tenga características de cuadrícula. En nuestro caso, para centar todo el contenido vertical y horizontalmente.
• height: 100vh → Nos dará un alto relativo al 100% de la pantalla que tenga el usuario en ese momento.
• margin: 0 → Quitará el margin que viene por defecto.
• place-items: center → Centrará el contenedor principal tanto vertical como horizontalmente.

☾ Estructura HTML y CSS del contenedor

Como ya vimos en nuestro wireframe, nuestro contenedor tiene dos hijos: la sección del lado izquierdo donde están los objetivos y la sección del lado derecho donde está el planeador semanal. Esto, se traduciría en HTML de la siguiente manera:

Para el código CSS, debemos hacer 3 cosas:

• Añadir una clase .container para el
  padre con el formato de cuadrícula.
• Añadir la clase .glassmorphism-effect (que ya creamos) al
  padre y a los elementos hijos

  .
• Añadir una clase .padding-box para crear un espacio al interior de cada cajita.

El código CSS para el contenedor sería:

.container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-gap: 20px;
    height: 90%;
    width: 80%;
}

Donde:

• display: grid → Hará que nuestro valor interno de visualización tenga características de cuadrícula. En nuestro caso, queremos crear dos columnas para ambos hijos.
• grid-template-columns: 1fr 3fr; → Nos crea las dos columnas. En este caso, es como si dividieramos el espacio total disponible en 4 partes y para la columna 1 solo obtuviéramos una parte y para la columna 2 obtuvieramos las 3 partes restantes.
• grid-gap: 20px; → Crea un espacio entre las columnas (y filas si tuviéramos) de 20px. Esto es para que no se vean apretaditas.
• height: 90%; y width: 80%; → Nos da los tamaños de alto y ancho respectivamente.

Para la clase .padding-box tendríamos el siguiente código CSS:

.padding-box {
    box-sizing: border-box;
    padding: 24px;
}

Tareita: Investiga qué efecto tiene la propiedad y valor box-sizing: border-box; y por qué es útil incluirla en esta clase donde sólo tenemos una propiedad padding.

☾ Estructura HTML y CSS de la sección del lado izquierdo (Objetivos)

Como ya vimos en nuestro wireframe, esta sección del lado izquierdo tiene 6 hijos: El título y 5 objetivos. Esto, se traduciría en HTML de la siguiente manera:

<section>
    <div>div>
    <div>div>
    <div>div>
    <div>div> 
    <div>div>
    <div>div>
section>

Ahora, empecemos a estilizar elemento por elemento.

→ Contenedor ✨

Código HTML:

class="glassmorphism-effect padding-box">
    
section>

Donde:

• glassmorphism-effect y padding-box → Son clases que ya tenemos definidas, así que bastará sólo con agregarlas al HTML.

→ Título ✨

Código HTML:

<divclass="title">
    <p>Objetivosp>
    <p>Lo que quiero lograrp>
div>

Código CSS:

.titlep:first-child {
    font-size: 28px;
    font-weight: 600;
    margin: 0;
}

.titlep:last-child {
    font-size: 16px;
    margin-bottom: 30px;
}

Donde:

• .title p:first-child → Significa que va a seleccionar únicamente el primer hijo

  que esté dentro de .title y le aplicará las reglas CSS definidas.

• .title p:last-child → Significa que va a seleccionar únicamente el último hijo

  que esté dentro de .title y le aplicará las reglas CSS definidas.

• font-size y font-weight → Darán tamaño de fuente y grosor respectivamente.
• margin: 0 → Quitará el margin por defecto que tiene los elementos

  .

• margin: 30px → Agregará un márgen abajo del texto para dar espacio a los objetivos.

Si te preguntaste: “En vez de .title p:first-child y .title p:first-child puedo colocar clases a los elementos

y ya ?”. La respuesta es: “pos sí”. Aquí lo único que estamos haciendo es practicar pseudoclases, pero, estás en toda la libertad de usar cualquier metodología de CSS para el nombramiento de tus elementos.

→ Objetivos ✨

Código HTML:

class="goals">
    <divclass="glassmorphism-effect">
        <imgsrc="https://img.icons8.com/nolan/64/love-book.png"alt="libro"/>
    div>
    <p>Leer másp>
div>

Código CSS:

.goals {
    align-items: center;
    display: flex;
}

.goalsdiv {
    align-items: center;
    border-radius: 50%;
    display: flex;
    height: 40px;
    justify-content: center;
    margin-right: 10px;
    width: 40px;
}

.goalsimg {
    width: 30px;
}

Donde:

• display: flex → Hará que nuestro valor interno de visualización tenga características flexibles. En nuestro caso, queremos centrar los elementos verticalmente y por eso la propiedad y valor align-items: center.
• .goals div → Significa que van a seleccionar los
  que estén dentro de .goals y les aplicará las reglas CSS definidas. Así mismo con .goals img.
• display: flex, align-items: center y justify-content: center → Hará que nuestros elementos estén centrados vertical y horizontalmente. En este caso lo necesitamos para centrar el ícono.
• border-radius: 50% → Hará que el
  tenga forma de bolita.

☾ Estructura HTML y CSS de la sección del lado derecho (Planeador semanal)

Como ya vimos en nuestro wireframe, esta sección del lado izquierdo tiene 2 hijos: El título y el contenedor de los días de la semana que a su vez tiene 5 hijos que serían las columnas para cada día de la semana de lunes a viernes. Esto, se traduciría en HTML de la siguiente manera:

<section>
    <div>div>
    <div>
        <div>div>
        <div>div> 
        <div>div>
        <div>div>
        <div>div>
    div> 
section>

Ahora, empecemos a estilizar elemento por elemento.

→ Contenedor ✨

Código HTML:

<sectionclass="main-content glassmorphism-effect padding-box">
    <div>div>
    <div>
        <div>div>
        <div>div> 
        <div>div>
        <div>div>
        <div>div>
    div> 
section>

Donde:

• glassmorphism-effect y padding-box → Son clases que ya tenemos definidas, así que bastará sólo con agregarlas al HTML.

Código CSS:

.main-content > div:nth-child(2) {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(5, 1fr);
}

Donde:

• .main-content > div:nth-child(2) → Significa que va a seleccionar únicamente el segundo
  que sea hijo directo de .main-content (Es decir, el contendor que genera la cuadrícula de los días de la semana) y le aplicará las reglas CSS definidas.
• display: grid → Hará que nuestro valor interno de visualización tenga características de cuadrícula. En nuestro caso, queremos crear dos columnas para ambos hijos.
• grid-gap: 20px → Crea un espacio entre las columnas (y filas si tuviéramos) de 20px. Esto es para que no se vean apretaditas.
• grid-template-columns: repeat(5, 1fr) → Nos va a crear 5 columnas del mismo tamaño.

→ Título ✨

Código HTML:

<divclass="title">
    <p>Objetivosp>
    <p>Lo que quiero lograrp>
div>

El código CSS es el mismo que usamos para la sección del lado izquierdo, así que no es necesario volverlo a escribir en nuestro CSS. lo podemos reusar al tener las mismas clases de CSS.

→ Días de la semana ✨

Código HTML:

<div>
    <p>Lunesp>
    <div>div>
div>

Este código HTML sería el mismo para cada uno de los días de la semana, así:

<div>
    <div>
        <p>Lunesp>
        <div>div>
    div>
    <div>
        <p>Martesp>
        <div>div>
    div>
    <div>
        <p>Miércolesp>
        <div>div>
    div>
    <div>
        <p>Juevesp>
        <div>div>
    div>
    <div>
        <p>Viernesp>
        <div>div>
    div>
<div>

→ Cards ✨

Código HTML:

<div>
    <div>
        <p>Ejerciciop>
    div>
    <div>
        <p>7:00amp>
        <p>Cardiop>
    div>
div>

Añadiéndole las clases de CSS para aplicarle los estilos, nos quedaría así:

<divclass="card">
    <divclass="glassmorphism-effect">
        <p>Ejerciciop>
    div>
    <divclass="glassmorphism-effect">
        <p>7:00amp>
        <p>Cardiop>
    div>
div>

Código CSS:

.card {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    height: 100px;
    position: relative;
    width: 100%;
}

.card > div:first-child {
    align-items: center;
    border-radius: 16px;
    display: flex;
    grid-column: 1 / 5;
    grid-row: 1 / 2;
    z-index: 1;
}

.card > div:first-childp {
    color: white;
    margin: 0;
    padding-right: 7px;
    transform: rotate(180deg);
    writing-mode: vertical-rl;
}

.card > div:last-child {
    border-radius: 16px;
    display: grid;
    grid-column: 2 / 5;
    grid-row: 1 / 2;
    justify-content: center;
    z-index: 2;
}

.card > div:last-childp:first-child {
    font-size: 24px;
    font-weight: 600; 
    margin: 18px0 -8px0;
}

.card > div:last-childp:last-child {
    margin: 0;
}

.margin-bottom-card {
  margin-bottom: 20px;
}

Donde:

• grid-template-rows: 1fr → Nos va a crear 1 única fila de todo el tamaño disponible.
• grid-column: 1 / 5 y grid-row: 1 / 2 → Van a ubicar la parte izquierda de la card en las 4 columnas (recuerda que se cuentan las líneas, es decir, de la línea 1 a la 5) y en la única fila.
• z-index: 1 → Colocará el lado izquierdo de la card debajo del lado derecho.
• z-index: 2 → Colocará el lado derecho de la card encima del lado izquierdo.
• transform: rotate(180deg) y writing-mode: vertical-rl → Harán rotar el texto del lado izquierdo de la card.

Tareita: Revisar muy cuidadosamente cada propiedad y valor, como también, las pseudoclases. Te puedes apoyar de las explicaciones dadas en el transcurso de la guía.

☾ Detalles adicionales: Burbujas

Código HTML de la estructura general de las 4 burbujas + el contenedor del planeador que ya tenemos hecho:

<divclass="bubble bubble-one glassmorphism-effect">div>
<divclass="bubble bubble-two glassmorphism-effect">div>
<divclass="bubble bubble-three glassmorphism-effect">div>
<divclass="bubble bubble-four glassmorphism-effect">div>
<divclass="container glassmorphism-effect padding-box">div>

Nota: Las burbujas deben ser hermanos del contenedor principal debido a un concepto fundamental llamado “contexto de apilamiento”. Te dejo este documento donde puedes revisar más a detalle este tema, sin embargo, también lo explicamos en la clase de “Posicionamiento + Dinámica: ¿Cómo se vería?” del “Curso de Diseño Web con CSS Grid y Flexbox”).

Código CSS:

.bubble {
    border-radius: 50%;
    position: absolute;
}

.bubble-one {
    height: 80px;
    left: 300px;
    top: 10px;
    width: 80px;
}

.bubble-two {
    height: 230px;
    right: 200px;
    top: -50px;
    width: 230px;
}

.bubble-three {
    height: 50px;
    right: 450px;
    top: -20px;
    width: 50px;
}

.bubble-four {
    bottom: 40px;
    height: 100px;
    left: -30px;
    width: 100px;
}

Donde:

• position: absolute → Nos permitirá mover nuestras burbujas en todo el elemento relativo más cercano (que en este caso es todo el viewport) usando las propiedades top, right, bottom y left.
  ​

Paso 6 (reto): maqueta tu planeador con responsive design

¡Este último paso es tu reto final!

Debes volver a realizar todos los pasos anteriores para diseñar y maquetar tu planeador personal, pero esta vez asegurándote de que es responsive (que funciona bien en dispositivos móviles).

• Mi solución en versión solo desktop
• Mi solución con responsive design

¡No olvides dejar tu solución en los comentarios! También recuerda contarnos cuál fue tu paso favorito de este reto. Y te espero en el próximo reto de desarrollo web.

#NuncaParesDeAprender