Preliminaries

I have demonstrated [How to build a development environment in Drupal based on Docker ] containerization in this article.

You can keep a [persistent database]

In this article i go one step further implementing [the template creation based on Bulma CSS Framework in Drupal].

The Drupal has the following filesystem. Inside the theme folder I create the bulmaloo directory name.

.
├── composer.json
├── composer.lock
├── config-drupal.sh
├── data
│   └── db
├── docker-compose.yml
├── vendor
│   ├── drupal
│   ├── twig
│   └── typo3
└── web
    ├── autoload.php
    ├── core
    ├── index.php
    ├── modules
    ├── profiles
    ├── sites
    ├── themes
    ├── update.php
    └── web.config

There I create the base npm package.json. You can create a basic package.json.

{
  "name": "bulmaloo",
  "version": "1.0.0",
  "description": "A bulma powered template.",
  "main": "sass/styles.scss",
  "scripts": {
    "css-build": "node-sass --omit-source-map-url sass/styles.scss css/styles.css",
    "css-watch": "npm run css-build -- --watch",
    "start": "npm run css-watch"
  },
  "keywords": [
    "bulma",
    "template"
  ],
  "author": "Ovi Farcas",
  "license": "MIT",
  "devDependencies": {
    "bulma": "^0.9.1",
    "node-sass": "^5.0.0"
  }
}

The file composer.json is also useful for downloading a dependency. The module twigsuggest leave comment marker in the theme with template suggestions.

{
    "name": "drupal/bulmaloo",
    "description": "A base theme for based on Bulma CSS.",
    "keywords": ["theme", "flexbox", "bulma", "templates", "styles"],
    "type": "drupal-theme",
    "license": "GPL-2.0-or-later",
    "homepage": "https://gitlab.com/jazio/bulmaloo",
    "support": {
        "issues": "https://gitlab.com/jazio/bulmaloo/issues",
        "source": "https://gitlab.com/jazio/bulmaloo/tree/8.x-1.x"
    },
    "minimum-stability": "dev",
    "require": {
        "drupal/twigsuggest": "^1.0-beta2"
    }
}

I create the info file bulmaloo.info.yml as a definition starter. There I define the regions I need. I also set the references for global css descriptors and javascript code.

name: Bulmaloo
description: 'Built to use Bulma, a modern CSS framework based on Flexbox.'
type: theme
base theme: stable
core_version_requirement: ^8.8 || ^9
package: Core


regions:
  header: 'Header'
  branding: 'Branding'
  search: 'Search'
  tabs: 'Tabs'
  navbar: 'Navbar'
  hero: 'Hero'
  vitrina: 'Vitrina'
  help: 'Help'
  content: 'Content'
  footer: 'Footer'

  libraries:
    - 'bulmaloo/global-css'
    - 'bulmaloo/global-js'

Next I define the libraries paths bulmaloo.libraries.yml. I create the directories/files: css/global.css and js/global.js, then add the references:

global-css:
 css:
  theme:
   css/global.css: {}

global-js:
 js:
  js/global.js: {}

# dependencies:
# - core/jquery

There are two major essential templates in Drupal 8/9 html.html.twig (the mother of all) and html.page.twig

Here is the main structure inside html.html.twig.



<!DOCTYPE html>
<html{{ html_attributes }}>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <head-placeholder token="{{ placeholder_token }}">
    <title>{{ head_title|safe_join(' | ') }}</title>
    <css-placeholder token="{{ placeholder_token }}">
    <js-placeholder token="{{ placeholder_token }}">
  </head>
  <body{{ attributes }}>
    {#
      Keyboard navigation/accessibility link to main content section in
      page.html.twig.
    #}
    <a href="#main-content" class="visually-hidden focusable">
      {{ 'Skip to main content'|t }}
    </a>
    {{ page_top }}
    {{ page }}
    {{ page_bottom }}
    <js-bottom-placeholder token="{{ placeholder_token }}">
  </body>
</html>

In order to install bulma as node package you need to run npm install

In page.html.twig I copy/paste the raw template I prepared.