Crea la aplicación de una casa inteligente con TailwindCSS (parte 1)

¡Te doy la bienvenida a un nuevo reto de CSS! Esta vez desarrollaremos la aplicación de una casa inteligente con TailwindCSS.

Compártenos el resultado final en los comentarios y/o en Twitter con el hashtag #RetosPlatziCSS. 😉

Antes de comenzar, los cursos de Platzi que te recomiendo para realizar este reto son los siguientes:

• Curso de Frontend Developer
• Curso Práctico de Frontend Developer
• Curso Básico de Tailwind

Recuerda que en la segunda parte de este reto haremos las animaciones de esta casa inteligente: Animaciones con TailwindCSS.

Paso 0: planeación

Para este reto te propongo que realices los siguientes 8 pasos:

1. Revisión del diseño e identificación de elementos
2. Creación del proyecto e instalación de Tailwind
3. Maquetación del layout principal
4. Maquetación del modal: Estructura principal
5. Maquetación del modal: Título y subtítulo
6. Maquetación del modal: Plano y contenedor de cards
7. Maquetación del modal: Cards
8. ¡Compártenos tu resultado en los comentarios!

💡 Recomendación: Evita copiar y pegar el código. Trata de transcribir cada detalle y entender muy bien su funcionamiento (Sin afán, tómate tu tiempo). Solo de esta forma podrás convertirte en un(a) experto(a) en maquetación con CSS.

ʕ•́ᴥ•̀ʔっ ¡Empecemos!

Paso 1: Revisión del diseño e identificación de elementos

Lo primero que debemos hacer (antes de comenzar a escribir código) es tener una comprensión general del diseño y de los elementos. Para lograrlo puedes dividir el diseño en mini estructuras y darles un nombre para que te sirva de guía más adelante.

En nuestro caso, la división del diseño en mini estructuras a nivel general quedaría de la siguiente forma:

💡 Esta división no tiene que ser algo muy elaborado, simplemente es una guía para identificar visualmente los elementos y saber por donde arrancar.

Normalmente comenzamos con la maquetación de los elementos más grandes (como layouts y contenedores) y luego se abordan los elementos más pequeños (como botones, íconos, textos, etc). Además de facilitar muchísimo la maquetación de sitios web, esto también permite que nuestro código sea escalable a futuro.

Lo que te propongo, teniendo en cuenta lo anterior, es comenzar creando la maquetación de afuera hacia adentro, es decir, primero el layout (el componente principal que va a contener el modal), luego el contenedor del modal y luego los elementos dentro del modal. Así organizaremos bien nuestras estructuras de HTML y también se nos facilitará muchísimo trabajar con la versión del diseño en mobile.

Paso 2: Creación del proyecto e instalación de TailwindCSS

La maquetación de nuestra aplicación inteligente la haremos con TailwindCSS, un framework de CSS que nos brinda una gran cantidad de clases de CSS para poder hacer nuestros sitios web de una forma mucho más rápida. Esto quiere decir que no tendemos que escribir código CSS (solo en algunos casos), sino únicamente añadir las clases de CSS que Tailwind ya tiene disponibles a nuestro HTML y listo.

Para comenzar a trabajar con TailwindCSS debemos seguir algunos pasos para su instalación. Para ello, te recomiendo tomar la clase sobre Creación del proyecto e instalación de Tailwind del Curso Básico de Tailwind donde nuestra profe Ana nos enseña paso a paso cómo realizar esta configuración. También pueds seguir los pasos de instalación de la documentación oficial de TailwindCSS.

💡 Si solamente quieres explorar TailwindCSS y saber cómo funciona, te recomiendo utilizar Tailwind Play, una herramienta que te permite usar TailwindCSS de forma online.

Una vez tengas toda la configuración lista, podemos comenzar con la maquetación de nuestra aplicación.

Paso 3: Maquetación del layout principal

Antes de comenzar con la maquetación del layout principal, revisemos cómo sería el resultado final que queremos conseguir tanto en desktop como en mobile:

Para construir este layout hagamos una lista de lo que necesitamos hacer junto con las propiedades y valores que nos permitirían lograr eso que necesitamos:

