Patrón de Diseño Responsive: Column Drop en CSS
Contenido del curso
John Cardenas
Adrian Ferney Rivera Mantilla
Francisco Javier Riveros Esquivel
Iván Arcos
Joel Dominguez Merino
Juan Daniel Diaz Jaramillo
Carlos Eduardo Gomez García
Eduardo Peña Ramos
Jhoan Sebastián Lopera Gallego
Jose Nuñez
Freivys Antonio Paredes Briceño
Sergio Andrés Bolaños Penagos
Edwin Alberto Equihua Ochoa
Yair Lira
Benjamin Allen Ramirez Horna
Mauricio Galvez
Jeyson David Vargas Crespo
Mauricio Galvez
Patricio Manuel Ugarte
Sergio Andrés Bolaños Penagos
Jesus Velasco
Erick Fernando Guzmán Valerio
Jimmy Buriticá Londoño
Diego Rojas
Eduardo Reyes
Victor Andres Castillo Zambrano
Daniel Capa
Eduardo Morales
Rafael Padron
Kevin Salazar
José Manuel Silva
Cristhyan Pacheco
Nestor Rios Garcia
Joel Dominguez Merino
Tomás André Peñaloza Avilés
Joel Dominguez Merino
José Gersain Osorio Morales
Emilio Castro
emanuel
Xhunik Miguel
Andrea Ysabel Urdaneta Durango
Daniel David Mármol Rivero
Marcelo Vinicio Chavarría Ugalde
Juan Sebastián Agudelo
Jhean Pacheco
Joel Dominguez Merino
Jhean Pacheco
¡Hey! :D, . Recuerda repasar toda la gran información que hemos recibido en este curso. Te dejo un resumen del curso completo en este enlace que te ayudará a estudiar para el examen y a no olvidar los conceptos.
Muchas gracias por tu aporte, lo revise y esta muy completo, de verdad me va a servir mucho.
Gracias por el aporte
Súper útil el uso de Flex, justo ahora que estoy actualizando mi portafolio me funcionará perfecto
Mucho éxito en ese portafolio! :)
Esta muy bien! sigue avanzando, sin embargo, cuando es para celulares te recomiendo que navegación lo pongas arribas.
A mi en lo personal me gusta más Mostly Fluid, me gusta que todo fluya, pero a veces me gusta aventarme a cosas más locas como Layout Shifter, y cuando ando con muchas ganas de front end hasta meto animaciones jaja Esto es genial porque ya con todo esto eres capaz de crear una página web decente, incluso puedes empezar a crear landing pages y venderlas!
Coincido, Mostly Fluid es más natural. Y con los conocimientos hasta aquí ya se pueden hacer muchas cosas que se vean muy bien.
Misma opinion
Un breve resumen de los patrones de diseño para complementar (Texto tomado desde ):
Mostly Fluid
El patrón Mostly fluid consiste, principalmente, en una cuadrícula fluida. Por lo general, en las pantallas grandes o medianas se mantiene el mismo tamaño y simplemente se ajustan los márgenes en las más anchas.
Column Drop
En el caso de los diseños con varias columnas de ancho completo, durante el proceso de colocación de columnas éstas únicamente se colocan de forma vertical debido a que el ancho de la ventana es demasiado reducido para el contenido.
Layout shifter
El patrón Layout shifter es el más adaptable, ya que posee varios puntos de interrupción en diferentes anchos de pantalla.
La clave para este diseño es el desplazamiento del contenido, en lugar de su reprocesamiento y colocación debajo de otras columnas. Debido a las diferencias significativas entre cada punto de interrupción principal, es más complejo de mantener, y es posible que se deban realizar cambios dentro de los elementos, no solo en el diseño de contenido general.
Gracias por el aporte
Wooow está tremendo tu aporte! muchas gracias
vine siendo un niño, pero me iré siendo un programador.....
Lo serás con JavaScript
con o sin javascript, no lo desanimes.
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="./tablet.css" media="screen and (min-width: 600px)"> <link rel="stylesheet" href="./laptop.css" media="screen and (min-width: 800px)"> <title>Document</title> </head> <body> <main class="container"> <div class="c c1"></div> <div class="c c2"></div> <div class="c c3"></div> <div class="c c4"></div> </main> </body> </html>
style.css
* { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 62.5%; } .container { display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1300px; height: 100vh; padding: 3rem; margin: 0 auto; } .c { width: 100%; /* min-width: 1500px; */ height: calc(24vh - 3rem); margin-bottom: 3rem; border-radius: 10px; } .c1 { background-color: #c72929; } .c2 { background-color: #df6060; } .c3 { background-color: #e4b342; } .c4 { background-color: #a0db32; margin: 0; }
tablet.css
.c { height: calc(30vh - 1rem); } .c1, .c2 { height: calc(20vh - 1rem); } .c1 { width: 24%; } .c2 { width: 74%; } .c3 { height: calc(25vh - 1rem); } .c4 { height: calc(44vh - 1rem); }
latop.css
.c { height: calc(20vh - 1rem); margin-bottom: 1rem; } .c1 { width: 19%; } .c2 { width: 29%; } .c3 { width: 49%; } .c4 { height: calc(74vh - 1rem); margin-bottom: 0; }
Hola, como funciona o que significa el calc(74vh - 1rem)???
Muchas gracias por tu ayuda
Lo que hace es un calculo matemático, el alto que tendrá será de el valor que tenga 74vh - 1rem. Esto lo hice para que ocupe solo el 100% del alto de la pantalla y no mas. El - 1rem esta ahí para anular los márgenes. De no estar la suma del alto de los elementos ocuparían el 100% del alto pero sin tomar en cuenta los márgenes por lo que en realidad seria mas del 100%.
Comparto una herramienta que me ayudó mucho con el desafío de la clase anterior. Mientras preparaba todo el responsive lo fui probando en Chrome y, una vez que terminé y todo quedó como yo quería se me ocurrió probarlo en Firefox. Para mi sorpresa no andaba para nada igual, todos los estilos se veían mal y el responsive estaba bastante roto.
++Solución++: Encontré este sitio web, en el cual puedes pegar tu CSS y te lo devuelve con todos los prefijos de los atributos necesarios para que los estilos de tu web se adapten bien a las características particulares de cada navegador. Pasé por ahí mis tres hojas de estilo y al volverlo a probar en Firefox andaba perfecto, igual que en Chrome.
Espero que les sirva :)
Wooow muchas gracias! lo voy a usar
Ya no es tan buena idea usar un autoprefixer ya que la mayoría de las propiedades css ya son soportadas en todos los navegadores solo estamos creciendo el peso del css sin ninguna necesidad lo mejor es hacerlo a mano solo con las propiedades más nuevas :D
Sigo sin entender la diferencia de las 3:( ¿Alguien me puede explicar con manzanas y palitos?
Me preguntaba lo mismo, no entiendo bien la diferencia entre cada patrón de diseño.
most fluid es hacer que tu pagina vaya creciendo desde mobile hasta pc, haciendo que mantenga el layout original.
shifter también empiezas desde el diseño móvil pero según va creciendo, el layout puede cambiar de una manera drástica
column drop todos tus contenedores van a ir subiendo a la primera fila según el orden que les des.
Encontré este post en Google Developers que muestra otras funciones. Espero que les sirva. https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?hl=es
gracias
gracias por el aporte.
aqui les pongo mi aporte, creo voy mejorando.
Asi quedo mi desafio pero tengo algunos problemas alineando los links del header y centrando el contenedor de las cards, he intentado de todo pero no he podido
Mobile
Tablet
Desktop
Está super nice, si quieres rotas en link del repo o comparte el código.
Te quedó muy bien!
En este caso NO ES NECESARIO definir la propiedad order... Hola muchachos, ahora me explico: La propiedad order la usaremos cuando queramos reposicionar los elementos alterando el orden establecido en el que fueron escritos en el html. El valor por defecto de order es 0, es por eso que cuendo definimos order: 1 este elemento pasa al final de todos los demas, el resto se muestra segun fueron escritos en el html. Esta propiedad tambien puede tomar valores negativos. Un tip seria usar valores de 10 en 10 para poder repocisionar elementos que no hayamos tenido en cuenta entre los ya posicionados. Entiendiendo esto, espero se puedan ahorrar unas cuantas lineas de css.
Gracias
Bueno aqui puedes ver Online mi implementación de Column Drop Tambien aqui te dejo el Repositorio para no llenar esta clase con codigo. Saludos :)
Buen aporte! como haces para generar el link para ver online y ejecutar lo que está repositorio en Github?
Gracias @Tommby GitHub tiene la herramienta de GitHub Pages con la que puedes desplegar tu proyecto en la web. Checa el apartado dentro del proyecto :)
código 👈
Móvil
Tableta
Escritorio
Column Drop es un patrón que nos acompaña desde la época donde RD se hacía Desktop First allá por la década pasada. Como su nombre lo indica, cuando un layout en desktop tiene múltiples columnas, a medida que el viewport se reduce "dejamos caer" cada columna debajo de la anterior, es decir, las apilamos.
Link a la web de Google Developers con más info sobre este y otros patrones de Responsive Web Design.
gracias por el aporte!
Column Drop es a mi parecer uno de los patrones o estrategias de diseño que mejor se adapta mas ordenado.
Bastante sencilla la aplicación, pero todo se complica cuando lo practicamos. Pero de eso se trata, de ir avanzando y nunca parar de aprender.
Existe algún estándar especifico para dar tamaño de fuente en el mobile, tablet y desktop. Para que a la hora de renderizar se pueda leer bien el texto, es decir que no quede ni muy pequeño ni muy grande.
Hola! 👋
Como lo dijo rl profe en las clases, las fuentes se deben de usar con las medidas relativas para su optima renderización es por eso que al inicio de un archivo CSS solemos poner
html { font-size: 62.5 %; }
De esta manera ahora podremos usar la medida relativa rem. Donde 1 rem es equivalente a 10px.
Por otro lado el tema de los tamaños de fuente, eso ya es mas personal, ya que depende del contenido. Pero claro hay algunas reglas por ejemplo que un titulo, algo importante o algo donde quieras que usuario centre su atención debería de estar en un tamaño mas grande o de otro color por ejemplo.
Estos concejos ya hacen parte del diseño como tal. Por lo cual te recomiendo el curso de Diseño para progrmadores en el cual te darán lo básico de diseño para que tu como programador tengas las nociones básicas y puedas maquetar.
✌😄🖤
La más fácil de implementar pero según veo en proyectos reales es la menos usada :/
A que se debe el uso de cada uno?
Es el diseño que se implemente a un sitio web desde mobile hasta desktop y de acuerdo a este diseño se aplica una de estas metodologías de responsive design.
