Plantillas modulares con PUG: Footer

Clase 37 de 42 • Curso de Preprocesadores CSS

Jose Luis Higuera Caraveo

student•

Para los que compilan Pug desde terminal se debe usar la expresion -o (out) y especificar la carpeta de destino.

pug -w --pretty pagina-principal.pug -o ../html

Miguel Ángel Bolaños Quiñonez

student•

Muchas gracias

María Sierra

student•

extend componentes/plantilla.pug block contenidos

Geovany Gómez

student•

Alguien sabe como le hace para seleccionar varias lineas de código y correrlas hacia la izquierda? tengo que hacerlo a mano una por una pero estoy seguro de que hay algún atajo de teclado.

Diego Pagini

student•

con shift y tab!

Geovany Gómez

student•

muchas gracias!

Alejo Vera

student•

Definitivamente me declaro Team Anti-Pug

Armando García

student•

x2. Tanto para perritos como para preprocesadores jeje

Jorge Cruz Perez

student•

Y la razón es? La verdad se me hizo muy interesante, y aunque tenia algunos detalles los archivos originales, eso lo hizo mas interesante aun, ya que logre corregirlos, a lo que voy es que hay que siempre tener la mente abierta (think outside the box), te dire que al inicio me paso algo similar con TypeScript, pero ahora me agrada sobre manera, saludos :)

Platzi Team

student•

Gran clase, debemos arreglar un problema en la pagina de perfiles o al menos a mi me salio hahaha el profe en esa pagina no reviso el footer justo 😂😂 Genial clase

Andrea Lozano Cataño

student•

Es porque tiene globales.scss , main{ height: 100vh; } (preciso en la última línea de todo el archivo). Cambiamos a height: 100% y listo.

Efraín Hernández García

student•

Recuerden que en pug o usas TAB o espacios, nunca ambos. Pasé mucho tiempo con un error de compilación y fue por eso

Emmanuel García

student•

Hola. ¿Cuál es el shortcut para mover lineas a la izquierda como el maestro en mac VS?. Gracias

Jordy Kevin Tirado Torres

student•

código seleccionado y luego shift + tecla tab

Emmanuel García

student•

@jordykevin, muchas gracias, apenas veo el mensaje, durante todo este tiempo pregunte y busque y no encontré respuesta y tú y a me habías ayudado desde hace 2 meses

Andres Velasquez

student•

Shift + tab para mover un bloque de codigo a la izq en identación.

Jorge Cruz Perez

student•

Viendo el archivo resultados-busqueda que ya contiene un header me entro la duda y lo busque, interesante que se puede emplear mas de uno mientras no sean anidados, aquí el resumen: Según el modelo de contenido de este elemento, se espera que esté dentro del flujo natural del documento y que contenga contenido palpable. No puede contener elementos main, footer u otros header. Una misma sección sólo puede contener un elemento header directamente descendiente, pero puede contener otras secciones con sus header correspondientes. No hay límite máximo ni mínimo de elementos header que puede haber en una misma página.

Juan sebastian cardona lopez

student•

buena noche, un favor . me pueden colaborar diciendome porque si agrego los archivos headers.scss y footer.scss a platzi-games.scss (tal cual como el profe muestra) y al querer visualizarlo en el navegador NO me toma los estilos y prepos me dice que todo esta bien..gracias

Héctor Eduardo López Carballo

student•

Hola!

Podrías compartir lo que te sale en el inspector de elementos de las devtools?

Andrea Lozano Cataño

student•

En la página de perfil se me desguarambiló un poco porque el contenedor morado no llega hasta abajo, la galería se desarma y el footer se sube. 😥 Pero supongo que en la próxima clase encontraré la solución. 👀

Luis Mojica

teacher•

Otra opción es compartir el código y un pantallazo para recibir retroalimentación de la comunidad.

Andrea Lozano Cataño

student•

Ya me percaté del problema. Es que globales.scss, en la última línea, dice: main {height: 100vh;} Solo hay que cambiar a: main {height: 100%;} y listo.

Alejo Vera

student•

Hola, alguien sabe como puedo tener el css original? Me gustaría tener la versión sin estilos y a medida que lo vaya haciendo vaya cambiando.

Erik Elyager

student•

En "Archivos y Enlaces" se tienen todos los archivos de la clase, ¿no está ahí lo que buscas?

Alejo Vera

student•

Nop

Maria Emilia Taborda

student•

Consulta, Como puedo realizar lo mismo sin utilizar Pug? Gracias!

Edwin García

student•

Sí se puede, los navegadores de forma nativa ya cuentan con soporte para módulos. Eso quiere decir que puedes construir tus propios templates y módulos, si te interesa puedes mirar algo de Web Components También hay otras opciones que se usan mucho como React.js que además ofrecen otras características.

Maria Emilia Taborda

student•

Gracias Edwin!!!

Joel Vicente Nieto Gómez

student•

Ahora si veo el poder de usar preprocesadores cuando tienes múltiples paginas.

Jose Gregorio Arango Garcia

student•

Amigos, cuando vayan a incluir las variables $Fuente1 y $Fuente2 presten atención porque el profe en el archivo de globales las escribió con F mayúscula. Perdí un buen rato intentando saber que sucedía.

Irving Juárez

student•

Prepros no te decía cual era el error? A veces nos dice y así ya no perdemos tanto tiempo buscando el error

Reynaldo Francisco Moreno Briceño

student•

Cuando escriban

extend componentes/plantilla.pug
block contenidos

tengan en cuenta que o usan TAB o usan Space Bar, en general pug es muy sensible.

Kerwin Joel Sandoval Sanchez

student•

Para los que tienen error con la identacion les recomiendo cambiar su identacion, el profe usa 3 y yo tenai 4 y por eso me generaba error pero lo cambie y se soluciono.

Facundo Colavini

student•

Tengo problemas de identacion cuando no es asi ya descargue todo y use los archivos de la clase y al hacer la plantilla modular y hacer los extend a los demas archivos pug me da unos cuantos errore de identacion.

Jorge Cruz Perez

student•

Ya lo realice y es llevar a cabo tal cual hace los pasos Wilson, si tienes problemas posteanos cuales son, con la consola o captura de la salida de los errores y lo checamos, saludso :)

Héctor Aguilar Mogollan

student•

Muy buena clase, aunque sigue sin gustarme pug, espero que en el curso de sass no lo utilicen

Gonzalo Pimentel

student•

Increíble lo de Pug! Me encantó!!