Design Update #1

The site design has been updated.

Design Concept.

Having built this site while learning Drupal, and now with a slightly better grasp of how it works, it was time for a design overhaul. From the initial installation onward, the approach has been learning by doing — trying out Drupal's standard features and building as I go. That said, there are many areas where the features are being used without a deep understanding of how they actually work, so while the site looks the part, some settings and usage patterns are not quite right.

Going forward, the plan is to rebuild the site while making corrections along the way. The approach taken so far does work for building a Drupal site, but there are many areas where the intended use of features has been ignored, which isn't great for efficiency. The goal is to go back to basics and build with a proper understanding of what each Drupal feature is actually for.

This article briefly covers the intent behind the design changes, the Bootstrap classes and components used, and the custom CSS written separately. It also touches on responsive design — an unavoidable element of modern frontend page design.

Drupal's defaults already account for responsiveness, and the Bootstrap theme used here is also responsive out of the box. The approach has been to build on those defaults while adding CSS for the areas that needed a little more refinement.

CKEditor.

Articles in Drupal are written using the built-in CKEditor. However, when using Bootstrap classes, components, or custom CSS in the page structure, CKEditor cannot handle that directly — so any design-related elements are edited as raw HTML, bypassing CKEditor.

Direct HTML editing makes duplication straightforward, which is useful when reusing components within an article or when creating the English version from a Japanese article.

One of Drupal's advantages is the ability to choose an editor per content type. CKEditor has an auto-correction feature that is both a strength and a weakness — it can make unintended changes. For styles or HTML tags that CKEditor cannot handle correctly, the editor is configured to allow direct HTML editing instead.

This can also be done using the Full HTML editor with the source view, but it makes unintended corrections when HTML errors are present, which makes later fixes difficult. To avoid this, a mode that bypasses CKEditor entirely and allows direct HTML editing is used.

Text formats and editor settings in Configuration

Home > Admin > Configuration > Content authoring > Text formats and editors
// Add new with a name such as "HTML Code"
// Select "No text editor" in the settings

is where this can be configured.

The Bootstrap5 theme in use is a straightforward setup with Bootstrap5 built in as a Drupal custom theme. A simple example: the <p> tags used for article text have their size and weight set by Bootstrap5's global CSS. By adding Bootstrap's utility classes to a <p> tag, size and weight can be changed easily.

Default

<!-- Default p tag with no class specified -->
<p>Default p tag with no class specified.</p>

Default p tag with no class specified.

Adding classes

<!-- The fs-5 and fw-bold classes specified are applied. -->
<p class="fs-5 fw-bold">The fs-5 and fw-bold classes specified are applied.</p>

The fs-5 and fw-bold classes specified are applied.

In this way, adding a utility class to any HTML tag in an article is all it takes to change its appearance. Bootstrap5 provides a wide range of well-designed classes for every HTML tag — add the class to the tag and it takes effect immediately.

Beyond classes, Bootstrap also provides a wide range of design parts called components. The primary one used here is the container, built with div tags to create various layouts.

1-1. Customizing default settings

Stylesheet settings are configured by modifying SCSS files and compiling them into CSS.

Since the stylesheet changes needed here are relatively few, rather than modifying the default SCSS or CSS files, a separate CSS file is used and loaded via libraries.yml.

The key point: the custom CSS file must be loaded last. This is due to how CSS works — styles loaded later override those loaded earlier.

The reason for maintaining a separate CSS file for default settings is as follows.

Adding classes individually to every <p> or <h> tag used when writing content is tedious and error-prone. Instead, changes to font size, weight, and Bootstrap component defaults are written into the separate CSS file.

p tag

As one example, here is the default <p> tag setting in use:

/* p tag default settings — written in themecustom.css */
p {
    font-size: 1rem;
    font-weight: 400;
    margin-right: 10%;
    margin-left: 10%;
}

In a single-column layout, the default <p> tag spans the full width, which can make the article uncomfortably wide and hard to read. Setting a 10% margin on each side brings the article width down from roughly 1700px to around 1300px (depending on screen size).

The reason for targeting around 1300px: a sidebar would bring it down to roughly 800px. While 800px is perfectly readable, it results in more lines and more scrolling compared to 1300px.

