Implementar un diseño flexible atómico con CSS

Introducción

En este proyecto, aprenderás cómo implementar un diseño flexible atómico basado en atributos utilizando CSS. El CSS atómico es un método de construcción de CSS popular que simplifica la escritura de CSS al utilizar estilos basados en atributos.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo implementar un diseño flexible atómico basado en atributos utilizando CSS
• Cómo dar estilo a los elementos flexibles individuales dentro del diseño flexible

🏆 Logros

Después de completar este proyecto, podrás:

• Utilizar CSS basado en atributos para crear un diseño flexible
• Dar estilo a los elementos individuales dentro de un diseño flexible
• Comprender los beneficios de utilizar CSS atómico para un desarrollo de CSS eficiente y mantenible

Configurar la estructura del proyecto

El CSS atómico es un método de construcción de CSS muy popular recientemente, y el CSS atómico basado en atributos (Attributify) simplifica aún más la escritura de CSS.

Por ejemplo, tradicionalmente implementamos flex creando un identificador de clase en el elemento y luego seleccionando el elemento a través del selector en CSS:

<style>
  .box {
    display: flex;
  }
</style>
<div class="box"></div>

Con CSS atómico con atributos, podemos hacer lo mismo de la siguiente manera.

<div flex></div>

Para comenzar, abra el entorno de experimentación y la estructura de directorios es la siguiente:

├── css
│   └── style.css
└── index.html

Donde:

• css/style.css es el archivo de estilo donde se deben agregar el código.
• index.html es la página principal.

Haga clic en "Go Live" en la esquina inferior derecha para abrir el puerto 8080 y previsualizar la página index.html en el navegador, el efecto será el siguiente:

Implementar un diseño flexible atómico basado en atributos

En este paso, aprenderás cómo implementar un diseño flexible atómico basado en atributos utilizando CSS.

1. Abra el archivo css/style.css.
2. Encuentre la sección /* TODO */ en el archivo CSS.
3. Agregue la siguiente regla CSS para implementar el diseño flexible atómico basado en atributos:

[flex="~ col"] {
  display: flex;
  flex-direction: column;
}

Esta regla se aplica al elemento div con el atributo flex="~ col" y aplica los estilos necesarios para crear un diseño flexible vertical.

La propiedad display: flex establece que el elemento utilice el diseño flexible, y la propiedad flex-direction: column establece que la dirección flexible sea vertical.

4. Guarde el archivo style.css.
5. Vuelva a su navegador y actualice la página. Debería ver el siguiente efecto:

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.