Readme.md

THE Port Custom Theme

This theme is a sub-theme of Bootstrap 5. It contains templates for the nodes and blocks used on the website.

Folder Structure

The Twig templates, stylesheets and scripts are grouped into sub-folders within the template directory. For example, the "about" folder contains all the files for styling the About page on the site.

File Loading

Drupal loads the Twig templates based on a naming convention. The CSS and JavaScript files are attached in the Twig template. For example, at the top of a Twig file:

  {{ attach_library('theport/about') }}

References to the CSS and JS files are then placed in theport.libraries.yml. In order to see the changes, it may be necessary to clear the Drupal cache. This can be done either in the Administration area or using Drush:

  lando drush cache-clear

Customizations

The Bootstrap library can be customized using Sass variables.

Upon configuring variables, you will need to recompile the Sass file. From within the global directory, run:

  sass global.scss global.css --style compressed

The global.css file is loaded by Drupal and should be checked into the repository for convenience. Sass is otherwise not used in other templates and does not need to be installed.

Tools

• Use the Sass compiler to compile the global SCSS file to CSS.
• Use the module Twig Tweak to make using templates simpler.
• Use the module Twig VarDumper to output template variables.