Mostly Fluid

Clase 9 de 32 • Curso de Responsive Design 2015

Comentarios

Dayan Betancourt

student•

Mostly Fluid: el bloque principal se centra a lo ancho del contenedor principal y el resto se ordena debajo en columnas.

Miguel Mendoza Molina

student•

preferi cambiar el contenido a

 .container {  
    width: 100%;  
  }

y de esa manera obtener todo el ancho de la pantalla

Arturo Jesus Martínez Sáenz

student•

Me parece buena tu idea, sin embargo creo que lo que propuso el profesor se ajusta a casos donde el cliente tiene una pantalla muy grande, por ejemplo de 40", y no queremos que el texto o las imágenes se distorsionen así que le damos un ancho máximo.

Esteban Figueroa

student•

hola soy nuevo en esto y el css que hizo el profe lo iba acortando para ir a la par y me dio los mismos resultados pero quería saber si hacer esto es una mala practica o genera errores de algún tipo si lo hago en un proyecto serio?

body{    margin: 0 auto;}  
.container{    display: flex;    -webkit-flex-flow: row wrap;    -moz-flex-flow: row wrap;    -ms-flex-flow: row wrap;    -o-flex-flow: row wrap;    flex-flow: row wrap;}  
.c1{    background-color: rgb(97, 82, 119);    height: 400px;}.c2{    background-color: rgb(105, 65, 249);}.c3{    background-color: rgb(233, 38, 245);}.c4{    background-color: rgb(73, 85, 102);}.c5{    background-color: rgb(126, 182, 103);}  
section{    width: 100%;    height: 150px;}  
@media (min-width: 500px) {    section{        width: 50%;    }    .c1{        width: 100%;    }}  
@media (min-width: 800px) {    .container{        width: 800px;        margin: 0 auto;    }    section{        width: 33.3%;    }    .c1{        width: 60%;    }    .c2{        width: 40%;        height: 400px;    }}

Esteban Figueroa

student•

en particular las partes en las que el ponía .c2, .c3, .c4, .c5 {} y yo solo ponía section {}

@media (min-width: 500px) {  
    section{  
        width: 50%;  
    }  
    .c1{  
        width: 100%;  
    }  
}  
  
@media (min-width: 800px) {  
    .container{  
        width: 800px;  
        margin: 0 auto;  
    }  
    section{  
        width: 33.3%;  
    }  
    .c1{  
        width: 60%;  
    }  
    .c2{  
        width: 40%;  
        height: 400px;  
    }  
}

Yeraldin Acevedo Acevedo

student•

Esta genial, realmente ahorra mucho trabajo y codigo, ademas que esta muy sencillo de usar

Erick Orlando Velasco Martínez

student•

Buena clase e interesante saber de estos patrones

Sergio Trujillo Ardila

student•

¿Cómo se hace para ajustar automáticamente la altura (así como el width) a medía que el tamaño aumenta?

Javier Sain Osorno Aguirre

student•

Hola no encuentro el codigo de la clase, ¿me podria ayudar porfavor?

body{    margin: 0 auto;}  
.container{    display: flex;    -webkit-flex-flow: row wrap;    -moz-flex-flow: row wrap;    -ms-flex-flow: row wrap;    -o-flex-flow: row wrap;    flex-flow: row wrap;}  
.c1{    background-color: rgb(97, 82, 119);    height: 400px;}.c2{    background-color: rgb(105, 65, 249);}.c3{    background-color: rgb(233, 38, 245);}.c4{    background-color: rgb(73, 85, 102);}.c5{    background-color: rgb(126, 182, 103);}  
section{    width: 100%;    height: 150px;}  
@media (min-width: 500px) {    section{        width: 50%;    }    .c1{        width: 100%;    }}  
@media (min-width: 800px) {    .container{        width: 800px;        margin: 0 auto;    }    section{        width: 33.3%;    }    .c1{        width: 60%;    }    .c2{        width: 40%;        height: 400px;    }}

@media (min-width: 500px) {  
    section{  
        width: 50%;  
    }  
    .c1{  
        width: 100%;  
    }  
}  
  
@media (min-width: 800px) {  
    .container{  
        width: 800px;  
        margin: 0 auto;  
    }  
    section{  
        width: 33.3%;  
    }  
    .c1{  
        width: 60%;  
    }  
    .c2{  
        width: 40%;  
        height: 400px;  
    }  
}

Mostly Fluid

Bienvenidos

Nuevas clases de Responsive Design: ¿Dónde quedo el curso anterior?

¿Dónde encuentro los archivos del curso?

Introducción a responsive design

Preguntas antes de la clase

¿Qué es Responsive Design?

Concepto de Viewport

Patrones de Diseño Responsive: Tiny Tweaks

Progressive Enhancement vs Graceful Degradation

Column Drop

Mostly Fluid

Layout Shifter

Off-Canvas

Preguntas y respuestas después de clase

Diseñando en Mobile First

Preguntas antes de la clase

Entorno de desarrollo

Automatización de tareas con Gulp.js

Index.html del proyecto

Normalize.css

Menu Navbar responsive parte I

Menu Navbar responsive parte II

Videos reponsive

Preguntas y respuesta de la clase

Conceptos avanzados de responsive design

Preguntas antes de clase

Video responsive

Patrones de diseño responsivo

Imagenes responsive

Fuentes de iconos

Usando Browserify para JavaScript

Optimizando para produccion

Preguntas y respuestas en clase

Contenido complementario

Tablas-Responsive

Lazy Loading De Imagenes

¿Cómo hacer Remote Debuggin?