Una vez conocemos cuáles son las propiedades que nos ayudarán a conseguir el resultado que necesitamos en nuestro layout principal, debemos hacer una analogía entre esas propiedades y valores vs. las clases de CSS que TailwindCSS nos provee.

Por ejemplo, si quiero usar padding: 2rem, lo ideal es que no escribamos esto en CSS (es decir, que no tengamos un archivo de estilos en donde tengamos que poner div { padding: 2rem }) sino que busquemos en la documentación de TailwindCSS, cuál sería la clase equivalente a padding: 2rem para poder añadirla en nuestro HMTL.

Teniendo en cuenta lo anterior, aquí te comparto una tabla en donde tenemos las propiedades y valores al lado izquierdo, y las clases de TailwindCSS correspondientes al lado derecho:

Ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML así:

<div class="grid place-items-center bg-plant bg-center bg-cover box-border min-h-screen w-full p-8 lg:p-0">
    <!-- Aquí va el modal -->
</div>

Para este caso, lo único que nos hace falta es la imagen de fondo de la clase bg-plant. Para ello, debemos modificar la configuración de TailwindCSS (ya que es una imagen que no provee TailwindCSS por defecto) para añadir una clase propia (custom), así:

module.exports = {
  content: ['./public/index.html', './src/**/*.{html,js}'],
  theme: {
      extend: {
        backgroundImage: {
          'plant': "url('https://images.pexels.com/photos/916339/pexels-photo-916339.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')",
        }
      }
  },
  plugins: [],
}

La imagen de la planta la tomé de Pexels.

Y para decirle a nuestro body que no tenga margin y que tenga la fuente Popins podemos añadir CSS así:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap');

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
}

También podemos agregar la clase m-0 en la etiqueta body y añadir la fuente a la configuración de TailwindCSS. 😉

Paso 4: Maquetación del modal: Estructura principal

Revisemos cómo sería el resultado final que queremos conseguir tanto en desktop como en mobile:

Hagamos nuevamente una lista de lo que necesitamos hacer junto con las propiedades y valores que nos permitirían lograr eso que necesitamos:

Teniendo en cuenta lo anterior, aquí te comparto una tabla en donde tenemos las propiedades y valores al lado izquierdo, y las clases de TailwindCSS correspondientes al lado derecho:

Ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML así:

<div class="glassmorphism flex flex-col p-8 lg:p-16 box-border max-w-screen-lg w-full lg:w-8/12">
    <!-- Aquí van los elementos del modal -->
</div>

Nuestro anterior HTML junto con el HTML del layout principal, se vería de la siguiente manera:

<div class="grid place-items-center bg-plant bg-center bg-cover box-border min-h-screen w-full p-8 lg:p-0">
    <div class="glassmorphism flex flex-col p-8 lg:p-16 box-border max-w-screen-lg w-full lg:w-8/12">
        <!-- Aquí van los elementos del modal -->
    </div>
</div>

Como puedes notar, hay una clase de CSS llamada glassmorphism que no corresponde a TailwindCSS, sino que la creamos nosotros para añadir el efecto de vidrio al modal.

Este efecto de vidrio lo podemos conseguir con el generador de efecto glassmorphism en donde puedes cambiar el valor del blur y la transparencia hasta lograr el efecto que más te guste.

En mi caso, usé los valores por defecto del generador, así:

.glassmorphism {
  background: rgba( 255, 255, 255, 0.25 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 4px );
  -webkit-backdrop-filter: blur( 4px );
  border-radius: 10px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
}

En este tutorial puedes aprender un poco más sobre el efecto Glassmorphism con CSS: # Crea tu planeador semanal con CSS Grid, Flexbox y Glassmorphism 💪

Paso 5: Maquetación del modal: Título y subtítulo

Revisemos el resultado final:

Hagamos una lista de lo que necesitamos hacer junto con las propiedades y valores que nos permitirían construir el primer texto:

Teniendo en cuenta lo anterior, aquí te comparto una tabla en donde tenemos las propiedades y valores al lado izquierdo, y las clases de TailwindCSS correspondientes al lado derecho:

Ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML así:

<p class="text-base lg:text-xl mt-0 mb-2 text-center">You are controlling</p>

Para construir el segundo texto, hagamos otra lista de lo que necesitamos hacer junto con las propiedades y valores que nos permitirían lograr eso que necesitamos:

