Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 9D : 5H : 18M : 17S

Debes iniciar sesión

Para ver esta clase crea una cuenta sin costo o inicia sesión

Grilla de Foundation

5/45

Lo que debemos hacer primero es descargar Foundation, lo puedes hacer desde su sitio web

Cuando estés descargando por favor asegúrate de seleccionar flex grid porque ésta es la que usa Sasha para el curso.

flex grid.png

Vamos a descargar Foundation for Sites, podemos descargar una versión custom que nos permite personalizar las partes y características que queremos del Framework.

Una parte fundamental del framework es la grilla, que nos permite construir sitios web ordenados.

Las grillas se dividen en filas y columnas, que definimos con clases.

Mira cómo puedes usar la grilla de Foundation correctamente

Recuerda:

  • Podemos crear filas que tengan 12 espacios y en cada columna debes asignar cuánto espacio va a ocupar.

  • Las medidas de dispositivos son small, medium y large

  • El tamaño de las columnas, se aplica al tamaño asignado en adelante, a menos que se defina el tamaño en medidas superiores

Hay que aclarar que Foundation tiene ahora mismo 3 sistemas de grillas:

  • Grilla XY
  • Grilla usando float
  • Grilla usando flex

Aquí el profe usó el sistema de grillas float. En general, flex y float usan los mismo nombres de clases para las grillas, (salvo excepciones), en cambio, en la versión XY usan otras clases que nada que ver con estas, es por eso que a muchos no les agarraba los estilos pues en este sistema en vez de row usan grid-x, y en vez de column usan cell (solo por nombrar algunas).

Otra cosa, para centrar las columnas horizontalmente en el sistema flex (que es el que recomiendan aquí que se descargue) no se usa medium-centered como usa el profe, sino align-center (que se aplica al padre row), y en vez de end se usa align-left (que viene por defecto).

Para ordenar los elementos: en el sistema float se ordena como hace el profe aqui, con [size]-pull-[nro de columas] y [size]-push-[nro de columas], mientras que en el sistema flex (como en XY) se ordena colocando explicitamente el orden en el que se quiere que aparezca con [size]-order-[numero del ordern a ser mostrado], cambiando el ejemplo del profe quedaria asi:
en el sistema float:

<div class="column small-12 medium-6 medium-push-6">Hola</div>
<div class="column small-12 medium-6 medium-pull-6">Mundo</div>

en el sistema flex:

<div class="column small-12 medium-6 medium-order-2">Hola</div>
<div class="column small-12 medium-6 medium-order-1">Mundo</div>

En el sistema flex no cambia el gutter (con la clase collapse y uncollapse) si se hacer re-size a la ventana, en float sí.

Esto lo fui escribiendo mientras iba viendo la clase 😄… si al final usaremos flex mucho mejor!!! 😄

Las grillas: Se utilizan para ordenar todo el contenido de nuestra web en distintos dispositivos, un sistema de grillas nos permite poner columnas y filas con el fin de ordenar todo el contenido, de esta manera podemos ir ordenando el contenido con el fin de que se vea bien en distintos dispositivos.

Entonces el sistema de grillas lo que nos da es una estructura de filas y columnas basica para organizar nuestro sitio web.


Gutter: Basicamente es el padding que tiene cada columna y para matar ese padding solo debemos agregar la clase 'small-collapse' a nuestro div con clase row, y para agregarlo debemos agregar la clase 'small-uncollapse'. El small depende del tamaño que queramos afectar





row Crea una fila
column Crea una columna
small-12 Crea una columna que ocupa 12 espacios para dispositivos pequeños.
medium-4 Crea una columna que ocupa 4 espacios para dispositivos medianos.
medium-offset-1 Crea una columna como espacio en blanco.
end Sitúa una columna inmediatamente después de la anterior.
small-collapse Los elementos dentro de una fila quedarán pegados al borde.
large-uncollapse Los elementos mantendrán un margen dentro de cada fila.
small-centered Colocará una columna centrada en dispositivos pequeños.
large-uncentered No permitirá que las columnas queden centradas en dispositivos grandes.
medium-push-6 Empuja una columna seis posiciones en dispositivos medianos.
medium-pull-6 Jala una columna seis posiciones en dispositivos medianos.

