La nueva grilla XY de Foundation

Clase 8 de 21 • Curso de Foundation 2018

Resumen

Una de las mejores funcionalidades de Foundation es su grilla. Descubre en qué impactan las últimas actualizaciones.

Aprende a crear una grilla desde cero, así como a manejarla correctamente para diseños responsive.

Roger Carlos Ariel Alba

student•

grid-x es la fila y los cell son las columnas, por predeterminación ocupan todo el ancho. Son mobile first por lo que a excepción que "pisemos" los estilos especificando cual será el comportamiento en "medium" y/o en "large" se comporta como una celda del ancho total. para establecer el ancho máximo se utiliza grid-container en un div contenedor.

Teofilo Rosales Gama

student•

Un resumen de la grilla:

Harold David Avila Sabogal

student•

gracias

Leonardo Grabow

student•

Que quiere decir el ^ luego de cell en el style dentro de class en el div ?
si elimino ese símbolo el alto no se agranda como en el video.
Minuto 6.59
Quedo a disposición y espero sus comentarios.
Muchas gracias
Leonardo Grabow

Diego Forero

Team Platzi•

Selecciona cada elemento div que tenga class que inicien con cell

Yenny Paola Porras Rueda

student•

todos los div que comiencen con

es decir ^= comience con

Juan Ramirez

student•

La verdad que, a la hora de usar un framework, tener una grilla es una gran ayuda en el desarrollo. Principalmente es lo mejor, a mi criterio, que tienen las framworks

Christian Alvarenga

student•

No entendí muy bien todo el proceso anterior a esta clase es decir, para que fue toda la instalación que se hizo? En el curso de Bootstrap no tuvimos que instalar nada y, al igual que en Foundation, podíamos usar la grilla solamente escribiendo el link del enlace de Foundation en nuestro HTML.

Gonzalo Pimentel

student•

Lo veo un poquito más simple que Bootstrap.... lo cuál me encanta!

Juan Pablo Celiz

student•

me pasa lo contrario jajaja... la grilla es muy simple pero la instalación y el código con los handlebars no me convencen del todo

Karenn Yeraldin Hernández Duarte

student•

Es muy parecido,

row de bootstrap es grid-x en foundation,
col de bootstrap es cell en foundation,
col-6 de bootstrap es cell small-6 en foundation Pero al igual de Juan Pablo Celiz, no me gusto el tema de la instalación así que opté por utilizar los archivos de CSS y JS del CDN directamente

Karina Romero

student•

Aqui el resultado :)

<div class="grid-container"> <div class="grid-x grid-margin-x"> <div class="cell auto">ejercicio 1</div> <div class="cell auto">ejercicio 1</div> <div class="cell auto">ejercicio 1</div> <div class="cell auto">ejercicio 1</div> <div class="cell auto">ejercicio 1</div> <div class="cell auto">ejercicio 1</div> </div> <div class="grid-x grid-margin-x"> <div class="cell auto">ejercicio 1</div> <div class="cell auto">ejercicio 1</div> </div> <div class="grid-x grid-margin-x"> <div class="cell auto">ejercicio 1</div> <div class="cell auto">ejercicio 1</div> <div class="cell auto">ejercicio 1</div> </div> <div class="grid-x grid-margin-x"> <div class="cell auto">ejercicio 1</div> </div> <div class="grid-x grid-margin-x"> <div class="cell auto">ejercicio 1</div> <div class="cell auto">ejercicio 1</div> <div class="cell auto">ejercicio 1</div> <div class="cell auto">ejercicio 1</div> <div class="cell auto">ejercicio 1</div> <div class="cell auto">ejercicio 1</div> <div class="cell auto">ejercicio 1</div> <div class="cell auto">ejercicio 1</div> <div class="cell auto">ejercicio 1</div> <div class="cell auto">ejercicio 1</div> <div class="cell auto">ejercicio 1</div> <div class="cell auto">ejercicio 1</div> </div> <div class="grid-y grid-margin-y"> <div class="cell small-6 large-2">ejercicio 2</div> <div class="cell small-4 large-4">ejercicio 2</div> <div class="cell small-2 large-6">ejercicio 2</div> </div> <div class="grid-x grid-margin-x"> <div class="cell small-12 medium-8 medium-offset-2 large-6 large-offset-6" > ejercicio 3 </div> </div> </div>

