Grids responsive con Lost

Clase 16 de 21 • Diseño web con PostCSS, el futuro de CSS

Comentarios

Marcos

student•

Muy bueno esos resumenes de codigos que dejas debajo del video, estaria bueno lo implementen en todos los otros cursos de platzi, ayuda mucho a fijar los conceptos.

David Portilla

student•

Hola, al parecer la forma de llamar el paquete NPM cambió:

npm install --save-dev postcss-lost

npm ERR! 404 Registry returned 404 for GET on

Lo solucioné de la siguiente manera:

npm install --save-dev gulp gulp-postcss gulp-sourcemaps autoprefixer lost

Usuario anónimo

user•

Si tienen problemas al instalar ‘postcss-lost’ es porque ahora lo encuentras de forma diferente en NPM. Simplemente como0 ‘lost’.

npm install --save-dev lost```

Marco Elizalde

student•

Lost
Nos permite crear un sistema de Grids como en Bootstrap y Foundation
npm i --save-dev lost

Andres Castillo Castillo Gomez

student•

lost-center ya incluye el clearfix. no hay que utilizar lost-utility: clearfix con esta variable;

Diego Andres Cardenas Caro

student•

Tengo este error al tratar de implementar lost con los media query

Node#moveTo was deprecated. Use Container#append.
Your current PostCSS version is 6.0.1, but lost uses 5.2.17. Perhaps this is the source of the error below.

events.js:160

Sin el media query funciona bien.

.u-Grid{
  background: lightgray;
  lost-center: 800px;
  lost-utility: clearfix;

  &-colum{
    background-color: pink;
    lost-column: 1/5;

    /* Con las siguientes dos lineas se cierra el proceso y lanza el error*/
	@media (--tablet){
         lost-column: 1/1;
    }
  }
}```

Diego Andres Cardenas Caro

student•

Alguna idea de como solucionarlo?

Diego Forero

Team Platzi•

Prueba a actualizar la versión de lost ya que la versión que tienes es compatible con postcss 5.2.17 pero tienes instalada postcss 6.0.1

William Reaño Reyes

student•

increible me enamore de postCss

Fernando Gonzales

student•

Hola…cual creen que seria la mejor mejor opcion para reemplazar jqgrid y highcharts

christiaan guzman

student•

hola ayuda cuando escribo la media querie en la clases &-column el proceso se para y me saca error a que se debe?

Diego Forero

Team Platzi•

Comparte el error para poderte ayudar, así es muy difícil ayudarte.

Jordi Santamaría Portolés

student•

Porque no es aconsejable usar float?

Diego Forero

Team Platzi•

Es mejor usar flexbox, float era la forma anterior de poder maquetar los diseño, pero en algunos tipos de distribución pueden tener comportamiento extraños y no es sencillo hacer cosas responsive usando float, lo mejor es usar flexbox.

Fredy Bustos

student•

tengo este error al tratar de usar

lost-column: 1/3; en el media query.

throw er; // Unhandled 'error' event

TypeError: Cannot read property 'split' of undefine

Alfonso Rognoni

student•

Revisaste el orden del array processors?

Usuario anónimo

user•

Alguien me podria ayudar, con respecto a los @media de el
&-column. Debido a que lo realize tal cual pero no me funciono, incluso coloque mis @custom-media dentro del archivo invie.css de la carpeta src, ya que los tenia en el archivo variables.src. Alguien me podria ayudar este es mi codigo:

@import './variables.css';
@import './iconfonts.css';

@lost flexbox flex;

/* LOS MIXINS */

@define-mixin btn $textColor, $bgColor, bgColorStart, $bgColorEnd{
  border-radius: 12px;
  border: none;
  color: $(textColor);
  padding: 7px 12px;
  cursor: pointer;
  font-size: var(--fontSize);
  text-decoration: none;
  background: $(bgColor);
  background: linear-gradient(to left, $(bgColorStart), $(bgColorEnd));

}

.u-scrollcontainer{
  width: 100%;
  overflow: auto ;
  white-space: nowrap;
  margin-bottom: 20px;
  scroll-snap-points-x: repeat(100%);
  scroll-snap-type: mandatory;

  &-itemcontainer{
    border: 1px solid var(--border-feature);
    border-radius: 12px;
    width: 98%;
    margin: 1%;
    display: inline-block;
    line-height: 18px;
    font-size: 18px;

    &-itemcontent{
      display: flex;

      & > img{
        width: auto;
        height: 200px;
      }
    }
  }
}

