Tutorial de maquetación de tema drupal 8 con sass y bootstrap

En este tutorial de maquetación de tema drupal 8 voy ha explicar todo el proceso que hay que seguir para poder tener un tema propio basado en bootstrap 3 con sass, algo ya profesional. 😉

Para empezar os diré que al final del post os he puesto el enlace al desarrollo del tema completo que he subido a github, para que podáis mirar y tener de referencia todos los archivos.

Si queremos crear un tema en drupal 8 y tener la potencia que nos aporta bootstrap podemos hacer un subtheme basado en bootstrap theme, esto puede sonar algo engorroso, pero una vez que le pillemos la forma de hacerlo, verás que es una forma sencilla y limpia de empezar un nuevo tema en tu drupal 8, vamos a ello.

Crear un subtheme hijo de bootstrap con sass en drupal 8

Vamos a crear un subtheme de bootstrap con sass en drupal 8, si no quieres usar sass, sigue mi articulo de como crear un subtheme de bootstrap.

Lo primero de todo es instalar el bootstrap theme oficial para drupal 8, este tema ya nos da todos los archivos que necesitamos, vamos a verlo.

boostrap theme src subtheme

En la carpeta starterkits tenemos los tres posibles esqueletos de subtemas, uno básico, otro con sass y otro con less, nosotros vamos a copiar la carpeta sass y la metemos en nuestra carpeta custom en “themes/custom”. Renombramos la carpeta recién copiada con el nombre que le vamos a dar a nuestro theme, yo lo he llamado “Zero” y modificamos donde ponga “THEMENAME” por nuestro nombre de tema, el mismo que la carpeta recién creada. Hecho esto tendremos nuestro tema listo.

Configurar sass en nuestro tema

Primero hay que tener instalado y configurado sass en nuestro equipo, si no lo tienes puedes seguir este artículo que lo explica perfectamente.

Para tener todo la potencia de sass hay que realizar algunos cambios, tenemos que descargarnos el proyecto sass para bootstrap. Lo que necesitamos es la carpeta “assets”, la copiamos y la renombramos como “bootstarp” y la metemos en nuestro tema, os dejo una captura de como debe quedar nuestro tema.

sass bootstrap subtheme druapl 8

Yo dentro de custom tengo otros temas, nos quedamos con lo que hay dentro de el tema que estoy creando llamado “Zero”, tenemos nuestra carpeta “bootstrap” que contiene los archivos sass y los demás archivos que hemos renombrado cuando hemos copiado el tema. Vamos a editar nuestro archivo “sass/style.sass”.

En la llamada a Bootstrap Framework tenemos que ponerle la ruta correcta.

Hecho esto ya tenemos nuestro nuevo tema listo, vamos a instalarlo, entramos en “/admin/appearance” y lo marcamos como “Set as default”

Configurar drupal 8 para desarrollar temas

Para desarrollar temas en drupal 8 tenemos que realizar algunas configuraciones para que nos imprima las variables y tener control total, para ello instalamos el módulo devel de drupal 8, también puede echar un ojo al articulo que escribí de como depurar un tema en drupal 8, con este módulo configurado y los las variables twig.config “debug” y “auto_reload” en “true” de nuestro archivo “sites/default/services.yml” podemos usar la función kint() “{{ kint() }}” en nuestras plantillas twig e imprimir las variables.

Configurar regiones en nuestro tema en drupal 8

Ahora toca configurar las regioines, esto es importantisimo en nuestro nuevo tema, yo tengo esta maqueta (Es una porquería basada en un tema de worpress que encontré por internet, pero vale para el post).

wireframe v1

En esta maqueta he marcado las regiones de mi futuro desarrollo, las regiones que voy a implementar son: header, menú principal, migas, menú secundario, top bar, content (se tiene que llamar content, drupal no reconoce un tema que no tenga una región content) y pie. Para que drupal sepa las regiones qeu vamos a implementar en nuestro tema hay qeu escribir en el archivo mi_tema.infi.yml, os muestro el contenido.

He comentado las regiones que me ofrece bootstrap por defecto y he escrito las que yo quiero.

Ahora nos vamos a “/admin/structure/block” y definimos los bloques que van a tener nuestras regiones recien creadas, para que drupal 8 reconozca las nuevas regiones hay que hacer un clear cache. Esta son mis regiones con mis bloques.

regiones drupal 8

Hecho esto ahora toca maquetar nuestro tema…

Hacer override de plantillas twig en drupal 8

Para hacer override de las plantillas en drupal es muy sencillo, el modulo devel nos dice que planillas esta utilizando y nos da consejos por si queremos renombrarlas.

plantillas con modulo devel drupal 8

Como podéis observar nos dice donde empieza y acaba cada plantilla y donde está, yo he copiado la plantilla “themes/bootstrap/templates/block/block–system-branding-block.html.twig” a mi tema “themes/custom/zero/templates/block/block–system-branding-block.html.twig” y la he editado. No os pongo el contenido del archivo ya que al final tenéis el enlace a github con el desarrollo completo del tema, podéis mirar todo el desarrollo.

Conclusión del post de maquetación de tema drupal 8 y enlace al desarrollo de github.

Como podéis ver en este post no he entrado en muchos detalles, ya que si no, se hubiera extendido demasiado y ya he publicado otros post de cosas mas simples, si hay algo que no he explicado en este, seguramente este explicado en otro de mis post, buscarlo y si no encontráis algo, me comentáis aquí e intento incluirlo.

Aquí os dejo el link del desarrollo de un tema en drupal 8 a git hub donde están todos los archivos del tema, recordar que no es un tema para usarlo, solo lo he creado para este post, pero si os puede servir de consulta para realizar el vuestro propio. Os aconsejo que lo instaléis en vuestro drupal y vayáis echando un ojo mientras desarrolláis vuestro propio tema de drupal.

 

About ignacio Farré

Técnico en programación web, amigo de MVC y experto en Drupal, Symfony, Prestashop y bootstrap.

Check Also

Como crear una página en drupal 8 y maquetar en un theme

Crear una página en Drupal 8 y maquetar en un template

Es muy fácil crear una página en drupal 8, pero lo interesante es poder maquetarla …

programar un bloque con drupal

Crear un bloque en drupal 8 y maquetar en un theme

Os voy a mostrar como crear un bloque en drupal 8 y lo mas importante, …

Theme_preprocess_hook

Acceder a los datos del usuario en drupal 8 y a su imagen – Clases File, Node y User

Acceder a los datos del usuario en drupal 8 es muy fácil, en este artículo …