Zurb Development Stack

Clase 44 de 45 • Curso de Frontend con Bootstrap y Foundation 2016

Resumen

Foundation pone a nuestra disposición una herramienta para automatizar la creación de nuestro sitio, mira como

Documentación: http://foundation.zurb.com/sites/docs/

Paul Santaria

student•

recomiendo llevar postCss antes de utilizar zurb development stack, para aprovechar al maximo esta herramienta de fundation

Cesar David Ramírez Dimaté

student•

Yo lo que veo es que necesito aprender Sass para poder utilizar Zurb Development Stack, ya que no puedo modificar el css directamente.

Gersain Estanislao

student•

Hola Sacha he tratado instalar pero al momento de crear el proyecto me aparece este error:

Tienes alguna idea de cómo arreglarlo?

Diego Forero

Team Platzi•

Probaste a correr el comando npm install

Gersain Estanislao

student•

Hola GOLLUM23 gracias por contestar.
Si ya pero me aparece este otro:

Junior Yc

student•

en este stack como funciona el js del lado del servidor? como me conecto a base de datos usando solo js?

fernando josé pineda trujillo

student•

No pude con la instalación, al intentarlo de la manera que Sacha lo hace me dice que debo ejecutar sudo para darle permiso de administrador, le doy permiso, luego me sale que si le doy permiso saldrá error y podría ocasionar problemas y no sigue más con la instalación.

Ahora intento instalando por github, me da algunos problemas y al pareces se instala, cuando le doy el comando npm start, no lo ejecuta, me da error. ya no se me ocurre que hacer. Consejos, soluciones?

![](

este es el error que me da siguiendo el procedimiento

	throw err;
				^

Error: EACCES: permission denied, open '/home/luffy/.config/configstore/bower-github.json'
You don't have access to this file.

así sale cuando le doy permiso de administrador

            .
           /|     ,
      , /|/  \/| /|       Slow down there, friend!
     /|/       |/ |       ------------------------
 |___|            |___|   Running this installer as an administrator can cause problems.
 \___|  ^^   ^^   |___/   Try running this command again without "sudo" or administrator rights.
     | -[O]--[O]- |
     |    ___,    |
     |    ...     |
      \__________/

Cesar David Ramírez Dimaté

student•

Ejecuta lo siguiente:

cd Documents
npm install --global foundation-cli
foundation new --framework sites --template zurb
# colocas el nombre del proyecto, puede ser platzipalooza-zurb
# Instalas Gulp
npm install gulp-cli -g
npm install gulp -D
# Inicias el proyecto
npm start
# Generar los archivos html,js,css
npm run build

fernando josé pineda trujillo

student•

Ya lo habia solucionado pero igualmente gracias

Blanca Segura Garcia

student•

Un buen curso … Aprendí mucho. Solamente que hubiese deseado que al final el “platzipalooza”, que se hizo para acompanhar todo el aprendizaje, hubiese sido incorporado en este framework que se instala. Me hubiese ayudado un montón. o, alguien tiene una idea?

Jorge Luis Vilca Venegas222

student•

Este es uno de los desafios del curso 😄.

Blanca Segura Garcia

student•

Si, claro … lo intenté y sigo intentándolo. Pero me pierdo. Si al menos hubiesen puesto los pasos en PDF … un screenshot de los pasos o el orden de los archivos, por ejm. ahorraría tiempo y energía y el desafío no se volvería “pesadilla” y luego horror para no querer continuar otra vez. 😉

Erick Neftalí Sarmiento Cortes

student•

Esta genial pero tarda muchísimo en refrescar.

Cesar David Ramírez Dimaté

student•

si tarda mucho en refrescar ya es por la velocidad de tu equipo

Paul Santaria

student•

esta genial esta herramienta muy similar al curso de post css

Cesar David Ramírez Dimaté

student•

Para los que tienen problemas al ejecutar el comando npm start deben instalar antes gulp.

npm install gulp-cli -g
npm install gulp -D
npm start

Zurb Development Stack

¡Hemos renovado este curso!

¿Dónde aprender frontend actualizado?

Bienvenido al curso

Bienvenidos al curso de frontend con Bootstrap y Foundation

Introducción a Frameworks Frontend

Foundation

Presentación del proyecto para Foundation

Grilla de Foundation

Grilla Flex de Foundation

Foundation Icon Fonts 3

Títulos en Foundation

Barra de menú en Foundation

Botones en Foundation

Tabs con Foundation

Carrousel en Foundation con Orbit

Tablas de precio con Foundation

Igualar alto de columnas en Foundation

Contenido responsive con Foundation

Formularios con Foundation

Validación de formularios con Foundation

Navegación avanzada con Foundation

Barra de navegación fija con Foundation

Modificando Tabs en Foundation

Menú offcanvas con Foundation

Menú Drilldown con Foundation

Obteniendo datos del formulario

Bootstrap

Presentación del proyecto de Bootstrap

Bootstrap lanzó su versión v4.0.0-alpha.6

Contenedores en Bootstrap

Grillas en Bootstrap

Grillas Flex con Bootstrap

Barra de navegación con Bootstrap

Navegación responsive con Bootstrap

Carousel con Bootstrap

Imágenes responsivas con Bootstrap

Formularios con Bootstrap

Modals en Bootstrap

Breadcrumbs con Bootstrap

Filtros con Bootstrap

Cards con Bootstrap

Conclusiones

Cierre del Curso

Desafío 01

Desafío 02

Desafío 03

Desafío 04

Contenido complementario

Personalizando Bootstrap

Zurb Development Stack

Yeoman