Writing articles in Drupal, the biggest cause of eye fatigue is eye movement — the goal has been to design for minimal horizontal and vertical movement. There are various approaches: changing font size, shortening articles and splitting them across pages, and so on. This is one solution for updating the design with minimal changes to existing articles, not necessarily the best one. As the design is refined further, the current <p> tag sizing and layout may no longer be optimal.

p tag margins

The margins set above are not always appropriate — there are cases where no margin is needed on either side. In this site, using a <p> tag inside the footer block applies the default margin and disrupts the layout. For those cases, a separate class without margins is defined.

/* .menu class — no margin */
.menu {
    margin-left: 0;
    margin-right: 0;
}

When no margin is needed, the .menu class is applied to the <p> tag.

<p class="menu">No margin applied.</p>

No margin applied.

The <p> tag has been used as the primary example here, but the same approach applies to heading tags and Bootstrap's fs-x classes — all adjusted in the CSS file to match the site design.

h tags

The same changes apply to heading tags. When first building pages, it's easy to think of <h> tags purely as text size controls — that was the initial understanding here too. But from the perspective of HTML structure, they are recognized as headings (while <p> tags are paragraphs). This matters because it determines how the browser interprets the tags when rendering the page.

Heading tags come in six levels from <h1> to <h6>. The clearest illustration of HTML structure's importance is SEO — Google uses it as one of its page evaluation criteria. As an example of heading structure: <h1> is the main title, <h2> is a major section, <h3> a subsection heading, <h4> a sub-heading, <h5> a note, and <h6> a sub-note. Google reads this heading hierarchy to understand and index page content. (It is one factor among many.)

For properly structured HTML:

h1: Title > h2: Chapter > h3: Section heading > h4: Sub-heading > h5: Notes or emphasis

is the ideal structure.

Heading font sizes are typically set by the theme, in descending order from <h1> to <h6>. In practice, issues like an <h2> feeling too large, or wanting a lighter font weight, are inevitable when working on page design. It's also common to want to use <h5> visually when it doesn't appear in the proper sequence after <h4>.

h1: Title > h2: Chapter > h3: Section heading > h5: Notes or emphasis

From a pure font-size perspective, going straight from <h3> to <h5> without an <h4> in between is tempting. When first building this site, heading tags were thought of in terms of visual size rather than structure — but from an HTML structure standpoint, that approach is wrong. Running a structure check in Google PageSpeed Insights with this setup produces a message that the page is not properly structured.

To use heading tags in the correct sequence without sacrificing the intended visual design, styles are configured as follows.

Bootstrap also provides utility classes for heading tags, allowing size and weight to be changed just like <p> tags.

<h3>Default h3 heading.</h3>
<h3 class="fs-5">Size changed with fs-5.</h3>
<p class="fs-3 fw-bold">p tag used as a heading substitute.</p>

Default h3 heading.

Size changed with fs-5.

p tag used as a heading substitute.

Setting utility classes makes size changes simple. The third line uses a <p> tag with utility classes to display identically to an <h3>, which allows emphasis text to be used within an article without breaking the heading structure. This approach keeps <h> tags as true headings rather than repurposing them as font-size controls.

Just like <p> tags, adding classes to every <h> tag is tedious, so the defaults are changed instead. Building on Bootstrap's initial settings, the separate CSS file makes the necessary adjustments. The following is an example for <h3>. The default <h3> is too large on mobile, so responsive handling is applied. The rule is written mobile-first, with a separate specification to display <h3> at desktop-appropriate sizing when the screen is large enough.

/* h3 default settings — written in themecustom.css */
h3 {
    font-size: 1.2rem;
    font-weight: 500;
}
@media (min-width: 1200px) {
    h3 {
        font-size: 1.6rem;
    }
}

@media (min-width: 1200px) means: if the screen is 1200px or wider, display the font at 1.6rem.

Structure is often equated with SEO, but it is fundamentally a guideline for whether a website conforms to web standards. The point is not to rank higher in search — it is to build the site according to those standards, which as a result enables search engines to correctly understand the page.

1-2. Enabling a custom CSS file.

Bootstrap's design can be changed by modifying the default SCSS files and compiling to CSS. That said, modifying Bootstrap's well-considered defaults feels risky, and the work involved in reverting changes makes it a barrier to getting started.

