Agregando una barra lateral de navegación

Clase 14 de 21 • Curso de Foundation 2018

Resumen

Vamos a agregar un elemento fundamental en nuestro sitio: una barra lateral de navegación.

Aprende a diseñarla y customizarla usando Foundation.

Mon Avellaneda

student•

Hice un partial de images , pero según como me queda un espacio entre el carrousel y las imágenes. Luego voy a ver al inspector qué puede estar pasando y me desaparece. ¿Puede tener que ver con el distinto tamaño de las imágenes?

<main id="main">
  <div class="grid-container">
    <div class="grid-y grid-margin-y">
      <div class="cell">
        {{> orbit}}
      </div>
      <div class="cell">
        {{> images}}
      </div>
    </div>
  </div>
</main>```

<div class="grid-x grid-margin-x">
  <div class="cell small-6">
    <img src="assets/img/capital-girona1.jpg" alt="capital-girona1">
  </div>
  <div class="cell small-6">
    <img src="assets/img/capital-girona2.jpg" alt="capital-girona2">
  </div>
</div>

Enrique Alexis Lopez Araujo

student•

Hola @mon_avellaneda pudiste resolverlo???

Harold David Avila Sabogal

student•

<<div class="cell small-12 medium-4 large-3">
      <figure class="figure">
        <img class="image" src="assets/img/Rutas-CiudadBici.png" alt="Rutas-CiudadBici">
      </figure>
    </div>>

Intenta aumentado el figure

Juan Carlos Gámez Lucero

student•

también se puede colocar:

<section class="margin-vertical-1">

y sustituir lo de margin top y bottom, para horizontal es lo mismo:

<section class="margin-horizontal-1">

Fabricio Galindo Copado

student•

No se porque a mi no me tomo las clases text-uppercas y font-bold, y lo resolví aplicando estilos en el archivo default.html :

<style type="text/css">
    	div.text-uppercase{
    		text-transform: uppercase;
    	}
    	li.bold {
		  font-weight: bold;
		}
    </style>

Jose Angel Mejia Legorreta

company_admin•

Hola, Habilitaste las herramientas de prototipado? Se realiza si quitas en comentario de la linea @include foundation-prototype-classes; del archivo app.scss que esta dentro de la carpeta assets/scss/app.scss Saludos

Gonzalo Pimentel

student•

Perfecto! Me gusta como se trabaja con Foundation, eso de separar tus archivos en partials es un placer visual.

Andrés David Solarte Vidal

student•

Boostrap trabaja igual. Pero para eso estamos, para aprender mas!

Naldo Duran

student•

Alberto Castro Flores

student•

q interesante es foundation

<main id="main">
  <div class="grid-container">
    <div class="grid-y grid-margin-y">
      <div class="cell">
        {{> orbit}}
      </div>
      <div class="cell">
        {{> images}}
      </div>
    </div>
  </div>
</main>```

<div class="grid-x grid-margin-x">
  <div class="cell small-6">
    <img src="assets/img/capital-girona1.jpg" alt="capital-girona1">
  </div>
  <div class="cell small-6">
    <img src="assets/img/capital-girona2.jpg" alt="capital-girona2">
  </div>
</div>

Agregando una barra lateral de navegación

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