Este documento proporciona instrucciones para instalar el framework Foundation y crear un subtema para Drupal 7 utilizando Foundation. Explica cómo instalar las gemas y herramientas necesarias como Ruby, RVM, Sass, Compass y la gema Foundation. Luego describe cómo crear un subtema de Foundation para Drupal 7 ya sea mediante Drush o manualmente, y personalizarlo utilizando archivos SCSS en lugar de CSS.

1. DRUPAL 7 SUBTHEME
FOUNDATION
VERONICA KAREN VEDI A F LORES
veronica.vedia@supersoftinc.com

2. INSTALAR FOUNDATION
• Primeramente para instalar el framework Foundation,
es necesario instalar:
• ruby
• rvm
•sass
•compass

3. INSTALAMOS RUBY
• Windows: Instalar RubyInstaller
• http://rubyinstaller.org/downloads/
• Linux: https://www.ruby-lang.
org/en/installation/#package-management-systems
• Debian or Ubuntu:
$ sudo apt-get install ruby
• En Ubuntu 13.10
sudo apt-get install ruby1.9.1-dev

4. INSTALAR RUBY VERSION MANAGER
RVM
• RVM es una herramienta de linea de comandos que permite
facilmente instalar, administrar y trabajar con multiples entornos
ruby.
• Windows: https://github.com/vertiginous/pik
• Linux: https://rvm.io/rvm/install
• $ curl -sSL https://get.rvm.io | bash -s stable
• Necesita curl, si aun no se tiene instalado:
sudo apt-get install curl

5. INSTALAR SASS
• Sass requiere tener Ruby instalado previamente
• Sass es un pre-procesador CSS igual que Less o
Stylus
• Sass es el lenguaje mas estable y poderoso de hojas
de estilos
• Instalar: http://sass-lang.com/install
$ [sudo] gem install sass

6. INSTALAR COMPASS
• Compass es un framework para la creación de CSS
de código abierto
• Compass nos facilita un montón de mixins que se
agregan a Sass, como border-radius, box-shadow y
gradientes, con la ventaja que hace el CSS3 más fácil
y no tienes que agregar todas las etiquetas
propietarias tu mismo.
• Instalar: http://compass-style.org/install
1. $ gem update --system o $ [sudo] apt-get update
2. $ [sudo] gem install compass

7. INSTALAR GEMA ZURB-FOUNDATION
• Para usar la extensión Compass, es necesario
instalar la gema zurb-foundation.
• Para instalar Foundation y todas las dependencias
necesarias:
[sudo] gem install zurb-foundation

8. INSTALAR EL TEMA ZURB-FOUNDATION
PARA DRUPAL 7
• Instalar el theme en:
sites/all/themes
• http://drupal.org/project/zurb_foundation
• La version 7.x-4.x: Utiliza Foundation 4
1. drush dl zurb_foundation
2. drush en zurb_foundation
• Requiere el modulo: JQuery
• https://www.drupal.org/project/jquery_update

9. CREAR EL SUBTHEME
• Se puede hacer de dos maneras:
1. Por drush, en sites/all/themes ejecutar:
1. Primeramente limpiar la cache: drush cc all
drush fst nombre-de-subtheme Para crear el subtheme
• Automaticamente renombra todos los archivos necesarios.
2. Manualmente:
• Copiar la carpeta STARTER que se encuentra en el theme zurb-foundation
a sites/all/themes/
• De tal forma que se tenga sites/all/themes/STARTER
• Renombrar STARTER, con el nombre personalizado de tu
subtheme, y tambien renombrar el .info
• Ver mas detalles en: https://www.drupal.org/node/1948282
• Para este ejemplo crearemos el subtheme usando drush fst

10. EL SUBTHEME ESTA LISTO!!

11. PERSONALIZAR EL SUBTHEME I
• Existen dos formas de personalizar:
1. Usando CSS
2. Usando SCSS, (recomendable)
• Por defecto en el archivo .info encontraremos:
• El archivo app.css descomentado, es decir por defecto usa
estilos css

12. PERSONALIZAR EL SUBTHEME II
• Para usar sass, es decir archivos scss en lugar de css es
necesario:
• Comentar
• ;stylesheets[all][] = css/app.css
• Y descomentar
stylesheets[all][] = css/mytheme.css
O
stylesheets[all][] = css/custom.css
Nota: Cuando creas el subtheme con drush fst, automaticamente
crea el archivo nombre-del-theme.css, en este caso
mytheme.css en lugar de custom.css que es generado cuando se
crea el subtheme manualmente

13. .INFO PARA USAR SASS
• Para usar SASS, el archivo .info debe quedar asi:
• El archivo mytheme.scss o custom.scss se crea
automaticamente y se encuentra en:
• sites/all/themes/nombre-de-subtheme/scss/nombre-de-subtheme.scss
• Ejemplo:
• sites/all/themes/mytheme/scss/mytheme.scss o
• sites/all/themes/mytheme/scss/custom.scss

14. PERSONALIZANDO…
• Para personalizar el subtheme, modificar los
siguientes archivos:
sites/all/themes/nombre-de-subtheme/scss/nombre-de-subtheme.scss
scss/_variables.scss
• Descomentar las variables que deseamos personalizar. Ejemplo
en el archivo scss/_variables.scss descomentamos lo siguiente:

15. ESTRUCTURA DEL SUB-THEME PARA
PERSONALIZAR
• La carpeta scss contiene todos los archivos necesarios para
personalizar el sub-theme:
• nombre-de-subtheme.css Importa archivos
• _variables.scss Contiene todas las variables para personalizar
• Base: CSS reset/normalize estilos base
• Layout: Contiene archivos de diferentes secciones del sitio para
personalizar su apariencia:
• _triptych.scss
• _main.scss
• _header.scss
• _footer.scss
• _aside.scss
• Components: Estilos para elementos reutilizables
• Theme: Estilos opcionales para un componente

16. COMPILAR LOS ARCHIVOS
• Para compilar los archivos SCSS y convertirlos en CSS existen
dos maneras, para ello ubicarse en sites/all/themes/nombre-de-
subtheme
Opción 1.- Ejecutar el comando:
compass compile
Nota: Este comando es necesario ejecutar cada vez que hagamos un
cambio en algun archivo .scss. Posteriormente por ser la primera vez
limpiar cache
Opción 2.- Ejecutar el comando:
compass watch
Nota: Este comando automaticamente compila todos los cambios y
genera los .css, solo basta ejecutar una vez.

17. LISTO!!
• Limpiar cache y vemos los cambios