Paula Andrea Anaya Ramirez

student•

El CDN no me funciona :( copie el mismo link que en el video pero de igual forma no me funciona.

Kevin Morales

student•

Parece que cambio de dirección, puedes usar este para JS

https://cdn.jsdelivr.net/npm/foundation-sites@6.5.0/dist/js/foundation.min.js

y este para CSS

https://cdn.jsdelivr.net/npm/foundation-sites@6.5.0/dist/css/foundation.min.css

Eduardo Briceño

student•

Hay un error en la validación del archivo, prueba borrando los atributos integrity y crossorigin.

Abraham Caso Torres

student•

¿Porqué no puede aplicar los estilos de foundation en mi código, es la versión o qué es lo que me falta agregar? ojo: Hice las instalación como indico las primeras clases, pero al implementar el ejemplo de esta clase, no aplica los estilos ....help

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot; dir=&quot;ltr&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;grid&lt;/title&gt;
    &lt;!-- Compressed CSS --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/foundation-sites@6.6.2/dist/css/foundation.min.css&quot; integrity=&quot;sha256-Q2fXBbKhtsyhYrSLa7hXCNV+FdhbQhyrjks8Kic0u/U=&quot; crossorigin=&quot;anonymous&quot;&gt;
    &lt;style&gt;
      .grid-x, .grid-y {
        background-color: #74b9ff;
      }
      div[class^=&quot;cell&quot;] {
        background-color: #0984e3;
        border: 1px solid #e84393;
        color: white;
        height: 100px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class=&quot;grid-container&quot;&gt;
      &lt;div class=&quot;grid-x grid-margin-x&quot;&gt;
        &lt;div class=&quot;cell small-6 medium-4&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;cell small-6 medium-8&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Compressed JavaScript --&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/foundation-sites@6.6.2/dist/js/foundation.min.js&quot; integrity=&quot;sha256-tdB5sxJ03S1jbwztV7NCvgqvMlVEvtcoJlgf62X49iM=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;```

Abraham Caso Torres

student•

¿Porqué no puede aplicar los estilos de foundation en mi código, es la versión o qué es lo que me falta agragar? ojo: Hice las instalaciones como indico las primeras clases, pero cuando intenté implementar el código de esta clase, no puedo. ....help

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot; dir=&quot;ltr&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;grid&lt;/title&gt;
    &lt;!-- Compressed CSS --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/foundation-sites@6.6.2/dist/css/foundation.min.css&quot; integrity=&quot;sha256-Q2fXBbKhtsyhYrSLa7hXCNV+FdhbQhyrjks8Kic0u/U=&quot; crossorigin=&quot;anonymous&quot;&gt;
    &lt;style&gt;
      .grid-x, .grid-y {
        background-color: #74b9ff;
      }
      div[class^=&quot;cell&quot;] {
        background-color: #0984e3;
        border: 1px solid #e84393;
        color: white;
        height: 100px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class=&quot;grid-container&quot;&gt;
      &lt;div class=&quot;grid-x grid-margin-x&quot;&gt;
        &lt;div class=&quot;cell small-6 medium-4&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;cell small-6 medium-8&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Compressed JavaScript --&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/foundation-sites@6.6.2/dist/js/foundation.min.js&quot; integrity=&quot;sha256-tdB5sxJ03S1jbwztV7NCvgqvMlVEvtcoJlgf62X49iM=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;```

Carlos Guillermo Coello Valenzuela

student•

Hola, no sé si sigas teniendo el problema pero si no es por los espacios que faltan entre cada atributo de las etiquetas, es tal vez por los integrity, lo que puedes hacer el cambiar los. si eso no lo soluciona, puedes compartir una captura de la consola del navegador para ver qué error está saliendo. Saludos

Reynaldo Francisco Moreno Briceño

student•

La nueva grilla es muy poderosa, muy similar a la grilla de Bootstrap con cambios en la sintax en la manera de especificar filas y columnas. Foundation es un poco mas complejo en cuanto a instalacion pero bootstrap tambien es muy sencillo..

Karen Paola Torres Archbold

student•

dijo grillas de bootstrap en ves de foundation en un instante me perdí jajajaja!

Jorge Cruz Perez

student•

Algo muy interesante, lo aprendi de este video es la notación de Selectores de atributo: me refiero a esto:

[class^="cell"]

, en este enlace esta muy bien explicado, obvio es parte de la documentación, saludos 😃

Naldo Duran

student•

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot; dir=&quot;ltr&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;grid&lt;/title&gt;
    &lt;!-- Compressed CSS --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/foundation-sites@6.6.2/dist/css/foundation.min.css&quot; integrity=&quot;sha256-Q2fXBbKhtsyhYrSLa7hXCNV+FdhbQhyrjks8Kic0u/U=&quot; crossorigin=&quot;anonymous&quot;&gt;
    &lt;style&gt;
      .grid-x, .grid-y {
        background-color: #74b9ff;
      }
      div[class^=&quot;cell&quot;] {
        background-color: #0984e3;
        border: 1px solid #e84393;
        color: white;
        height: 100px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class=&quot;grid-container&quot;&gt;
      &lt;div class=&quot;grid-x grid-margin-x&quot;&gt;
        &lt;div class=&quot;cell small-6 medium-4&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;cell small-6 medium-8&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Compressed JavaScript --&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/foundation-sites@6.6.2/dist/js/foundation.min.js&quot; integrity=&quot;sha256-tdB5sxJ03S1jbwztV7NCvgqvMlVEvtcoJlgf62X49iM=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;```

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot; dir=&quot;ltr&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;grid&lt;/title&gt;
    &lt;!-- Compressed CSS --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/foundation-sites@6.6.2/dist/css/foundation.min.css&quot; integrity=&quot;sha256-Q2fXBbKhtsyhYrSLa7hXCNV+FdhbQhyrjks8Kic0u/U=&quot; crossorigin=&quot;anonymous&quot;&gt;
    &lt;style&gt;
      .grid-x, .grid-y {
        background-color: #74b9ff;
      }
      div[class^=&quot;cell&quot;] {
        background-color: #0984e3;
        border: 1px solid #e84393;
        color: white;
        height: 100px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class=&quot;grid-container&quot;&gt;
      &lt;div class=&quot;grid-x grid-margin-x&quot;&gt;
        &lt;div class=&quot;cell small-6 medium-4&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;cell small-6 medium-8&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Compressed JavaScript --&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/foundation-sites@6.6.2/dist/js/foundation.min.js&quot; integrity=&quot;sha256-tdB5sxJ03S1jbwztV7NCvgqvMlVEvtcoJlgf62X49iM=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;```

La nueva grilla XY de Foundation

Introducción

¿Dónde aprender frontend actualizado?

Introducción a Foundation y al proyecto del curso

Repositorio del curso

¿Que es un framework frontend?

Creando el sitio web

Instalación de Foundation

Configuración de Foundation

Incorporando los iconos de Foundation

La nueva grilla XY de Foundation

Espaciado dentro de las grillas

Creando nuestro header

Creando el menú de navegación

Adaptando el menú de navegación para dispositivos móviles

Agregando un carrusel de imágenes con Orbit

Agregando una barra lateral de navegación

Agregando el listado de productos

Agregando un menú lateral off-canvas

Agregar Smooth Navigation

Llevando nuestro sitio a producción

Complementos- Creando emails para nuestros usuarios

Introducción a Foundation para Emails

Creando un email de recibo de compra

Conclusiones del curso