Foundation Zurb with Sass and Compass in OSX using Codekit App

Este es un post a partir de un comentario en Google Groups sobre este tema.
Antes que nada quiero decir que soy un fan total del framework Foundation Zurb, me encanta, utilizo regularmente su versión compilada de css que puedes generar desde el mismo site, y como expliqué en un post anterior encontré una manera de usar Less compilado con Codekit para hacer Themes para WP, sobre todo por el tema del comentario inicial en el archivo style.css

Figure it out what is a GEM and how to installed was incredible, finnaly I understand that before using codekit is necesary to install foundation gem and compass gem using Terminal.
After that I try to follow the guidelines of foundation site to use Codekit, if you don´t install foundation gems and compass is impossible to follow, there they only say

First things first, make sure you have the gem installed.

If you don´t know what is a GEM just kill hundred hours to find out. So that´s why I try this instructions on Terminal:

[sudo] gem install zurb-foundation

When foundation files are loaded I do this on the same Terminal window:

compass watch

After that you see Compass files are loading.. ok, till here seams something happen.
Keep following the guidelines of foundation site to use codekit I get back to try change the path of the bin files. So go to Sass/Scss section in code kit/preferences and try to change Sass executable path:

CodeKit.png

Next step, change path of Compass, so in the change to Compass preferences and do the same, try to choose the right bin file:

CodeKit.png

Ok, if I´m in the good path :P this must work. But here I have a big doubt, where should I put the foundation sass files? should I download from git and copy them into my site folder or codekit bring them form the gem?

So let´s try to use Compass in this project, a feature of Codekit

CodeKit.png

I suppose the App bring the framework files to the project, foundations compiled .css and compass css3, but don´t, first need to set how compass works, so you can choose a location (again?), create a new file (why?), or Install Compass. And I choose Install, because before I set the new path for sass and compass. right??

CodeKit.png

But compass need a config.rb, and I didn´t change anything and click to add compass

CodeKit.png

What?? just that, where are the foundation scss or sass files?, and here is where I stock, what should I do?.

—-

Cual es la idea, al utilizar frameworks estas expuesto a las actualizaciones de este, establecer un entorno de trabajo donde lanzar un nuevo proyecto ocupe el menor tiempo posible y que la mayor cantidad de energía se aplique en el desarrollo de este y no en el montaje de la base para hacerlo es bajo mi punto de vista esencial y prioritario, en el ahorro de tiempo es de donde se saca mas beneficio ;)

Así que, publicaré una segunda parte, a ver si consigo hacer funcionar este entorno sin volverme loco.

Publicado por pancho

Publicista renegado con alma de programador y corazón de diseñador. aka: Technical Designer. Escribo fatal, tengo faltas de ortografía y espero me disculpen por ello ;)

Únete a la conversación

5 comentarios

  1. hola, cuando yo instalo zurb mediante compass el entorno de trabajo de los scss por defecto me los coloca aqui: gems\1.9.1\gems\zurb-foundation-3.2.3\lib\foundation

    ahi mismo tengo todos los scss que utiliza mi framework por defecto, pero al momento de personalizar mis estilos directamente genero nuevos scss en mi proyecto ej: «_styles.scss». de este modo no correre riesgos de que se me sobreescriban archivos cuando genere un nuevo proyecto o actualice mi zurb-foundation en algun momento por una version nueva. Creo que es la forma mas comoda que encontre para trabajar en zurb-foundation en sass. Finalmente importo el _styles.scss en mi app.scss para q se compile ahi dentro. Yo utilizo windows claro!!
    saludos

    1. Hola Juanma, gracias por tu comentario :)

      Lo que entendí es que los gems son parte de Ruby, estos se ejecutan en tu proyecto usando config.rb, ahí se especifica las carpetas para los estilos, imágenes y javascripts. Como todo framework es necesario usar un app.scss donde estén los estilos nuevos, la idea de un entorno así es tener una base común para todos los proyectos de ahí llamarlo framework. Ahora, en mi caso con OSX no he logrado solucionar el traer correctamente los estilos de foundation a mi proyecto. Otra cosa es que foundation zurb usa compass, sin compass no se puede compilar ya que ahí están los mixins del sass que tiene foundation. La documentación en internet que he encontrado es muy reducida y mala. De tanto buscar di con este video tutorial, aunque me ayudó a entender mejor el tema de las gems sigo sin poder compilar bien por culpa de que el compass no se carga bien.

      La gran diferencia de usar un foundation.min.css y los archivos sass de foundation es que puedes generar un min.css nuevo, cambiando el ancho de la página, número de columnas, colores, etc, sin necesidad de volver a cargar un min.css desde el compilador de la web de foundation.
      Por el momento sigo usando el foundation.min.css descargado y aparte uso mis archivos sass o less.

      Y sigo buscando una solución…

  2. hay un punto importante con el .css final, y es que puede llegar a pesar por arriba de los 200 kb con commentarios incluidos, eso es poco tolerable para una hoja de estilos teniendo en cuenta q luego falta cargar tantas otras cosas como js imagenes etc. Para ello conviene comprimir el estilo del app.scss desde el config.rb
    eso lo consigues desde esta linea:
    # output_style = :expanded or :nested or :compact or :compressed

    dejando :compressed como valor, abrazo y me gusta el blog

    1. En OSX con codekit is muy fácil controlar la compresión, siempre escojo eliminar comentarios. Así el min.css se hace más pequeñito.

Deja un comentario

Responder a juanma Cancelar respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

A %d blogueros les gusta esto: