La forma de trabajar de la profesora usando Figma para tener una idea de como irán colocados los elementos me parece una de las formas más eficientes de hacerlo. Se use Figma o no lo importante es tener claro como vamos a construir nuestro layout para evitar problemas luego y tener que re-estructurar todo el código por una mala implementación inicial.
Conociendo Tailwind CSS
Bienvenida al desarrollo con Tailwind
Tailwind 3.0: ¿qué hay de nuevo?
¿Cómo funciona Tailwind? Y otros frameworks de CSS
Mobile First y Utility First
Instalación y directivas
Creación del proyecto e instalación de Tailwind
Directivas de Tailwind
Utilidades
Nueva paleta de colores extendida
Medidas y Breakpoints
Flexbox
Maquetación del proyecto
Plugins
Forms, Typography y Aspect ratio
Personalización
Tailwind como API para la creación de un Design System
Proyecto: Platzi Travel
Construyendo el cuerpo del proyecto
Creando la sección de Home
Diseñando nuestras cards
Extracción de componentes a clases para nuestra card
Creando la sección de Recomendados
Agregando animaciones al proyecto
Creando la sección de Rentas destacadas
Sección de FAQS
Footer
TabBar funcional
Haciendo responsivo nuestro proyecto
Haciendo responsivo nuestro proyecto: rentas destacadas
Creando la navbar
Agregando el Dark Mode
Optimización de nuestro proyecto
Purge CSS
Cómo hacer la migración de tu proyecto a Tailwind 3.0
Conclusiones
Conclusiones y siguientes pasos
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Maquetación del proyecto
10/29Recursos
¿Cómo utilizar Flexbox y Grid en Tailwind para un proyecto de maquetación?
Entender cómo aplicar correctamente Flexbox y Grid en Tailwind es esencial para lograr un diseño web responsivo y eficiente. En esta guía, veremos cómo identificar los elementos y estructuras que usaremos en nuestro proyecto, tomando como ejemplo un archivo de Figma. El principal objetivo es decidir entre Flexbox y Grid e identificar de manera clara la dirección de nuestros elementos.
¿Qué es lo primero que debemos definir en nuestro proyecto?
La elección inicial pasa por definir nuestra paleta de colores. Contamos con cinco colores principales, y aunque aún no personalizaremos esta paleta dentro de nuestro archivo de configuración, es clave tener claro estos tonos desde el principio. La correcta identificación y aplicación de los colores ayudará a cohesionar el diseño visual del proyecto.
¿Cómo identificar el uso y dirección de Flexbox?
En nuestro proyecto, usaremos Flexbox para establecer una disposición eficiente de los elementos:
-
Flex direction row:
- En ciertas secciones del proyecto, los elementos están dispuestos en una fila uno tras otro, lo cual muestra un
flex-direction: row. Este tipo de disposición es idóneo para elementos que necesitan una alineación horizontal con espaciado, como botones o íconos en barras de navegación.
.elemento { display: flex; flex-direction: row; gap: 1rem; /* Espaciado entre elementos */ } - En ciertas secciones del proyecto, los elementos están dispuestos en una fila uno tras otro, lo cual muestra un
-
Flex direction column:
- En otras áreas, los elementos estarán apilados, indicando un
flex-direction: column. Usado para listas, formularios, o cualquier elemento que necesite una alineación vertical, asegurando fluidez y consistencia en la lectura del contenido.
.elemento { display: flex; flex-direction: column; } - En otras áreas, los elementos estarán apilados, indicando un
¿Cómo variará el diseño en diferentes dispositivos?
La adaptabilidad es clave, por lo que también trabajamos con un diseño alternativo para desktop. Para ello, veremos que las cartas, por ejemplo, pueden cambiar de un flex-direction: row a flex-direction: column según el dispositivo.
¿De qué manera usamos un contenedor principal?
Crear un contenedor principal nos ayuda a estructurar el layout:
- El contenedor inicial se comporta como una columna. Adentro, encontramos varios
divs. Cada uno se comporta de una manera específica, alternando entre filas y columnas según el contexto. Por ejemplo, un contenedor exterior gris oscuro podría definir inicialmente unrow, mientras que los elementos internos podrían alternar acolumnasegurando que el diseño cumpla las necesidades visuales requeridas.
¿Cuál es tu elección final de estructura para tu proyecto?
Al final del análisis, decidir entre Flexbox o Grid es crucial. Flexbox se presta para un layout que prioriza una relación directa de filas y columnas con flexibilidad de alineación, mientras Grid puede ofrecer una solución más robusta para estructuras complejas. Al practicar y evaluar los beneficios de ambos, podrás optimizarlos según las demandas de cada proyecto.
La dedicación a aprender y experimentar con Tailwind CSS ofrece un abanico de posibilidades para crear diseños ricos en estética y funcionalidad. No olvides revisar el documento en la sección de recursos para practicar más tarde y a seguir explorando los plugins que podremos integrar en Tailwind CSS en las siguientes clases. ¡Te vemos allí!
Aportes 32
Preguntas 2
Ordenar por:
Yo en lo personal manejaría un contenedor principal con flex-col; dentro habrían 2 div y el contenido dentro del segundo div lo manejaría con grid de esa forma puedo manipular muy fácil esa organización de los 3 elementos con tamaños diferentes.
Estaria faltando la clase de grid, la profesora dice al pincipio “Ahora que ya conoces flexbox y grid” y solo vimos flexbox
En lo personal, a mi me gusta trabajar con flexbox, pero en este caso lo haría con grid
De forma general, se utilizará Flexbox en este proyecto.
Paleta de colores:
#8FA206#61EAC9#FFFFFF#000000#CC2D4A
Con un div padre y 4 divs hijos y utilizando GRID, mi solución es la siguiente:
En movil:
código utilizado:
<div class="flex h-auto min-h-screen w-full justify-center bg-gray-100">
<div class="grid h-auto w-full max-w-5xl grid-cols-1 gap-4 bg-gray-300 p-10 text-right sm:grid-cols-2 sm:p-20">
<div class="h-96 rounded-lg border-2 border-blue-500 bg-gray-400 sm:col-start-1 sm:col-end-3 sm:h-auto">div 1</div>
<div class="h-96 rounded-lg border-2 border-blue-500 bg-gray-400 sm:col-start-1 sm:col-end-2 sm:row-start-2 sm:row-end-4 sm:h-auto">div 2</div>
<div class="h-96 rounded-lg border-2 border-blue-500 bg-gray-400 sm:col-start-2 sm:col-end-3 sm:h-auto">div 3</div>
<div class="h-96 rounded-lg border-2 border-blue-500 bg-gray-400 sm:col-start-2 sm:col-end-3 sm:h-auto">div 4</div>
</div>
</div>
Otro curso que debo tomar. FIGMA se ve genial para hacer nuestros diseños!
Para no tener problemas con ver cambios en la web que vamos realizando. Pueden configurar en el archivo package.json. El siguiente comando
"scripts": {
"dev": "npx tailwindcss -i ./src/css/main.css -o ./public/css/tailwind.css --watch"
},
Posterior en la terminal se coloca el comando npm run dev
Les comparto el canal de Tailwind, por si quieren complementar el curso.
Esta muy creativa la forma de hacer el Trending Stays así con flexbox, pero creo que con grid saldría mas rápido, fácil y sin tanto div y así quedaría mas limpio el código
Yo uso papel y lápices de colores para ir identificando la estructura, pero cambiaré a Figma jaja, excelente clase
Considero que es mejor pensar como si los elementos fueran una grilla
Naranja contenedor
Rojo los elementos
figma es nuestra guia me parece muy bien que en esta clase se vea un poco de figma ya que gracias a esto a la hora de tocar codigo estaremos haciendo las cosas de una forma fluida y no estaremos perdidos.
Pequeño aporte:
Soy yo o se saltó la clase con la explicación de Grid, creo que no la vi.
Yo utilizaría display grid con un solo contenedor padre, y ubico los hijos según el diseño. No se como se hace con tailwind o si siquiera se pueda hacer. Supongo que en las siguientes clases lo voy a averiguar.
Uso adobe XD
Para el diseño de este layout, utilizaría flex a través de divs anidados.
Yo creo que es más conveniente usar grid para esa sección específica, y así nos enredamos menos al posicionar los elementos
[Curso Básico De Figma](https://platzi.com/cursos/figma-basico/)
[Curso de Figma Avanzado](https://platzi.com/cursos/figma-tecnicas-avanzadas/)
Muy útiles en la planificación de proyectos, ya en mi lista de cursos pendientes ✅
Les quiero compartir mi proyecto como quedo !
Link
<https://maikoldev.github.io/platzi-travel/>
Repo Publico
<https://github.com/maikoldev/platzi-travel>
<https://play.tailwindcss.com/sDVHFRzUXR?size=490x976>
Creo que grid es mas elegante en este caso. Incluso en la documentacion presentan este ejemplo.
<https://tailwindcss.com/docs/grid-row>
`
`
`
`
01
`
` 02
`
` 03
`
`
Tanto grid como flex son muy útiles. Se me ocurre que para resolver rápidamente la responsividad, es mejor grid.
Interesante!! la maquetación en Figma. Haré el curso de Figma … Gracias por la indicación!
10. Maquetación del proyecto
<body>
<section class="w-screen h-screen bg-gray-950 grid grid-cols-3 grid-rows-3 gap-4 p-4">
<div class="bg-neutral-950 col-span-3"></div>
<div class="bg-indigo-950 row-start-2 row-end-4"></div>
<div class="bg-red-500 col-start-2 col-end-4"></div>
<div class="bg-violet-950 col-start-2 col-end-4"></div>
</section>
</body>
si alguien desea usar grid para este proyecto: DOC --> https://tailwindcss.com/docs/display
Me parecería más apropiado usar grid en el último contenedor, usando 3 columnas y dos filas
Yo utilizaria grid con flexbox para el layout 😉
Personalmente me gusta más trabajar con flexbox que con css grid, aunque muchos prefieran en este caso trabajar con css grid
Buena clase! El ejemplo está muy claro!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?