Teniendo en cuenta lo anterior, aquí te comparto una tabla en donde tenemos las propiedades y valores al lado izquierdo, y las clases de TailwindCSS correspondientes al lado derecho:

Ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML así:

<h1 class="text-2xl lg:text-4xl m-0 text-center font-bold">Main Lounge & Dining Room</h1>

Nuestro anterior HTML junto con el HTML de los pasos anteriores se vería de la siguiente forma:

<div class="grid place-items-center bg-plant bg-center bg-cover box-border min-h-screen w-full p-8 lg:p-0">
    <div class="glassmorphism flex flex-col p-8 lg:p-16 box-border max-w-screen-lg w-full lg:w-8/12">
        <p class="text-base lg:text-xl mt-0 mb-2 text-center">You are controlling</p>
        <h1 class="text-2xl lg:text-4xl m-0 text-center font-bold">Main Lounge & Dining Room</h1>
        <!-- Aquí va el plano y el contenedor de las cards -->
    </div>
</div>

Paso 6: Maquetación del modal: Plano y contenedor de cards

Antes de comenzar con la maquetación del plano y el contenedor de las cards, revisemos cómo sería el resultado final que queremos conseguir tanto en desktop como en mobile:

Para construir el contenedor del plano y el contenedor de las cards, hagamos una lista de lo que necesitamos hacer junto con las propiedades y… sí, ya lo sabes 😅… véamos cómo queda:

Teniendo en cuenta lo anterior, aquí te comparto una tabla en donde tenemos las propiedades y valores al lado izquierdo, y las clases de TailwindCSS correspondientes al lado derecho:

Ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML así:

<div class="flex flex-col lg:flex-row lg:gap-5 justify-center items-center w-full mt-8 lg:mt-16 mb-0 lg:my-16">
    <!-- Aquí va el plano y el contenedor de las cards -->
</div>

Veamos ahora la lista para construir el contenedor del plano:

Las propiedades y las clases de TailwindCSS correspondientes:

Y las añadimos a la estructura HTML:

<div class="grid place-items-center w-full lg:w-4/6">
    <img class="w-full'" src="https://i.ibb.co/09fmVRK/plan.png" alt="plan">
</div>

Vamos ahora con el contenedor de las cards:

Clases de TailwindCSS:

HTML:

<div class="controls grid place-items-center w-full lg:w-2/6 mt-8 lg:mt-0">
    <!-- Aquí va el contenedor interno de las cards -->
</div>

¡Muy bien! Ahora el contenedor interno de las cards (sí, otro contenedor, recuerda la revisión e identificación de elementos que hicimos al principio):

Clases de TailwindCSS correspondientes:

Y añadimos las clases al HTML:

<div class="controls grid gap-5 grid-cols-2 md:grid-cols-4 lg:grid-cols-2 grid-rows-2 md:grid-rows-1 lg:grid-rows-2 max-w-full w-full">
    <!-- Aquí van las cards -->
</div>

La imagen del plano la tomé de Habitat Pod.

Y, para añadirle unos estilos adicionales para el responsive especialmente, escribimos el siguiente CSS:

.controls {
  min-height: 300px;
}

.controls img {
  margin: 0.5rem;
}

@media (max-width: 1024px) {
  .controls {
    width: 100%;
    min-height: 100px;
  }
}

@media (max-width: 767px) {
  .controls {
    max-width: 300px;
    min-height: 200px;
  }
}

Todo el HTML de este paso se vería de la siguiente forma:

<div class="flex flex-col lg:flex-row lg:gap-5 justify-center items-center w-full mt-8 lg:mt-16 mb-0 lg:my-16">
    <div class="grid place-items-center w-full lg:w-4/6">
        <img class="w-full'" src="https://i.ibb.co/09fmVRK/plan.png" alt="plan">
    </div>
    <div class="controls grid place-items-center w-full lg:w-2/6 mt-8 lg:mt-0">
        <div class="controls grid gap-5 grid-cols-2 md:grid-cols-4 lg:grid-cols-2 grid-rows-2 md:grid-rows-1 lg:grid-rows-2 max-w-full w-full">
            <!-- Aquí van las cards -->
        </div>
    </div>
</div>

Paso 7: Maquetación del modal: Cards