To begin with, all of Bootstrap5 theme's design styles are consolidated in a single file called style.css. This file contains every style declaration — over 12,000 lines.

Extracting the necessary classes from SCSS and writing them into a custom CSS file is also quite involved. (That said, this is the proper process.) For a large-scale site managed by multiple people, editing Bootstrap's standard SCSS is the best approach — it's easier to maintain and better for efficiency.

For a small personally-run site like this one, however, writing styles directly into CSS is simpler both to work with and to manage than compiling from SCSS — so that's the approach taken here.

To set up and use this custom CSS file, the following is added to theme.libraries.yml.

The custom CSS file is named themecustom.css.

theme.libraries.yml

global-styling:
  version: VERSION
  css:
    theme:
      css/style.css: {}
      css/themecustom.css: {}

Adding the above to theme.libraries.yml makes it possible to customize styles without touching the default stylesheet.

Covering every component and class would make this article too long, so a configuration example is given instead.

The Bootstrap Card component is used frequently throughout the pages here. A card is a bordered block with strong visual impact for organizing content — used for highlighted passages, mid-article summaries, and various other purposes.

While CSS changes are made, the base classes remain Bootstrap's own. The reason is that Bootstrap's components come with highly detailed responsive settings by default. Rather than writing all of that from scratch, building on those defaults and only writing the visual changes into the stylesheet is both more efficient and more reliable than configuring responsiveness manually.

The card component is also used in Views and Taxonomy list pages.

css card CSS // written in themecusutom.css

.card {
    background-color: #fdfdfd;
    border: 1px solid rgba(0, 0, 0, 0.175);
}
.card-header {
    background-color: #f1f3f4;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.card-body {
    padding: 1rem;
}

html html // written directly as HTML in the article

<div class="card">
    <div class="card-header">
        <p class="fs-5 fw-medium">Card HTML</p>
    </div>
    <div class="card-body">
        <p>This component is used frequently.</p>
        <p>
            <a href="https://getbootstrap.com/docs/5.3/components/card/" target="_blank" rel="noopener">
                Bootstrap5 Card documentation
            </a>
        </p>
        <p>
            The Card component provided by Bootstrap5 is used here.
            Refer to this documentation for detailed coverage.
        </p>
    </div>
</div>

 The above code renders as shown below.

Other Bootstrap component styles have been modified as well, but to keep this article from growing too long, those are omitted here.

Originally, the top menu used a burger menu to keep the same interface across desktop and mobile. The advantage of a burger menu is that it compresses the menu content into a small space, hiding it by default and showing it on demand. This interface is ideal for mobile where screen space is limited, and it's the standard approach for mobile menus across the web — most people will have encountered it.

Using the same interface on both mobile and desktop was the thinking — that visitors would find it easier to navigate the site without switching mental models. That's why the burger menu was used on desktop as well.

The site launched with this menu structure, but on desktop, navigating via the menu requires one extra action compared to a plain text link menu — opening the burger menu first.

Even when checking articles or testing internal links, that extra action was required — and it was genuinely annoying. So as part of this design update, the desktop burger menu has been replaced with a standard text menu.

3-1. Drupal's standard menu

Drupal includes a standard feature under Structure > Menus for editing the elements that make up the top menu, and that is where the top menu is normally built. However, customizing the design requires writing design elements in Twig. That is the standard Drupal menu editing process — but one of Drupal's advantages is its Block and Block Layout functionality, which allows for a high degree of configuration freedom.

Rather than using Drupal's standard menu, a separate block is created for the menu and called via Block Layout. The advantage of this approach is easy switching between configurations — such as Japanese and English menus, or different menus for article pages versus list pages.

Drupal's translation feature does not translate inline text in blocks by default, so separate Japanese and English menus need to be created. For this reason, rather than using Drupal's standard menu, dedicated blocks are prepared and swapped via Block Layout.

3-2. Fixed-Top

The top menu position is set to fixed-top. A fixed-top menu stays visible at the top of the page even as the user scrolls, making it easier to navigate to other articles or pages. Applying a fixed-top setting to Drupal's standard menu requires Twig configuration. The advantage of Twig is that it reflects in the Drupal admin menu settings, making it easy to build menus through the GUI. Since menus here are edited directly as HTML — and the site is still being built, meaning design changes happen frequently — rather than customizing Drupal's standard menu via Twig, a separate menu block is used to allow free configuration changes.

