"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Empezando con Foundation 6

Cuando hablamos de framework CSS se nos vienen a la cabeza 2 nombres, uno de ellos es Foundation (el otro es Bootstrap), evidentemente no son los unicos, existen muchos más, algunos de ellos muy buenos, pero estos son los mas conocidos y los que tienen detrás una comunidad enorme de desarrolladores, con lo cual su estabilidad y evolución está garantizada, actualmente Foundation está en su versión 6, veamos como crear desde cero una página con este fantástico framework!

Arrancando nuestro proyecto

La documentación de Foundation es muy buena, yo os dejo el enlace por si quereis saber más, lo que voy a tratar de explicar es la forma en como yo crearía un proyecto pero evidentemente hay otras formas…

Para comenzar, debemos instalar nodejs si no lo tenemos pues haremos uso de su instalador de paquetes, aquí esta el enlace.
Una vez instalado podemos usar la linea de comandos para instalar el cliente que proporciona foundation para arrancar sus proyectos, la instalacion mediante la linea de comandos es la forma que recomiendo por ser las más rapida y eficiente, ejecutamos en nuestro terminal esto:

npm install --global foundation-cli

Con esto conseguimos instalar el cliente como global, lo que quiere decir que no importa en el directorio que estemos podremos ejecutar en consola el comando ‘foundation’ y el sistema lo reconocerá.

Ahora para crear un proyecto solo tenemos que navegar al directorio donde queramos crear nuestro proyecto y ejecutar:

foundation new
 
Al hacer esto tendremos que escoger ciertas opciones:

  • Si estamos construyendo un website, una app o un email,
  • El nombre del proyecto,
  • Si vamos a usar un template basico o el que propone Zurb que a mayores del compilador de sass incluye el sistema de plantillas Handlebars y el compilador de javascript

Una vez definido todo comienza a descargarlo.

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)