como crear un subtheme drupal usando zurb-foundation
TRANSCRIPT
INSTALAR FOUNDATION
• Primeramente para instalar el framework Foundation, es necesario instalar:
•ruby•rvm•sass•compass
• Windows: Instalar RubyInstaller• http://rubyinstaller.org/downloads/• Linux:
https://www.ruby-lang.org/en/installation/#package-management-systems
• Debian or Ubuntu:
• En Ubuntu 13.10 sudo apt-get install ruby1.9.1-dev
$ sudo apt-get install ruby
INSTALAMOS RUBY
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
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
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
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
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
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
EL SUBTHEME ESTA LISTO!!
PERSONALIZAR EL SUBTHEME I
• Existen dos formas de personalizar:1. Usando CSS2. Usando SCSS, (recomendable)• Por defecto en el archivo .info encontraremos:
• El archivo app.css descomentado, es decir por defecto usa estilos css
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.cssO
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
.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
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:
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
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.
LISTO!!
• Limpiar cache y vemos los cambios