logo

Extra Block Types (EBT) - Nueva experiencia con Layout Builder❗

Extra Block Types (EBT): tipos de bloques con estilo y personalizables: Presentaciones de diapositivas, Pestañas, Tarjetas, Acordeones y muchos más. Configuraciones integradas para fondo, DOM Box y plugins de JavaScript. Experimenta hoy el futuro de la construcción de diseños.

Módulos de demostración EBT Descargar módulos EBT

❗Extra Paragraph Types (EPT) - Nueva experiencia con Paragraphs

Extra Paragraph Types (EPT): conjunto de módulos basado en párrafos de forma análoga.

Módulos de demostración EPT Descargar módulos EPT

Scroll
  1. Inicio
  2. Libro de Drupal
  3. Artículos antiguos

7.2.1. Creación de temas basados en Bootstrap. Configuramos PhpStorm y el compilador LESS para trabajar con nuestro tema.

04/05/2025, by Ivan

Menu

bootstrap

En las lecciones anteriores, ya vimos cómo crear un tema basado en otro tema Stable. En este tutorial, mostraremos cómo crear un tema basado en Bootstrap, un framework popular para crear rápidamente diseños de página.

Supongo que ya tienes instalado Drupal. Pasemos a la instalación de Bootstrap:

https://www.drupal.org/project/bootstrap

A diferencia de Drupal 7, en Drupal 8 colocamos todos los temas del sitio en la carpeta /themes en la raíz del sitio:

Bootstrap

Para crear tu propio tema basado en Bootstrap, debes crear un subtema. La carpeta para el subtema debe tomarse directamente del tema principal:

/themes/bootstrap/starterkits/less

less

Copiamos la carpeta less a /themes, junto al tema padre bootstrap y la renombramos con el nombre de nuestro tema, el mío será drupalbook. También renombramos los archivos THEMENAME.libraries.yml, THEMENAME.starterkit.yml, THEMENAME.theme reemplazando THEMENAME por el nombre de nuestro tema, por ejemplo drupalbook.libraries.yml. Solo que THEMENAME.starterkit.yml se renombra como drupalbook.info.yml.

drupalbook

Ahora vamos al archivo drupalbook.info.yml y en la sección libraries también renombramos THEMENAME:

libraries:
  - 'drupalbook/global-styling'
  - 'drupalbook/bootstrap-scripts'

También sería deseable renombrar el nombre del tema:

name: 'Bootstrap Drupalbook Sub-Theme (LESS)'

También renombramos los archivos de configuración del tema:

/config/install/drupalbook.settings.yml
/config/schema/drupalbook.schema.yml

config

Ahora queda copiar el código de bootstrap del framework:

http://getbootstrap.com/getting-started/#download

Nos interesa la versión Source code de Bootstrap, que contiene archivos LESS sin compilar:

https://getbootstrap.com/docs/4.3/getting-started/download/

source

Creamos una carpeta bootstrap en nuestro subtema y copiamos allí los archivos de Bootstrap.

bootstrap

Copiamos exactamente el código fuente, no la versión compilada en CSS. Esto es necesario para poder sobreescribir las variables de Bootstrap en nuestra plantilla Drupal en archivos separados:

/less/overrides.less
/less/variable-overrides.less

ovverides

También podemos usar la versión SASS de Bootstrap, pero entonces necesitaremos un compilador SASS. Usamos el compilador LESS porque está integrado en PhpStorm.

Ahora podemos ir a la página de apariencia y activar nuestro tema:

/admin/appearance

Inicialmente, no veremos los estilos de Bootstrap, porque necesitan ser compilados. Para ello, usaremos el plugin Less Compiler de PhpStorm. Vamos a las configuraciones de PhpStorm en File → Settings.

php storm

  • Buscamos en la configuración de plugins
  • Vamos a la página Plugins
  • Buscamos LESS
  • Encontramos LESS CSS Compiler Plugin
  • Lo instalamos mediante Install JetBrains plugin …

Si no encuentras el plugin, descárgalo desde la página oficial:

https://plugins.jetbrains.com/plugin/7059-less-css-compiler

Y lo instalamos con Install plugin from disk ...

Ahora que el plugin está instalado, lo configuramos. Buscamos LESS en las configuraciones:

less profiles

Hacemos clic en el botón + para añadir un perfil LESS. Lo nombramos, por ejemplo, Bootstrap. Para cada proyecto en PhpStorm necesitamos un perfil diferente.

less profiles

En la configuración del perfil indicamos:

  • LESS source directory: C:\OpenServer\domains\drupal8\themes\drupalbook\less
  • Include files by path: C:\OpenServer\domains\drupal8\themes\drupalbook\less\style.less
  • CSS output directory: C:\OpenServer\domains\drupal8\themes\drupalbook\css

Compilar automáticamente al guardar (Compile automatically on save) - opción conveniente que recompila al guardar con Ctrl + S. Recomendado mantener activado.

Ahora puedes presionar Ctrl + S y se iniciará la compilación de LESS. También puedes hacer clic derecho en style.less y seleccionar Compile to CSS:

compile

Normalmente tarda 5-10 segundos:

compile

Si todo ha funcionado, verás tus nuevos estilos:

bootstrap

Recuerda desactivar la agregación de JavaScript y CSS en la configuración de Drupal:
/admin/config/development/performance

perfomance

Por defecto están activadas.

Ahora puedes empezar a maquetar páginas. Además, ya tendrás un menú móvil tipo hamburguesa integrado y diseño responsive.

mobile

Para ello, coloca el bloque del menú en la región Navigation (Collapsible).

navigation

En los próximos tutoriales crearemos un diseño PSD para nuestro tema en Bootstrap.