3-3. Burger menu

This is the burger menu previously in use. It has since been replaced with a standard text menu. The HTML source is lengthy so it is omitted here. Refer to Bootstrap's documentation for details.

<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <!-- // Specify the site title here -->
    <a class="navbar-brand" href="/en/top">HookedOn01</a>
    <!-- // Burger menu -->
    <button class="navbar-toggler" type="button"
      data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
      aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- // Expanded menu: using offcanvas -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title">HookedOn01</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
      </div>
      <div class="offcanvas-body">
        <!-- // Expanded menu: text links -->
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <!-- // Expanded menu: dropdown -->
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#"
              role="button" data-bs-toggle="dropdown">Drupal &amp; Web Articles.</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="/term-article-drupal">Article 1.</a></li>
              <li><a class="dropdown-item" href="/term-article-web">Article 2.</a></li>
            </ul>
          </li>
          <!-- // (abbreviated below) -->
        </ul>
      </div>
    </div>
  </div>
</nav>

 The sample below would normally be fixed-top, but the fixed-top setting has been removed for this article. The links are live and will navigate to the actual pages. Use the browser back button to return to this article.

This produces a menu bar as shown above.

3-4. Text menu

This is the text menu currently in use. The navbar-expand-lg class is specified on the nav element. The HTML source is lengthy so it is omitted here. Refer to Bootstrap's documentation for details.

<!-- // Specifying navbar-expand-lg makes it a text menu. -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <!-- // Specify the site title here -->
    <a class="navbar-brand" href="/en/top">HookedOn01</a>
    <!-- // Burger menu: responsive setting makes it a text menu on desktop
         and a burger menu on mobile. -->
    <button class="navbar-toggler" type="button"
      data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- // Navbar text menu starts here. -->
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <!-- // Parent element font color white is set with link-light.
             Hover element uses link-opacity-75-hover. -->
        <li class="nav-item">
          <a class="nav-link link-light link-opacity-75-hover" href="/en/top">Home</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle link-light link-opacity-75-hover"
            href="#" role="button" data-bs-toggle="dropdown">Creation</a>
          <ul class="dropdown-menu">
            <!-- // Child element font color red is set with link-danger. -->
            <li><a class="dropdown-item link-danger" href="/en/creation">Drupal.</a></li>
          </ul>
        </li>
        <!-- // (abbreviated below) -->
        <!-- // Language switcher uses a dropdown. -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle link-light link-opacity-75-hover"
            href="#" role="button" data-bs-toggle="dropdown">Languege</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="/ja/creation/learn032">Japanese.</a></li>
            <li><a class="dropdown-item" href="/en/creation/learn032">English.</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

 This would normally be fixed-top, but the setting has been removed for this article. The links are live and will navigate to the actual pages. Use the browser back button to return to this article.

This produces a menu bar as shown above.

Bootstrap5's nav component is responsive out of the box and can be built with a simple HTML structure using <ul> and <li> tags. The Bootstrap5 navbar documentation is linked below — highly recommended for anyone looking to build a menu bar with Bootstrap.

Conclude.

This article has briefly covered the Bootstrap5 classes and components used in this design update. A more detailed explanation was considered, but keeping the article from growing too long — and knowing that readers are unlikely to copy styles directly — the choice was made to present highlights alongside links to Bootstrap5's documentation, in a format that's useful as a starting point for anyone wanting to try Bootstrap5.

Design thinking.

As covered in this article, the primary design consideration is readability. Creating a modern and polished design is one aspect of design thinking, but since the content here is text-heavy, making that text easy to read comes first — which is what the current design reflects. As the design vocabulary and CSS knowledge here develop further, the design may take a different form.

UI / UX.

UI (User Interface) and UX (User Experience) are foundational concepts in web design. They haven't been consciously top of mind here, but they have become increasingly prominent terms in recent years. If the goal is a design that's easy to use and makes it easy for visitors to find useful information, these ideas are simply common sense.

Not covered in this article, but as part of the design update, Japanese/English switching has been added to every page, anchors have been placed within articles as an alternative to global navigation, and a footer navigation has been added. The hope is that this makes the longer, harder-to-navigate articles a little easier to revisit.

The next article covers the Japanese/English switcher, the footer navigation, and the hero content.