.u-grid{
  background: gray;
  lost-center: 800px;
  lost-utility: clearfix;
  margin-bottom: 25px;

  &-column{
    background-color: lightblue;
    lost-column: 1/5;

    @media(--tablet){
      lost-column: 1/3;
    }

    @media(--mobile){
      lost-column: 1/1;
    }
  }
}


.u-wrapper{
  max-width: 800px;
  margin: auto;
  position: relative;
}

.InvieHero{
  background: url('../images/fonpo.png') var(--bgHeader);
  padding: 20px;
  height: 500px;

  @media(--retina){
    background-image: url('../images/background2x.png');
  }

  &-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  &-logo{
    transition: all 0.3s ease-in;
    &:hover{
      filter: blur(4px);
    }
  }

  &-copy{
    &-title{
      font-size: calc(var(--fontSize) * 3);
    }

    &-bot{
      @mixin btn var(--bgBody), var(--botGradient), var(--botGradientStart), var(--botGradientEnd);
    }

  }

}

.InvieFooter{
  background-color: var(--bgFooter);

  &-form{
    &-btn{
      @mixin btn var(--bgBody), var(--botGradient), var(--botGradientStart), var(--botGradientEnd);
    }
  }
}

Usuario anónimo

user•

@import './variables.css';
@import './iconfonts.css';

@lost flexbox flex;

/* LOS MIXINS */

@define-mixin btn $textColor, $bgColor, bgColorStart, $bgColorEnd{
  border-radius: 12px;
  border: none;
  color: $(textColor);
  padding: 7px 12px;
  cursor: pointer;
  font-size: var(--fontSize);
  text-decoration: none;
  background: $(bgColor);
  background: linear-gradient(to left, $(bgColorStart), $(bgColorEnd));

}

.u-scrollcontainer{
  width: 100%;
  overflow: auto ;
  white-space: nowrap;
  margin-bottom: 20px;
  scroll-snap-points-x: repeat(100%);
  scroll-snap-type: mandatory;

  &-itemcontainer{
    border: 1px solid var(--border-feature);
    border-radius: 12px;
    width: 98%;
    margin: 1%;
    display: inline-block;
    line-height: 18px;
    font-size: 18px;

    &-itemcontent{
      display: flex;

      & > img{
        width: auto;
        height: 200px;
      }
    }
  }
}

.u-grid{
  background: gray;
  lost-center: 800px;
  lost-utility: clearfix;
  margin-bottom: 25px;

  &-column{
    background-color: lightblue;
    lost-column: 1/5;

    @media(--tablet){
      lost-column: 1/3;
    }

    @media(--mobile){
      lost-column: 1/1;
    }
  }
}


.u-wrapper{
  max-width: 800px;
  margin: auto;
  position: relative;
}

.InvieHero{
  background: url('../images/fonpo.png') var(--bgHeader);
  padding: 20px;
  height: 500px;

  @media(--retina){
    background-image: url('../images/background2x.png');
  }

  &-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  &-logo{
    transition: all 0.3s ease-in;
    &:hover{
      filter: blur(4px);
    }
  }

  &-copy{
    &-title{
      font-size: calc(var(--fontSize) * 3);
    }

    &-bot{
      @mixin btn var(--bgBody), var(--botGradient), var(--botGradientStart), var(--botGradientEnd);
    }

  }

}

.InvieFooter{
  background-color: var(--bgFooter);

  &-form{
    &-btn{
      @mixin btn var(--bgBody), var(--botGradient), var(--botGradientStart), var(--botGradientEnd);
    }
  }
}

Eduardo López

student•

Al momento de guardar el CSS me da el siguiente error:

events.js:160
      throw er; // Unhandled 'error' event
      ^
TypeError: Cannot read property 'split' of undefined

Mi CSS es el siguiente:

.u-Grid {
	background:grey;
	lost-center: 800px;
	lost-utility: clearfix;

	&-column {
		background-color: blue;
		lost-column: 1/5;

		@media (--tablet) {
			lost-column: 1/3;
		}

		@media (--mobile) {
			lost-column: 1/1;
		}
	}
}

¿Alguien me podría ayudar por favor?

Juan Ramón Rustarazo Garrido

student•

Prueba a reordenar los plugins en al array del gulpfile. En el vídeo añade lost(), encima de cssnested y a mí también me daba error, pero en el código bajo el vídeo está debajo de cssnested y me solucionó el problema.

Jose Navas

student•