Antes de comenzar con la maquetación de las cards, revisemos cómo sería el resultado final que queremos conseguir tanto en desktop como en mobile:

Para construir el contenedor principal de las cards, hagamos una lista de lo que necesitamos hacer junto con las propiedades y valores que nos permitirían lograr eso que necesitamos:

Teniendo en cuenta lo anterior, aquí te comparto una tabla en donde tenemos las propiedades y valores al lado izquierdo, y las clases de TailwindCSS correspondientes al lado derecho:

Ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML así:

<div class="glassmorphism relative grid place-items-center py-3 box-border w-full h-full cursor-pointer">
   <!-- Aquí van los elementos de la card -->
</div>

Para añadir el texto a la card, hagamos una lista de lo que necesitamos hacer junto con las propiedades y valores que nos permitirían lograr eso que necesitamos:

Teniendo en cuenta lo anterior, aquí te comparto una tabla en donde tenemos las propiedades y valores al lado izquierdo, y las clases de TailwindCSS correspondientes al lado derecho:

Ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML así:

<p class="m-0 text-sm">Lights</p>

Para añadir el ícono a la card:

Teniendo en cuenta lo anterior, aquí te comparto una tabla en donde tenemos las propiedades y valores al lado izquierdo, y las clases de TailwindCSS correspondientes al lado derecho:

Y ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML:

<img class="w-8 m-2" src="https://img.icons8.com/pastel-glyph/64/000000/light--v1.png"/>

El ícono lo tomé de icons8.

Para añadir el toggle button a la card tenemos una lista enorme de las propiedades que necesitamos. Lo mejor de todo es que en este reto sobre Dark Mode con Animaciones en CSS y JavaScript escribimos todo el paso a paso para que puedas crear este toggle button como todo(a) un(a) experto(a).

Ya que sabemos cuáles son las clases de TailwindCSS que necesitamos, debemos añadirlas a nuestro HTML así:

<input id="lights-toggle-button" type="checkbox" class="absolute w-full h-full opacity-0">
<label for="lights-toggle-button" class="flex items-center bg-gray-400 h-6 w-12 rounded-full">
    <div class="toggle-dot bg-white m-1 h-5 w-5 rounded-full"></div>
</label>

Y el CSS correspondiente sería:

#lights-toggle-button:checked + label {
  background-color: MediumSpringGreen;
}

label .toggle-dot {
  transition: transform 0.3s ease;
}

#lights-toggle-button:checked + label .toggle-dot {
  transform: translateX(1.3rem);
}

Más colores nativos de CSS aquí.

Antes de terminar, añadimos el JavaScript correspondiente que también aprendimos en el reto sobre Dark Mode con Animaciones en CSS y JavaScript:

const lightsToggleButton = document.getElementById('lights-toggle-button')

function addDarkStyle (toggleButton) {
    toggleButton.addEventListener('change', () => {
      document.body.classList.toggle('dark')
    })
}

addDarkStyle(lightsToggleButton)

Finalmente el HTML de toda nuestra card quedaría de la siguiente forma:

<div class="glassmorphism relative grid place-items-center py-3 box-border w-full h-full cursor-pointer">
    <p class="m-0 text-sm">Lights</p>
    <img class="w-8 m-2" src="https://img.icons8.com/pastel-glyph/64/000000/light--v1.png"/>
    <input id="lights-toggle-button" type="checkbox" class="absolute w-full h-full opacity-0">
    <label for="lights-toggle-button" class="flex items-center bg-gray-400 h-6 w-12 rounded-full">
    <div class="toggle-dot bg-white m-1 h-5 w-5 rounded-full"></div>
    </label>
</div>

Paso 8: ¡Compártenos tu resultado en los comentarios!

¡Este paso es mi favorito! Compártenos en los comentarios y/o en Twitter con el hashtag #RetosPlatziCSS el resultado final de la aplicación de una casa inteligente con TailwindCSS. 😄

Aquí te comparto:

• El repositorio con el resultado final.
• El deploy con el resultado final.

No olvides que puedes encontrar la segunda parte de este reto en: Animaciones con TailwindCSS.

Cuéntanos qué otro tipo de retos te gustaría encontrar en esta sección.

#NuncaParesDeAprender