Resumen

Sistema Mobile First (progresive enchancement), las propiedades se heredan desde small a large

Hay tres tipos de grillas: XY, Float, Flex.

  • para las filas
    -row

  • para que la fila se expanda a todo el ancho disponible en pantalla (se aplica a row)

    • expanded
  • para las columnas (se aplica a column)

    • column o columns
  • para el tamaño de las columnas (se aplica a column)

    • small-12 … small-1 (dispositivos pequeños)
    • medium-12 … medium-1 (dispositivos medianos)
    • large-12 … large-1 (dispositivos grandes)
  • para que el ancho de la columna se adecue al contenido de la misma (se aplica a columns)

    • shrink
  • para alinear las columnas horizontalmente, hay que aplicar estas clases al padre (se aplica al row)

    • align-right
    • align-left
    • align-center
    • align-justify
    • align-spaced
  • para alinear las columnas verticalmente, hay que aplicar estas clases al padre (se aplica al row)

    • align-top
    • align-middle
    • align-bottom
    • align-stretch
  • para alinear verticalmente los elementos individualmente (a los hijos de row) (se aplica a columns)

    • align-self-top
    • align-self-bottom
    • align-self-middle
  • para colorcar espacios entre las columnas (espacios vacíos que ocupen un numero de columnas) (se aplica a columns)

    • small-offset-12 … small-offset-1 (dispositivos pequeños)
    • medium-offset-12 … medium-offset-1 (dispositivos medianos)
    • large-offset-12 … large-offset-1 (dispositivos grandes)
  • para agregar o quitar el espaciado entre el contenido de la columna y el borde (padding o gutter) (se aplica a row)
    (collapse -> para quitarlo / uncollapse -> para agregarlo)

    • small-collapse / small-uncollapse
    • medium-collapse / medium-uncollapse
    • large-collapse / large-uncollapse
  • para ordenar las columnas de manera custom (se aplica a column)
    ----FLEX----

    • small-order[n]
    • medium-order[n]
    • large-order[n]
      [n] es el numero de orden a ser mostradas las columnas

    ----FLOAT----

    • small-push-[n]
    • small-pull-[n]
    • medium-push-[n]
    • medium-pull-[n]
    • large-push-[n]
    • large-pull-[n]
      [n] es el numero de columnas a ser empujada/arrastrada

En la nueva versión de foundation, en la parte de descarga custom, deben elegir Float Grid para que les funcione el proyecto según lo que se indica en el video, por default, la página marca XYGrid, y esa no maneja las mismas clases de este video.

El tamaño de las columnas de las columnas es relativo al tamaño de la pantalla, es decir column-12 no me da un valor absoluto de pixeles o centimetros o cualquier otra unidad de medida, column-3 lo que te indica es que en la columna deben caber 3 de las doce disponibles, por lo tanto en todo el renglon cabran cuatro column-3 ... y así.

Estoy agregando elementos column y sin necesidad de agregarle la clase 'end' ya lo coloca pegado a la columna anterior.

 

             

    

Hola estoy haciendo el ejercicio igual a como se muestra el video pero no me aparecen las columnas una a un lado de la otra me aparecen siempre una abajo de la otra sin importar el tamaño de la pantalla y veo en los comentarios que a muchos les pasa lo mismo pero no veo que les solucionen el problema

podrían decirme que es lo que pasa !!

OJO: la grilla que usa sacha es la flex grid, para quienes no les resulta esta parte del curso.

Que es mejor?? Ðescargar el framework o usar un CDN???

Excelente Curso, muy bien explicado.

muy bueno esto de las grillas

Captura de pantalla (191).png

Tengo este problema.
No funciona a lo que hace Sacha.
alguien sabe?