primero que todo, excelente curso, muy buena clase.
ahora les comparto un poco mi experiencia en este caso.
al intentar instalar lost recibia el mensaje de actualizacion del paquete graceful-fs,una dependencia de ese paquete no me permitia instalar lost.
no sirvio simplemente intentar actualizar el paquete, habia que revisar que version de graceful-fs estaba funcionando para cada dependencia, con: npm ls graceful-fs
ahi se observa con cual version de graceful-fs esta trabajando gulp
y esa version en especifica es la que debe actualizarse.
usamos npm install (la version de graceful-fs actual) y luego la version que necesitamos.
ya despues pude instalar lost con normalidad.
quizas es algo tonto, pero no tengo tanta experiencia ni conocimientos, asi que, espero que no le suceda a ninguno, peeeero de ocurrir, asi pude resolverlo.
espero les ayude!

Enrique José Valerio Gómez

student•

A mi me funcionó la instalación con npm install --save-dev gulp gulp-postcss gulp-sourcemaps autoprefixer lost
Por favor alguien que me diga si es correcto así

Usuario anónimo

user•

Si tienen problemas al instalar ‘postcss-lost’ es porque ahora lo encuentras de forma diferente en NPM. Simplemente como0 ‘lost’.

npm install --save-dev lost

Emanuel Pontoni

student•

Hacer el layout de una webapp siempre me hizo renegar y perder mucho tiempo para lograr la forma deseada, muchas veces teniéndome que conformar con “lo que sale” en el navegador…
¿Cuál es la verdad de la milanesa?
CSS Flexbox, CSS Grid o Lost? ¿Cuál se recomienda? ¿Que libro definitivo podría revisar?

Gracias

Jorge Hernandez Rozo

student•

No me funciona el @media de mobile

.u-Grid{
  background: gold;
  lost-center:800px;
  lost-utility:clearfix;

  &-column{
    background-color: deepskyblue;
    lost-column:1/5;

    @media(--tablet){
      background-color: deeppink;
      lost-column:1/3;
    }
    @media(--movil){
      background-color: darkcyan;
      lost-column:1/1;
    }
  }
}

y en el .css de la carpeta .dist todo esta funcionando

.u-Grid{
  background: gold;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
      -ms-flex-flow:row wrap;
          flex-flow:row wrap;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}
.u-Grid:before{
  content:'';
  display:table;
}
.u-Grid:after{
  content:'';
  display:table;
  clear:both;
}
.u-Grid-column{
    background-color: deepskyblue;
    -webkit-box-flex:0;
        -ms-flex-positive:0;
            flex-grow:0;
    -ms-flex-negative:0;
        flex-shrink:0;
    -ms-flex-preferred-size:calc(19.98% - 24px);
        flex-basis:calc(19.98% - 24px);
    max-width:calc(19.98% - 24px);
    width:calc(19.98% - 24px);
  }
.u-Grid-column:nth-child(1n){
    margin-right:30px;
    margin-left:0;
  }
.u-Grid-column:last-child{
    margin-right:0;
  }
.u-Grid-column:nth-child(5n){
    margin-right:0;
    margin-left:auto;
  }
@media(max-width:650px){
.u-Grid-column{
      background-color: deeppink;
      -webkit-box-flex:0;
          -ms-flex-positive:0;
              flex-grow:0;
      -ms-flex-negative:0;
          flex-shrink:0;
      -ms-flex-preferred-size:calc(33.3% - 20px);
          flex-basis:calc(33.3% - 20px);
      max-width:calc(33.3% - 20px);
      width:calc(33.3% - 20px)
  }
.u-Grid-column:nth-child(1n){
      margin-right:30px;
      margin-left:0
  }
.u-Grid-column:last-child{
      margin-right:0
  }
.u-Grid-column:nth-child(3n){
      margin-right:0;
      margin-left:auto
  }
    }
@media(max-widht:500px){
.u-Grid-column{
      background-color: darkcyan;
      -webkit-box-flex:0;
          -ms-flex-positive:0;
              flex-grow:0;
      -ms-flex-negative:0;
          flex-shrink:0;
      -ms-flex-preferred-size:99.9%;
          flex-basis:99.9%;
      max-width:99.9%;
      width:99.9%
  }
.u-Grid-column:nth-child(1n){
      margin-right:30px;
      margin-left:0
  }
.u-Grid-column:last-child{
      margin-right:0
  }
.u-Grid-column:nth-child(1n){
      margin-right:0;
      margin-left:auto
  	}
 }

