Index.html del proyecto

Clase 16 de 32 • Curso de Responsive Design 2015

Felipe Donoso

student•

Hola seguí los pasos pero al mirar las carpetas me creo .build=>css=>main.css

Pero tengo otra carpeta build=>css=>main.css en esta última carpeta coloque el index y lo toma pero si modifico el main.styl sólo se refleja en el css de la carpeta .build

Que debo hacer? eliminar la carpeta .build? si llevo el index para allá no funciona y si hago cambios en el main.styl estos se reflejan en el css perteneciente al .buil.

Espero que no sea muy enredado, saludos

Christopher Guzman Reyes

student•

Segun yo el problema es la identacion, a mi me salio lo mismo cuando lo dejaba a la misma altura

Yeraldin Acevedo Acevedo

student•

Me sale este error, que es ?? que me falta !

C:\Users\GERAL\Documents\Proyecto\node_modules\when\lib\decorators\unhandledRejection.js:80
throw e;
^
ParseError: C:\Users\GERAL\Documents\Proyecto\src\styles\main.styl:4:28
1| $background = orange
2|
3| body
4| background-color $background
---------------------------------^

expected "indent", got "eos"

at Parser.error (C:\Users\GERAL\Documents\Proyecto\node_modules\stylus\lib\p
arser.js:259:11)
at Parser.expect (C:\Users\GERAL\Documents\Proyecto\node_modules\stylus\lib\
parser.js:287:12)
at Parser.block (C:\Users\GERAL\Documents\Proyecto\node_modules\stylus\lib\p
arser.js:845:12)
at Parser.selector (C:\Users\GERAL\Documents\Proyecto\node_modules\stylus\li
b\parser.js:1555:24)
at Parser.ident (C:\Users\GERAL\Documents\Proyecto\node_modules\stylus\lib\p
arser.js:1446:25)
at Parser.stmt (C:\Users\GERAL\Documents\Proyecto\node_modules\stylus\lib\pa
rser.js:778:26)
at Parser.statement (C:\Users\GERAL\Documents\Proyecto\node_modules\stylus\l
ib\parser.js:685:21)
at Parser.parse (C:\Users\GERAL\Documents\Proyecto\node_modules\stylus\lib\p
arser.js:236:25)
at Renderer.render (C:\Users\GERAL\Documents\Proyecto\node_modules\stylus\li
b\renderer.js:80:22)
at dispatch (C:\Users\GERAL\Documents\Proyecto\node_modules\when\node.js:71:
15)

Antonio José Gómez Díaz

student•

Buenas, yo he tenido un error parecido, mira, justamente debajo del codigo que te sale, donde pone expected "indent", got "eos" (en la parte de arriba de tu mensaje) te esta diciendo que esperaba un indentado y que en ves de eso se ha encontrado con el objeto eos que no se que significa pero quiere decir que te falta el espacio. Tienes q ponerlo de este modo:

$background = orange
body
background-color: $background

Erick Orlando Velasco Martínez

student•

Pero está clarísimo, tienes que presionar la tecla Tab delante de background-color para que lo reconozca, Carlos lo dijo bien claro, no hay que poner ni llaves, ni puntos y comas, pero se basa en indentando, o sea, dejando los espacios delante para que funcione.

Álvaro René Sánchez Serrano

student•

Que paquete puedo instalar para que atom me resalte la sintaxis en stylus?.¿Alguien sabe que paquete es tambien para que se vean los iconos de gulp y stylus ?

Álvaro René Sánchez Serrano

student•

ups creo que no los podia instalar por que github murio. :(

Manuel Galindez

student•

En realidad es cosa de cada quien si quieres colocarle un paquete para el auto completado de stylus, pero es bueno que no uses alguno, debido a que te acostumbras a que esos paquetes te generen los nombre de cada propiedad, mientras que si trabajas si algun plugin puedes aprender la escritura correcta de las propiedades, y ten por seguro que nunca olvidaras una propiedad. Saludos.

Margaret Fellerman

student•

Una pregunta, al final es todo en el build? la carpeta de dist entonces que uso tiene, en el video no se dice pero tambien hay que cambiar la tarea del server y poner la dirección del directorio de build

Manuel Galindez

student•

No todo los archivos luego iran a dist, que quiere decir que están listo de producción. Disfrutate el curso.

Eduardo de Mei

student•

Al momento de poner el gulp no me genera el main.css

Manuel Galindez

student•

Verifica que tienes correctamente las rutas.

Jairo Cisneros Servinformacio

student•

tengo una inquietud para que sirve exactamente el 'include css':true ?? que pasa si le doy false o no lo pongo ??

Giselle

student•

Instalé todos los plugins, pero mi proceso no se automatiza, corre hasta el default pero los cambios que realizo al css en stylus nunca aparecen, de hecho ningun cambio en ninguna hoja. ¿Alguna idea del error?

Brayan David Navarro Rolon

student•

mira bien las rutas, el codigo...

Jairo Cisneros Servinformacio

student•

el nib no funciona o si ?? lo e probado y no agrega los demas prefijos

Antonio Illescas

student•

No consigo que me complile a css, este es el error que me devuelve la consola

[13:53:59] Starting 'build:css'...
[13:53:59] Finished 'build:css' after 1.65 ms
Potentially unhandled rejection [12] ParseError: /Users/srcorrecto/Desktop/web-baelo/src/styles/main.styl:2:21
1| body
2| background-color red
--------------------------^

expected "indent", got "eos"

at Parser.error (/Users/srcorrecto/Desktop/web-baelo/node_modules/gulp-stylus/node_modules/stylus/lib/parser.js:257:11)
at Parser.expect (/Users/srcorrecto/Desktop/web-baelo/node_modules/gulp-stylus/node_modules/stylus/lib/parser.js:285:12)
at Parser.block (/Users/srcorrecto/Desktop/web-baelo/node_modules/gulp-stylus/node_modules/stylus/lib/parser.js:838:12)
at Parser.selector (/Users/srcorrecto/Desktop/web-baelo/node_modules/gulp-stylus/node_modules/stylus/lib/parser.js:1546:24)
at Parser.ident (/Users/srcorrecto/Desktop/web-baelo/node_modules/gulp-stylus/node_modules/stylus/lib/parser.js:1439:25)
at Parser.stmt (/Users/srcorrecto/Desktop/web-baelo/node_modules/gulp-stylus/node_modules/stylus/lib/parser.js:776:26)
at Parser.statement (/Users/srcorrecto/Desktop/web-baelo/node_modules/gulp-stylus/node_modules/stylus/lib/parser.js:683:21)
at Parser.parse (/Users/srcorrecto/Desktop/web-baelo/node_modules/gulp-stylus/node_modules/stylus/lib/parser.js:234:25)
at Renderer.render (/Users/srcorrecto/Desktop/web-baelo/node_modules/gulp-stylus/node_modules/stylus/lib/renderer.js:80:22)
at dispatch (/Users/srcorrecto/Desktop/web-baelo/node_modules/gulp-stylus/node_modules/accord/node_modules/when/node.js:71:15)

Antonio Illescas

student•

"Solucionado el problema", algo tan tonto como que le tengo puesto un packge al sublime que me automatiza la sangría. por lo que al guardar y dejar todas las lineas al mismo nivel me daba error, el stylus estaba mas escrito.

Marco Antonio Valdez

student•

¿Quien puede pasar las lineas de codigo del fichero gulpfile.js?
el mio no quiere correr :(

Index.html del proyecto

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?