En esta reunión del grupo hablamos sobre el framework para plantillas Gantry 5.
Estuvo muy interesante, continúa leyendo si quieres saber por qué.
Queremos agradecer a Creatio Work su hospitalidad y acogida.
La presentación la preparamos Marcos Oya y Pablo Arias aunque finalmente participamos todos: Ricardo Carpintero, Luis Solla, Iago Rúa, Jonathan Fernández y Manuel Gómez.
Marcos preparó una instalación para ir viendo cómo funciona mientras hablamos.
También se prepararon unas diapositivas.
Empezamos por explicar qué es Gantry:
"Es un marco de trabajo para el frontend de un sitio web, que consta de dos componentes: El framework y la plantilla, en esta demo utilizamos una gratuita: Hydrogen."
¿Qué me llevó a probar Gantry?
Sólo comenzar a usar Joomla, me dí cuenta de que si quería disponer de suficiente libertad a la hora de mostrar los contenidos, necesitaba una plantilla con muchas posiciones...
Grantry 5 va un paso más allá en este sentido pues las posiciones son ilimitadas.
Gantry 5, es sobre todo adaptabilidad y posibilidad de control del frontend.
Marcos explicando qué le llevó a usar Gantry
Descarga de las plantillas y framework e instalación
En la sección de descargas Gantry a día de la presentación hay integraciones para Grav, Joomla y Wordpress.
Cuentan con descargas también para desarrolladores y de la antigua versión 4.
Para Joomla nos ofrecen:
- Gantry 5 component: el framework que debemos instalar antes que las planitllas.
- Plantilla Hydrogen: gratuita, de propósito genera y completa. Es la que usamos en la presentación.
- Plantilla Helyum: gratuita, de propósito general, completa. Puedes ver una demo aquí.
Se instalan con el gestor de extensiones de Joomla.
Conozcamos la plantilla
Hablamos de la terminología propia del framework:
- PRESET: es una configuración de estilos de plantilla, facilitada por Gantry o creada por el usuario y guardada para posteriores usos.
- OUTLINES: son estilos de plantilla, a los que asignamos un nombre y guardamos para vincular a distintos elementos de menú.
- PARTÍCULAS: son algo parecido a los módulos de Joomla o widgets de Wordpress pero de gantry 5.
- POSITIONS: son posiciones que nos permiten insertar módulos habituales de Joomla..
- ÁTOMOS: son bloques de código que podremos insertar (pj. el código de seguimiento de estadísticas, archivos CSS, Javascrip...).
Cuando hay un circulo que aparece y desaparece en el botón Save page settings significa que se ha realizado alguna modificación y no se ha guardado.
Outlines o estilos de plantilla
Los estilos son configuraciones ya predefinidas de la plantilla que aplicamos a todo o solo determinadas partes del sitio web.
- BASE OUTLINE: es la configuración de colores, tipografías, posiciones de módulos etc, por defecto.
- HIDROGEN HOME: es la configuración para la página de inicio.
- HIDROGEN PREDETERMINADO: es la configuración para el resto del sitio, si nosotros no decidimos crear más Outlines para cualquier item de menú que deseemos.
La vinculación de un Outline-estilo con los los items de menú en los que se va a usar se hace en Assigments.
Gestionando posiciones
Una de las partes más interesantes de las plantillas que funcionan con Gantry es su gestor del layout.
Este apartado nos permite ir colocando el contenido en las distintas posiciones que vamos creando.
Aquí se muestra cómo insertar partículas-módulos, las movemos de una sección a otra y las eliminamos.
Se habla de la diferencia de insertar un módulo creado en Joomla (con Module Instance o Module Position) o crear el contenido directamente en Gantry 5 (con la partícula Sample Content). Hay dos motivos:
- Las partículas de Gantry solo están disponibles dentro de este. Si creamos módulos de Joomla estarán disponibles aunque cambiemos de plantilla en un futuro.
- Otro motivo es que Sample Content no dispone de editor, por lo que tendrás que saber escribir código HTML.
A continuación Marcos nos muestra la configuración de un módulo-partícula, en la pestaña Block.
Muestra los cambios que se pueden conseguir usando los apartados Variations y Tag Atrributes.
Les cambia el color del fondo, tocando el background de la sección e insertando CSS en el módulo y muestra cómo sin apenas conocimientos, se pueden conseguir resultados muy interesantes.
Configuración de estilos o styles
En esta sección podemos definir:
- La tipografía que vamos a utilizar.
- El color de fondo y el color del texto para cada sección.
- El color para los vínculos y para los botones
Tanto en el Outline Hidrogen Home como en Predeterminado, aparecen todas las opciones en gris, como desactivadas. Esto significa que esa opción concreta, está configurada igual que el Outline Base.
Configuración por defecto de las partículas
En este apartado es dónde configuramos las partículas de las que hemos hablado antes. Luego se pueden insertar en el diseño. Algunas partículas mencionadas:
Branding
- Logotipo
- Copyright
- Social
Se probaron e insertaron en un diseño para ver cómo funcionan.
Opciones de la página
En este apartado vamos a poder añadir:
- Meta tags en el Header
- Un Favicon
- El código de Google Analitycs
- CSS
- Archivos Javascript
En este apartado no paramos mucho, se nos echaba el tiempo encima.
Hoja de estilos personalizada
Podemos añadir nuestros CSS a través de un archivo custom.css. El método ideas es utilizar SCSS por lo que creamos el archivo es:
/templates/g5_hydrogen/custom/scss/custom.scss
Cada vez que hagamos cambios en este archivo es necesario compilarlo o transpilarlo.
Si no dispones de otra herramienta puedes ir al panel de administración de la plantilla y pulsar el botón Recompile CSS para que los cambios tengan efecto.
En este enlace se explica en la documentación oficial (en inglés).
Para añadir una fuente tipográfica nueva podemos seguir este otro tutorial.
Por último recordar que Gantry está disponible para Joomla, Wordpress y Grav.
Si te ha gustado, compártelo ;)