![](Captura de pantalla (194).png

no puedo ingresar al sitio que entra Sacha

No hay caso. No me funcionan las columnas. Un gusto conocerte foundation, me quedo con mi siempre confiable bootstrap.

Mounstrito de Foundation jajajajajajajajaja

practicamente el sistema de grillas de foundation es igual que bootstrap
el maximo son 12 columnas que es col-md-12
y la clase row tambien la usa y para coger todo el tamaño es container-fluid

Buenos días desde Catalunya. El fichero app.css con todos las líneas de código que se han ido poniendo en el curso, lo tenéis completo? Muchas gracias y buen final de año.

Hola, es obligatorio usar los colores que especifica sacha para el proyecto final??

¿Es posible utilizar el archivo de gulp que se creo en el curso de postcss para agilizar el desarrollo del proyecto?

Las grillas se utilizan para ordenar el contenido, agregando filas y columnas. Este sistema nos da una estructura básica para organizar nuestro sitio.

Después de agregar una fila con “row”, debemos agregar siempre solo columnas, no puede ver otro tipo de elemento.

en elementos por mas que pongo row no me parece el espacio que dice sacha solo el hola pegado al borde

Para los que no les funciona igual que en el vídeo, cambien el Grid por “Flex Grid” cuando lo vayan a descargar! Saludos.

Hola, no puedo descargar Foundation. Me aparece el siguiente mensaje: ENOENT: no such file or directory, stat ‘/tmp/tmp.6.4.2.cd465f1511d997e71378be1b9ed6bf38.zip’

¿Alguien sabe lo que sucede?

Hola, he descargado el flex Grid como he visto en comentarios anteriores, sin embargo tengo un problema y es que no puedo centrar mi columna aún poniendo el código como lo hace Sacha.
Alguien sabe a que pueda deberse?
Les dejo mi código, gracias.

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzipalooza</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
   <div class="row small-collapse large-uncollapse">
    <div class="column small-12 medium-4 medium-centered">
      Hola Mundo
    </div>
  </div>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

**

En la explicación debajo del video, remarca que hay que bajar con la opción Flex Grid, sin embargo, el profesor nunca lo indica.
Tambien bajandolo con esa opción la web demo no está centrada y viene alineada a la izquierda.
Podrían verificar ese dato?
Si lo bajo sin seleccionar Flex Grid, me lo baja y se ve como en el video…Por defecto viene Flex Grid?
Espero que pronto me puedan aclarar esta duda, ya que soy nuevo en Platzi y veo comentarios de hace un año y no más recientes…
Muchas gracias
Atentamente
Leonardo Grabow
Buenos Aires - Argentina

Cuando intento centrar, no se parece en nada con lo del video.
Ya en la opción small-3 en dos columnas, no me dejaba ningun espacio entre ellas, sin haber agregado el end.
Luego cuando intento centrar, me sigue tirando la columna a la izquierda, como primer columna, y no la centra.
Puede haber alguna diferencia entre miniversiones (6.0 a la 6.4 por ejemplo?
Es un problema de perdida de tiempo que no se vean iguales ya que uno piensa que hay algo mal hecho y puede ser un problema ajeno…

Quedo a la espera de ayuda por más que sea un problema minimo.
Muchas gracias
Leonardo Grabow
Buenos Aires - Argentina

Acabo de probar y lo del small-3 no me funciona en Safari pero si en Firefox (Chrome no uso porque drena la bateria de mi rMBP).

Tomando en cuenta que se esta usando el sistema de grillas float.

**row (FILAS): **
El elemento se centra con margenes auto de izquierda y derecha y un width máximo de 62.5em. Agregando la clase expanded podemos hacer que el max-width se none y esta abarque todo el width disponible.

column/columns (COLUMNAS):
El elemento por defecto tiene width de 100%, es float hacia la izquierda también posee padding izquierdo y derecho de unos 0.9375rem llamado Gutter. Puede tener un máximo de 12 columnas y estas se pueden agregar usando clases complementarias de la clase columnas como son small-xx medium-xx y large-xx donde las xx indican el tamaño de porción que tendrán dichas columnas y en que dispositivo tendrán esa porción.

  • .large-xx: a partir de un viewport con width de 64em para arriba.
  • .medium-xx: a partir de un viewport con width de 40em para arriba.
  • .small-xx: por defecto el foundation trabaja con movil firts design asi que si se coloca esta clase solamente la tomaría en cualquier tamaño de viewport.

Me sale error ENOENT: no such file or directory al descargar el custom build.

detalles de descarga

realizé la descarga pero, no funciona esta primera parte, la palabra Hola no se posiciona en columnas ni filas

Porque cuando le asigno a la clase row y la abro en el navegador no me los pone uno al lado del otro si no uno abajo de otro?? quien me puede ayudar?

Descargue el archivo de la pagina pero no reconoce los detalles del class"row" ni tampoco de class="column"
y todo esta bien enlazado cual seria el detalle que no reconozca los archivos enlazados de foundation

buenas noches quiero saber si es normal que a mi no me salga el hola con la margen izquierda, me sale ya pegado al borde izquierdo del navegador. Tambien al realizar el mismo procedimiento de sacha con lo de las tres columnas con el “small-4”, me salen las columnas una debajo de la otra sin importar el tamaño de el navegador. es normal o ay un error.

MUCHAS GRACIAS.

Collapse y uncollapse no me funcionan es como si no detectara todas las clases

Cuando escribo la parte de: Hola (primera columna) Mundo (segunda columna) no me aparecen en el mismo renglón, sino que me aparecen el Hola en un renglón y Mundo en un segundo renglón. ¿Alguien sabe como corregirlo?
Gracias.

Hola!
Apenas estoy tomando el curso porque me interesa aprender fundation. Tengo una duda, posiblemente sea de actualización pero la clase .row no le la reconoce, de hecho la plantilla no usa rows para las filas por lo que veo usa estas clases: class="grid-x grid-padding-x cuando hace salto de linea y también no me detecta en expanded, la única forma de dejarme la margen de defaul es usando un div contenedor con la clase grid-container. Esto se debe a una actualización? O estoy haciendo algo mal? Saludos

La clase [size]-centered y [size]-uncentered no funcionan el la versión que tengo(septiembre del 2017), para lograr el mismo resultado use la clase align-center en el div del row, el problema es que siempre se centra, sin importar el tamaño de la pantalla, alguien sabe como cambiar eso según el tamaño de la pantalla?

Hola a todos, tengo un problema con el Collapse y Uncollapse que se le da a Row … No se por que no me aplica el uncollapse y me salen las letras pegadas al borde siempre. en todos los tamaños-- aquí mi código

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HouseMusic</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>

  <div class="row small-collapse large-uncollapse">
    <div class="column small-12 medium-4">
        Hola
     </div>
    <div class="column small-12 medium-4 medium-offset-1 end">
        Mundo
      </div>
    </div>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

:

@GOLLUM23 en mi caso lo unico diferente es que no coloque la carpeta “platzipalooza” en escritorio, de resto todo igual. Este es mi codigo

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzipalooza</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
    <div class="row">
      <div class="column small-12 medium-4">
        Hola
      </div>
      <div class="column small-12 medium-4">
        mundo
      </div>
    </div>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

Hola gente 😃
No estoy seguro de qué ocurre, pero al descargar la última versión del Foundation, no se visualiza correctamente (hablo del contenido en el Index), es decir, todo el contenido se ve alineado a la izquierda.
Pensé que era mi explorador, pero sólo por curiosear, bajé la versión 5 y ésta sí funciona normal.
Al principio pensé que no habría más lío, pero cuando Sasha daba el ejemplo de cómo centrar el elemento columna, a mi no me funcionó; a pesar de agregar “small-centered” en la clase, por ejemplo, ésta siempre permaneció a la izquierda.

No me reconoce los push y pull, es decir, no hace el cambio de Hola Mundo a Mundo Hola, ya busque la documentación pero no encontre nada al respecto.
Alguien sabe como corregirlo?
Aqui mi codigo

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzipalooza</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
   <div class="row small-collapse large-uncollapse">
    <div class="column small-12 medium-6 medium-push-6">
      Hola 
    </div>
     <div class="column small-12 medium-6 medium-pull-6">
      Mundo
    </div>
  </div>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

Hay que aclarar que Foundation tiene ahora mismo 3 sistemas de grillas:

  • Grilla XY
  • Grilla usando float
  • Grilla usando flex

Aquí el profe usó el sistema de grillas float. En general, flex y float usan los mismo nombres de clases para las grillas, (salvo excepciones), en cambio, en la versión XY usan otras clases que nada que ver con estas, es por eso que a muchos no les agarraba los estilos pues en este sistema en vez de row usan grid-x, y en vez de column usan cell (solo por nombrar algunas).

Otra cosa, para centrar las columnas horizontalmente en el sistema flex (que es el que recomiendan aquí que se descargue) no se usa medium-centered como usa el profe, sino align-center (que se aplica al padre row), y en vez de end se usa align-left (que viene por defecto).

Para ordenar los elementos: en el sistema float se ordena como hace el profe aqui, con [size]-pull-[nro de columas] y [size]-push-[nro de columas], mientras que en el sistema flex (como en XY) se ordena colocando explicitamente el orden en el que se quiere que aparezca con [size]-order-[numero del ordern a ser mostrado], cambiando el ejemplo del profe quedaria asi:
en el sistema float:

<div class="column small-12 medium-6 medium-push-6">Hola</div>
<div class="column small-12 medium-6 medium-pull-6">Mundo</div>

en el sistema flex:

<div class="column small-12 medium-6 medium-order-2">Hola</div>
<div class="column small-12 medium-6 medium-order-1">Mundo</div>

En el sistema flex no cambia el gutter (con la clase collapse y uncollapse) si se hacer re-size a la ventana, en float sí.

Esto lo fui escribiendo mientras iba viendo la clase 😄… si al final usaremos flex mucho mejor!!! 😄

Las grillas: Se utilizan para ordenar todo el contenido de nuestra web en distintos dispositivos, un sistema de grillas nos permite poner columnas y filas con el fin de ordenar todo el contenido, de esta manera podemos ir ordenando el contenido con el fin de que se vea bien en distintos dispositivos.

Entonces el sistema de grillas lo que nos da es una estructura de filas y columnas basica para organizar nuestro sitio web.


Gutter: Basicamente es el padding que tiene cada columna y para matar ese padding solo debemos agregar la clase 'small-collapse' a nuestro div con clase row, y para agregarlo debemos agregar la clase 'small-uncollapse'. El small depende del tamaño que queramos afectar





row Crea una fila
column Crea una columna
small-12 Crea una columna que ocupa 12 espacios para dispositivos pequeños.
medium-4 Crea una columna que ocupa 4 espacios para dispositivos medianos.
medium-offset-1 Crea una columna como espacio en blanco.
end Sitúa una columna inmediatamente después de la anterior.
small-collapse Los elementos dentro de una fila quedarán pegados al borde.
large-uncollapse Los elementos mantendrán un margen dentro de cada fila.
small-centered Colocará una columna centrada en dispositivos pequeños.
large-uncentered No permitirá que las columnas queden centradas en dispositivos grandes.
medium-push-6 Empuja una columna seis posiciones en dispositivos medianos.
medium-pull-6 Jala una columna seis posiciones en dispositivos medianos.

Resumen

Sistema Mobile First (progresive enchancement), las propiedades se heredan desde small a large

Hay tres tipos de grillas: XY, Float, Flex.

  • para las filas
    -row

  • para que la fila se expanda a todo el ancho disponible en pantalla (se aplica a row)

    • expanded
  • para las columnas (se aplica a column)

    • column o columns
  • para el tamaño de las columnas (se aplica a column)

    • small-12 … small-1 (dispositivos pequeños)
    • medium-12 … medium-1 (dispositivos medianos)
    • large-12 … large-1 (dispositivos grandes)
  • para que el ancho de la columna se adecue al contenido de la misma (se aplica a columns)

    • shrink
  • para alinear las columnas horizontalmente, hay que aplicar estas clases al padre (se aplica al row)

    • align-right
    • align-left
    • align-center
    • align-justify
    • align-spaced
  • para alinear las columnas verticalmente, hay que aplicar estas clases al padre (se aplica al row)

    • align-top
    • align-middle
    • align-bottom
    • align-stretch
  • para alinear verticalmente los elementos individualmente (a los hijos de row) (se aplica a columns)

    • align-self-top
    • align-self-bottom
    • align-self-middle
  • para colorcar espacios entre las columnas (espacios vacíos que ocupen un numero de columnas) (se aplica a columns)

    • small-offset-12 … small-offset-1 (dispositivos pequeños)
    • medium-offset-12 … medium-offset-1 (dispositivos medianos)
    • large-offset-12 … large-offset-1 (dispositivos grandes)
  • para agregar o quitar el espaciado entre el contenido de la columna y el borde (padding o gutter) (se aplica a row)
    (collapse -> para quitarlo / uncollapse -> para agregarlo)

    • small-collapse / small-uncollapse
    • medium-collapse / medium-uncollapse
    • large-collapse / large-uncollapse
  • para ordenar las columnas de manera custom (se aplica a column)
    ----FLEX----

    • small-order[n]
    • medium-order[n]
    • large-order[n]
      [n] es el numero de orden a ser mostradas las columnas

    ----FLOAT----

    • small-push-[n]
    • small-pull-[n]
    • medium-push-[n]
    • medium-pull-[n]
    • large-push-[n]
    • large-pull-[n]
      [n] es el numero de columnas a ser empujada/arrastrada

En la nueva versión de foundation, en la parte de descarga custom, deben elegir Float Grid para que les funcione el proyecto según lo que se indica en el video, por default, la página marca XYGrid, y esa no maneja las mismas clases de este video.

El tamaño de las columnas de las columnas es relativo al tamaño de la pantalla, es decir column-12 no me da un valor absoluto de pixeles o centimetros o cualquier otra unidad de medida, column-3 lo que te indica es que en la columna deben caber 3 de las doce disponibles, por lo tanto en todo el renglon cabran cuatro column-3 ... y así.

Estoy agregando elementos column y sin necesidad de agregarle la clase 'end' ya lo coloca pegado a la columna anterior.

 

             

    

Hola estoy haciendo el ejercicio igual a como se muestra el video pero no me aparecen las columnas una a un lado de la otra me aparecen siempre una abajo de la otra sin importar el tamaño de la pantalla y veo en los comentarios que a muchos les pasa lo mismo pero no veo que les solucionen el problema

podrían decirme que es lo que pasa !!

OJO: la grilla que usa sacha es la flex grid, para quienes no les resulta esta parte del curso.

Que es mejor?? Ðescargar el framework o usar un CDN???

Excelente Curso, muy bien explicado.

muy bueno esto de las grillas

Captura de pantalla (191).png

Tengo este problema.
No funciona a lo que hace Sacha.
alguien sabe?

![](Captura de pantalla (194).png

no puedo ingresar al sitio que entra Sacha

No hay caso. No me funcionan las columnas. Un gusto conocerte foundation, me quedo con mi siempre confiable bootstrap.

Mounstrito de Foundation jajajajajajajajaja

practicamente el sistema de grillas de foundation es igual que bootstrap
el maximo son 12 columnas que es col-md-12
y la clase row tambien la usa y para coger todo el tamaño es container-fluid

Buenos días desde Catalunya. El fichero app.css con todos las líneas de código que se han ido poniendo en el curso, lo tenéis completo? Muchas gracias y buen final de año.

Hola, es obligatorio usar los colores que especifica sacha para el proyecto final??

¿Es posible utilizar el archivo de gulp que se creo en el curso de postcss para agilizar el desarrollo del proyecto?

Las grillas se utilizan para ordenar el contenido, agregando filas y columnas. Este sistema nos da una estructura básica para organizar nuestro sitio.

Después de agregar una fila con “row”, debemos agregar siempre solo columnas, no puede ver otro tipo de elemento.

en elementos por mas que pongo row no me parece el espacio que dice sacha solo el hola pegado al borde

Para los que no les funciona igual que en el vídeo, cambien el Grid por “Flex Grid” cuando lo vayan a descargar! Saludos.

Hola, no puedo descargar Foundation. Me aparece el siguiente mensaje: ENOENT: no such file or directory, stat ‘/tmp/tmp.6.4.2.cd465f1511d997e71378be1b9ed6bf38.zip’

¿Alguien sabe lo que sucede?

Hola, he descargado el flex Grid como he visto en comentarios anteriores, sin embargo tengo un problema y es que no puedo centrar mi columna aún poniendo el código como lo hace Sacha.
Alguien sabe a que pueda deberse?
Les dejo mi código, gracias.

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzipalooza</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
   <div class="row small-collapse large-uncollapse">
    <div class="column small-12 medium-4 medium-centered">
      Hola Mundo
    </div>
  </div>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

**

En la explicación debajo del video, remarca que hay que bajar con la opción Flex Grid, sin embargo, el profesor nunca lo indica.
Tambien bajandolo con esa opción la web demo no está centrada y viene alineada a la izquierda.
Podrían verificar ese dato?
Si lo bajo sin seleccionar Flex Grid, me lo baja y se ve como en el video…Por defecto viene Flex Grid?
Espero que pronto me puedan aclarar esta duda, ya que soy nuevo en Platzi y veo comentarios de hace un año y no más recientes…
Muchas gracias
Atentamente
Leonardo Grabow
Buenos Aires - Argentina

Cuando intento centrar, no se parece en nada con lo del video.
Ya en la opción small-3 en dos columnas, no me dejaba ningun espacio entre ellas, sin haber agregado el end.
Luego cuando intento centrar, me sigue tirando la columna a la izquierda, como primer columna, y no la centra.
Puede haber alguna diferencia entre miniversiones (6.0 a la 6.4 por ejemplo?
Es un problema de perdida de tiempo que no se vean iguales ya que uno piensa que hay algo mal hecho y puede ser un problema ajeno…

Quedo a la espera de ayuda por más que sea un problema minimo.
Muchas gracias
Leonardo Grabow
Buenos Aires - Argentina

Acabo de probar y lo del small-3 no me funciona en Safari pero si en Firefox (Chrome no uso porque drena la bateria de mi rMBP).

Tomando en cuenta que se esta usando el sistema de grillas float.

**row (FILAS): **
El elemento se centra con margenes auto de izquierda y derecha y un width máximo de 62.5em. Agregando la clase expanded podemos hacer que el max-width se none y esta abarque todo el width disponible.

column/columns (COLUMNAS):
El elemento por defecto tiene width de 100%, es float hacia la izquierda también posee padding izquierdo y derecho de unos 0.9375rem llamado Gutter. Puede tener un máximo de 12 columnas y estas se pueden agregar usando clases complementarias de la clase columnas como son small-xx medium-xx y large-xx donde las xx indican el tamaño de porción que tendrán dichas columnas y en que dispositivo tendrán esa porción.

  • .large-xx: a partir de un viewport con width de 64em para arriba.
  • .medium-xx: a partir de un viewport con width de 40em para arriba.
  • .small-xx: por defecto el foundation trabaja con movil firts design asi que si se coloca esta clase solamente la tomaría en cualquier tamaño de viewport.

Me sale error ENOENT: no such file or directory al descargar el custom build.

detalles de descarga

realizé la descarga pero, no funciona esta primera parte, la palabra Hola no se posiciona en columnas ni filas

Porque cuando le asigno a la clase row y la abro en el navegador no me los pone uno al lado del otro si no uno abajo de otro?? quien me puede ayudar?

Descargue el archivo de la pagina pero no reconoce los detalles del class"row" ni tampoco de class="column"
y todo esta bien enlazado cual seria el detalle que no reconozca los archivos enlazados de foundation

buenas noches quiero saber si es normal que a mi no me salga el hola con la margen izquierda, me sale ya pegado al borde izquierdo del navegador. Tambien al realizar el mismo procedimiento de sacha con lo de las tres columnas con el “small-4”, me salen las columnas una debajo de la otra sin importar el tamaño de el navegador. es normal o ay un error.

MUCHAS GRACIAS.

Collapse y uncollapse no me funcionan es como si no detectara todas las clases

Cuando escribo la parte de: Hola (primera columna) Mundo (segunda columna) no me aparecen en el mismo renglón, sino que me aparecen el Hola en un renglón y Mundo en un segundo renglón. ¿Alguien sabe como corregirlo?
Gracias.

Hola!
Apenas estoy tomando el curso porque me interesa aprender fundation. Tengo una duda, posiblemente sea de actualización pero la clase .row no le la reconoce, de hecho la plantilla no usa rows para las filas por lo que veo usa estas clases: class="grid-x grid-padding-x cuando hace salto de linea y también no me detecta en expanded, la única forma de dejarme la margen de defaul es usando un div contenedor con la clase grid-container. Esto se debe a una actualización? O estoy haciendo algo mal? Saludos

La clase [size]-centered y [size]-uncentered no funcionan el la versión que tengo(septiembre del 2017), para lograr el mismo resultado use la clase align-center en el div del row, el problema es que siempre se centra, sin importar el tamaño de la pantalla, alguien sabe como cambiar eso según el tamaño de la pantalla?

Hola a todos, tengo un problema con el Collapse y Uncollapse que se le da a Row … No se por que no me aplica el uncollapse y me salen las letras pegadas al borde siempre. en todos los tamaños-- aquí mi código

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HouseMusic</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>

  <div class="row small-collapse large-uncollapse">
    <div class="column small-12 medium-4">
        Hola
     </div>
    <div class="column small-12 medium-4 medium-offset-1 end">
        Mundo
      </div>
    </div>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

:

@GOLLUM23 en mi caso lo unico diferente es que no coloque la carpeta “platzipalooza” en escritorio, de resto todo igual. Este es mi codigo

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzipalooza</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
    <div class="row">
      <div class="column small-12 medium-4">
        Hola
      </div>
      <div class="column small-12 medium-4">
        mundo
      </div>
    </div>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

Hola gente 😃
No estoy seguro de qué ocurre, pero al descargar la última versión del Foundation, no se visualiza correctamente (hablo del contenido en el Index), es decir, todo el contenido se ve alineado a la izquierda.
Pensé que era mi explorador, pero sólo por curiosear, bajé la versión 5 y ésta sí funciona normal.
Al principio pensé que no habría más lío, pero cuando Sasha daba el ejemplo de cómo centrar el elemento columna, a mi no me funcionó; a pesar de agregar “small-centered” en la clase, por ejemplo, ésta siempre permaneció a la izquierda.

No me reconoce los push y pull, es decir, no hace el cambio de Hola Mundo a Mundo Hola, ya busque la documentación pero no encontre nada al respecto.
Alguien sabe como corregirlo?
Aqui mi codigo

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzipalooza</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
   <div class="row small-collapse large-uncollapse">
    <div class="column small-12 medium-6 medium-push-6">
      Hola 
    </div>
     <div class="column small-12 medium-6 medium-pull-6">
      Mundo
    </div>
  </div>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>