.u-Grid{
  background: lightgray;
  lost-center: 800px;
  lost-utility: clearfix;

  &-colum{
    background-color: pink;
    lost-column: 1/5;

    /* Con las siguientes dos lineas se cierra el proceso y lanza el error*/
	@media (--tablet){
         lost-column: 1/1;
    }
  }
}```

@import './variables.css';
@import './iconfonts.css';

@lost flexbox flex;

/* LOS MIXINS */

@define-mixin btn $textColor, $bgColor, bgColorStart, $bgColorEnd{
  border-radius: 12px;
  border: none;
  color: $(textColor);
  padding: 7px 12px;
  cursor: pointer;
  font-size: var(--fontSize);
  text-decoration: none;
  background: $(bgColor);
  background: linear-gradient(to left, $(bgColorStart), $(bgColorEnd));

}

.u-scrollcontainer{
  width: 100%;
  overflow: auto ;
  white-space: nowrap;
  margin-bottom: 20px;
  scroll-snap-points-x: repeat(100%);
  scroll-snap-type: mandatory;

  &-itemcontainer{
    border: 1px solid var(--border-feature);
    border-radius: 12px;
    width: 98%;
    margin: 1%;
    display: inline-block;
    line-height: 18px;
    font-size: 18px;

    &-itemcontent{
      display: flex;

      & > img{
        width: auto;
        height: 200px;
      }
    }
  }
}

.u-grid{
  background: gray;
  lost-center: 800px;
  lost-utility: clearfix;
  margin-bottom: 25px;

  &-column{
    background-color: lightblue;
    lost-column: 1/5;

    @media(--tablet){
      lost-column: 1/3;
    }

    @media(--mobile){
      lost-column: 1/1;
    }
  }
}


.u-wrapper{
  max-width: 800px;
  margin: auto;
  position: relative;
}

.InvieHero{
  background: url('../images/fonpo.png') var(--bgHeader);
  padding: 20px;
  height: 500px;

  @media(--retina){
    background-image: url('../images/background2x.png');
  }

  &-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  &-logo{
    transition: all 0.3s ease-in;
    &:hover{
      filter: blur(4px);
    }
  }

  &-copy{
    &-title{
      font-size: calc(var(--fontSize) * 3);
    }

    &-bot{
      @mixin btn var(--bgBody), var(--botGradient), var(--botGradientStart), var(--botGradientEnd);
    }

  }

}

.InvieFooter{
  background-color: var(--bgFooter);

  &-form{
    &-btn{
      @mixin btn var(--bgBody), var(--botGradient), var(--botGradientStart), var(--botGradientEnd);
    }
  }
}

@import './variables.css';
@import './iconfonts.css';

@lost flexbox flex;

/* LOS MIXINS */

@define-mixin btn $textColor, $bgColor, bgColorStart, $bgColorEnd{
  border-radius: 12px;
  border: none;
  color: $(textColor);
  padding: 7px 12px;
  cursor: pointer;
  font-size: var(--fontSize);
  text-decoration: none;
  background: $(bgColor);
  background: linear-gradient(to left, $(bgColorStart), $(bgColorEnd));

}

.u-scrollcontainer{
  width: 100%;
  overflow: auto ;
  white-space: nowrap;
  margin-bottom: 20px;
  scroll-snap-points-x: repeat(100%);
  scroll-snap-type: mandatory;

  &-itemcontainer{
    border: 1px solid var(--border-feature);
    border-radius: 12px;
    width: 98%;
    margin: 1%;
    display: inline-block;
    line-height: 18px;
    font-size: 18px;

    &-itemcontent{
      display: flex;

      & > img{
        width: auto;
        height: 200px;
      }
    }
  }
}

.u-grid{
  background: gray;
  lost-center: 800px;
  lost-utility: clearfix;
  margin-bottom: 25px;

  &-column{
    background-color: lightblue;
    lost-column: 1/5;

    @media(--tablet){
      lost-column: 1/3;
    }

    @media(--mobile){
      lost-column: 1/1;
    }
  }
}


.u-wrapper{
  max-width: 800px;
  margin: auto;
  position: relative;
}

.InvieHero{
  background: url('../images/fonpo.png') var(--bgHeader);
  padding: 20px;
  height: 500px;

  @media(--retina){
    background-image: url('../images/background2x.png');
  }

  &-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  &-logo{
    transition: all 0.3s ease-in;
    &:hover{
      filter: blur(4px);
    }
  }

  &-copy{
    &-title{
      font-size: calc(var(--fontSize) * 3);
    }

    &-bot{
      @mixin btn var(--bgBody), var(--botGradient), var(--botGradientStart), var(--botGradientEnd);
    }

  }

}

.InvieFooter{
  background-color: var(--bgFooter);

  &-form{
    &-btn{
      @mixin btn var(--bgBody), var(--botGradient), var(--botGradientStart), var(--botGradientEnd);
    }
  }
}

.u-Grid {
	background:grey;
	lost-center: 800px;
	lost-utility: clearfix;

	&-column {
		background-color: blue;
		lost-column: 1/5;

		@media (--tablet) {
			lost-column: 1/3;
		}

		@media (--mobile) {
			lost-column: 1/1;
		}
	}
}

.u-Grid{
  background: gold;
  lost-center:800px;
  lost-utility:clearfix;

  &-column{
    background-color: deepskyblue;
    lost-column:1/5;

    @media(--tablet){
      background-color: deeppink;
      lost-column:1/3;
    }
    @media(--movil){
      background-color: darkcyan;
      lost-column:1/1;
    }
  }
}

.u-Grid{
  background: gold;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
      -ms-flex-flow:row wrap;
          flex-flow:row wrap;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}
.u-Grid:before{
  content:'';
  display:table;
}
.u-Grid:after{
  content:'';
  display:table;
  clear:both;
}
.u-Grid-column{
    background-color: deepskyblue;
    -webkit-box-flex:0;
        -ms-flex-positive:0;
            flex-grow:0;
    -ms-flex-negative:0;
        flex-shrink:0;
    -ms-flex-preferred-size:calc(19.98% - 24px);
        flex-basis:calc(19.98% - 24px);
    max-width:calc(19.98% - 24px);
    width:calc(19.98% - 24px);
  }
.u-Grid-column:nth-child(1n){
    margin-right:30px;
    margin-left:0;
  }
.u-Grid-column:last-child{
    margin-right:0;
  }
.u-Grid-column:nth-child(5n){
    margin-right:0;
    margin-left:auto;
  }
@media(max-width:650px){
.u-Grid-column{
      background-color: deeppink;
      -webkit-box-flex:0;
          -ms-flex-positive:0;
              flex-grow:0;
      -ms-flex-negative:0;
          flex-shrink:0;
      -ms-flex-preferred-size:calc(33.3% - 20px);
          flex-basis:calc(33.3% - 20px);
      max-width:calc(33.3% - 20px);
      width:calc(33.3% - 20px)
  }
.u-Grid-column:nth-child(1n){
      margin-right:30px;
      margin-left:0
  }
.u-Grid-column:last-child{
      margin-right:0
  }
.u-Grid-column:nth-child(3n){
      margin-right:0;
      margin-left:auto
  }
    }
@media(max-widht:500px){
.u-Grid-column{
      background-color: darkcyan;
      -webkit-box-flex:0;
          -ms-flex-positive:0;
              flex-grow:0;
      -ms-flex-negative:0;
          flex-shrink:0;
      -ms-flex-preferred-size:99.9%;
          flex-basis:99.9%;
      max-width:99.9%;
      width:99.9%
  }
.u-Grid-column:nth-child(1n){
      margin-right:30px;
      margin-left:0
  }
.u-Grid-column:last-child{
      margin-right:0
  }
.u-Grid-column:nth-child(1n){
      margin-right:0;
      margin-left:auto
  	}
 }

Grids responsive con Lost

El futuro de CSS con PostCSS y CSSNext

Bienvenidos al modulo de PostCSS

¿Qué es PostCSS ?

Nomenclatura BEM ( Bloque, Elemento, Modificador )

Configurando nuestras tareas en Gulp: Servidor, Procesamiento de CSS y Watch

Autoprefixer: Cómo añadir vendor prefixes usando CSS standard

Anidando clases de CSS con Nested

Configurando CSSNext en nuestro archivo Gulp

Propiedades personalizadas

Usando Calc

Media queries personalizadas

Manejo de color

Manejo de filtros

Mixins: Cómo reutilizar estilos de CSS

Separando nuestros archivos CSS y uso de @import

Implementando un carousel con CSS Scroll Snap

Grids responsive con Lost

Minificando archivos con CSSWring

Fuentes responsive con rucksack

Unificando media-queries con Mqpacker

Conclusiones de PostCSS

Desafio 1

Desafio 2