Design revamp #1

Site redesign.

Design Concept.

I have been installing Drupal and building websites for learning purposes, and now that I understand how to use Drupal a little better, I have changed the site design. From installation to now, I have been building websites while trying out the standard functions of Drupal with the awareness that it is better to get used to it than to learn it. However, there are many parts of the site that are being used without a good understanding of the essence of the functions, and although the site has taken shape, there are parts where the settings and usage methods are not correct.

I intend to rebuild the site with modifications in the future. The approach I have taken so far is still viable for building a website with Drupal, but there are many forms that seem to ignore the original use and usage of the functions, and the work efficiency is not very good, so I want to go back to the basics and understand the functions that Drupal has while building.

We would like to briefly summarise the intention of the design changes we made this time, the classes and components provided in Bootstrap that we used for the changes, and the CSS we wrote separately. We have also briefly incorporated elements of what is known as responsive design, which is inevitable in page design, known as front-end design these days.

Responsive is taken into account in the Drupal standard, and Bootstrap, the theme used, is also responsive by default. While using the default responsive as the basis, we added CSS for the parts we wanted to fill in a little more.

CKEditor.

Home > Administration > Configuration > Content Authoring > Text Formats And Editors
// Add a new name, e.g. ‘HTML code’.
// Select ‘No text editor’ in the settings.

The Bootstrap5 theme I use is a simple specification with Bootstrap5 built in as a custom Drupal theme. A simple use case is that the P-tags used to write articles have their size and weight specified in the overall CSS settings that Bootstrap5 sets up. You can easily change the size and weight by specifying the utility class provided by Bootstrap for the P tag used in the article.

Default

<p>Default P tag with no class specified</p>

Default P tag with no class specified

Adding classes

<p class="fs-5 fw-bold">The fs-5 and fw-bold specified in the class are reflected.</p>

The fs-5 and fw-bold specified in the class are reflected.

You can easily make design changes by adding utility classes to the HTML tags in the article as described above.Bootstrap 5 has a number of design-friendly classes that can be used in each HTML tag, which can be added to the HTML tag with the class to the HTML tag and it will be applied as is.

Bootstrap provides a number of design parts used in page design, known as components as well as classes. The basic idea is to use containers. These containers use DIV tags to structure the various designs.

I use a variety of utility classes and components, including navigation components, card components and pagination components for use in menus as well as utility classes for text.

1-1.Changing default settings

The style sheet configuration consists of a css file that is modified and compiled from the scss file provided by the theme.

Since there are not so many items to change in my stylesheet, I do not make any changes to the scss and css provided by default, but prepare a separate css file and load the css file prepared in libraries.yml.

Note that the separately prepared css files should be set to be loaded last. This is a characteristic of css, which overwrites the description of the css to be loaded later when loading the page.

A separate css file with default settings is due to the following factors

It is troublesome to add a class to each and every tag that is always used when writing articles with content, such as the P tag and H tag, and it is easy to make mistakes in the description, so the font size, weight and changes to the components that are prepared by default in Bootstrap are described in a css file that is prepared separately. The following is an example of a css file that is prepared separately.

P Tag

As an example I default to the P tag as follows.

p {
   font-size: 0.95rem;
   font-weight: 300;
   margin-left: 10%;
   margin-right: 10%;
   line-height: 1.65em;
}

The P tag is used to write article text, but by default, a single-column layout makes the text too wide, making it difficult to read. To make it easier to read, we have set the left and right margins to 10% each, reducing the width of the article written in the P tag from the default 1700px to approximately 1300px. (This may vary depending on the screen size of the PC.)

The reason for setting the width to approximately 1300px is that if a side menu is added, the width becomes approximately 800px. While articles with a width of 800px are also easy to read, compared to 1300px, the number of lines increases, resulting in more scrolling.

The main reason my eyes get tired when writing articles using Drupal is the movement of my gaze. I would like to design the layout so that the movement of my gaze up, down, left, and right is kept to a minimum. There are various approaches, such as adjusting font sizes or splitting longer articles into multiple pages. This is one method I have considered to achieve the desired design changes with minimal effort while keeping existing articles intact. However, this is not the definitive solution, and further design refinements may lead to adjustments in the current P tag size or layout.

P tag margin

The margins set for the P tags above may not be necessary on both sides depending on the use case. In my case, when using P tags in a block created for the footer, margins are specified by default, resulting in an unattractive layout. In such cases, I create a separate class that does not apply margins to P tags to address this issue.

p.menu {
   font-size: 0.95rem;
   font-weight: 300;
   margin-left: 0%;
   margin-right: 0%;
}

If you do not want to use the default margins, specify the .menu class you created in the P tag and use it.

<p class="menu">No margin is specified.</p>

No margin is specified.

I explained using P tags, which are frequently used, but similarly, H tags and fs-x classes specified by Bootstrap are also changed in CSS files to match the site design.

h Tag

We have also changed the h tags (headings) in the same way. When creating a page for the first time, it is easy to mistake h tags for text size parts. In fact, I also had that understanding, but from the perspective of HTML structuring, they are defined as headings rather than text size parts. (P tags are used for paragraphs of text.) What this means is that it is related to how browsers recognise the tags you write when they read and display HTML.

Headings are denoted by H tags, which are available in six levels from H1 to H6. Structuring HTML in this way makes it easier to understand and is beneficial for SEO, as structured content is one of the criteria Google uses to evaluate pages. For example, H1 is used for the main heading (typically the page title), H2 for subheadings, H3 for headings, H4 for subheadings, H5 for notes, and H6 for subnotes, creating a hierarchical structure. Google uses this heading structure and hierarchy to understand the content of a page, which serves as a guide for indexing and search rankings. (This is one of the evaluation criteria, but not the only one.)

When attempting to structure correctly

h1: Title > h2: Chapter > h3: Chapter title > h4: Subheadings with fewer titles > h5: Notes and emphasised content

The order from h1 to h6 will be maintained.

The font size of h tags is typically set by the theme you are using, with font sizes decreasing in the order h1 > h2 > h3 > h4 > h5 > h6. In practice, you may find that the default settings do not meet design requirements. For example, you might feel that the h2 tag is too large or that you want to make the weight (boldness) lighter. Additionally, there may be cases where you want to use h5 for design purposes, but it would fall below h4 in the hierarchical structure, resulting in a violation of structural rules.

h1: Title > h2: Chapter > h3: Chapter title > h5: Notes or important points

From a font size perspective, there are cases where you may want to use h5 directly from h3 headings without going through h4. When I first built the website, I also considered the font size appearance rather than the order of h tags, but from an HTML structuring perspective, this approach is not recommended. When using Google Speed Insights to check the structure with this configuration, a message indicating that the structure is not properly structured will appear.

In cases like this, we will set styles to arrange h tags in order in the text while maintaining the design and structure.

Bootstrap also provides this h tag, which, like the p tag, allows you to change the size and weight using utility classes.

<h3>This will become the default for h3.</h3>
<h3 class="fs-5">I tried changing the size with fs-5.</h3>
<p class="menu fs-3 fw-medium">Create headings using P tags.</p>

This will become the default for h3.

I tried changing the size with fs-5.

Create headings using P tags.

By setting the utility class as shown above, you can easily change the size. In the third line, the utility class is used in the P tag to display it in the same way as the h3 tag. However, if you want to use emphasised text that is not a heading within the text, using this format allows you to prioritise design while maintaining the structure of the page. This enables you to use h tags purely as headings without using them as font size components.

Like P tags, specifying classes for each h tag is tedious, so we will change the default settings. We will modify the settings in a separate CSS file to utilise Bootstrap's default settings while customising them to our desired format. The following is an example of h3 tag settings. By default, h3 tags are too large when displayed on mobile devices, so we have made them responsive. This code specifies that h3 tags should be displayed at a size appropriate for PCs, starting from mobile devices.

@media (min-width: 1200px) means that if the screen size is 1200px or larger, the font size will be displayed as 1.6rem.

h3,
.h3 {
   font-size: calc(1.1rem + 0.6vw);
   font-weight: 600;
}
@media (min-width: 1200px) {
   h3,
   .h3 {
       font-size: 1.6rem;
       font-weight: 600;
   }
}

Structuring is often associated with SEO, but structuring is simply a guide to ensure that a website complies with web technology standards. Its essence is not to rank higher in search results for SEO purposes, but rather to build a website based on web technology standards, which in turn ensures that search engines can correctly interpret and display the information on the page.

1-2.Enable the use of separate CSS files.

Bootstrap allows you to change the design by modifying the default SCSS files and exporting them as CSS files. However, it can be daunting to modify the excellent settings provided by Bootstrap, and the thought of having to revert the changes if needed makes it a task that is often put off.

First of all, the stylesheets that make up the design of Bootstrap 5 themes are compiled in a file called style.css. This file contains all styles and exceeds 12,000 lines.

Extracting the necessary classes from SCSS and writing the settings to custom CSS can also be quite tedious. (This process should be followed in the first place.) In cases where multiple people are managing the design of a large-scale website, it is best to use the SCSS editing provided as a standard feature in Bootstrap, as it is easy to manage and improves work efficiency.

However, when I wanted to change some of the styles on my small, personally operated website, I found that it was easier to write the styles for the classes and tags I wanted to change directly in CSS rather than exporting them from SCSS. This method is more convenient both in terms of workflow and management, so I have chosen to use it.

To prepare and use this separate CSS for style changes, add the following to theme.libraries.yml.

The name of the additional CSS file is themecustom.css.

theme.libraries.yml

global-styling:
 css:
   theme:
     css/style.css: {}
     css/themecustom.css: {}  < //Add this line

By adding the above settings to theme.libraries.yml, you can change the style without changing the default stylesheet.。

Explaining all components and classes would make this article too long, so I will give some configuration examples.

I frequently use the Card component provided by Bootstrap on my pages. A card is a block with borders that is very effective for organising articles visually, so I use it in various places, such as to emphasise important points in articles or to summarise the content halfway through an article.

We are making changes to the CSS, but these changes are modifications to the classes originally set by Bootstrap. The reason for this is that the components provided by Bootstrap have very detailed responsive settings by default. Rather than rewriting these settings from scratch in the style sheet, it is more efficient to utilise the default settings and only modify the style sheet to change the displayed design. This approach is also superior to manually configuring responsive settings, as it allows for greater flexibility and customisation.

We also use this card component for list pages of views and taxonomies.

css

card CSS // described in themecusutom.css

div.card {
    padding: 2.5% 0% 2.5% 0%;
    margin-top: 30px;
    margin-bottom: 30px;
    overflow: hidden;
    border-radius: 6px 6px 6px 6px;
    border-width: 8px 1px 1px 1px;
    border-color: #333333 #cccccc #cccccc #cccccc;
    border-style: solid;
    background-color: #ffffff;
}

html

html // Directly written in html within the article

<div class="card">
    <div class="card-body">
        <p class="fs-5 fw-medium">
            CardのHTML
        </p>
        <p>
            I use this component a lot.
        </p>
        <p class="fs-5 fw-medium">
            <a href="https://getbootstrap.jp/docs/5.3/components/card/" target="_blank">Bootstrap 5 Card Documentation</a>
        </p>
        <p>
            I am using the Card component provided by Bootstrap 5. For more details about the Card component, please refer to this page.
        </p>
    </div>
</div>

The above description will be displayed as follows.

We have also modified the styles of other components provided by Bootstrap, but the article would become too long, so we have omitted the details.

Originally, the Top menu was designed as a burger menu to unify the interface across PC and mobile devices. The advantage of a burger menu is that it summarises and consolidates menu content into a compact space, typically hiding the menu contents and displaying them only when needed. This interface is ideal for mobile menus with limited display space and is widely adopted in mobile menus across many websites, not just mine, so you may have encountered it frequently.

I thought that by using the same interface on both mobile and PC, visitors would not get lost when browsing the site, so I decided to use the burger menu on PC as well.

The site was originally set up with this menu structure, but when navigating the site from the menu on a PC, there is an extra action to expand the burger menu compared to a normal text link menu.

I also needed to perform this action when checking articles and links within the site, and it was actually quite tedious, so I took advantage of the site redesign to change the PC burger menu to a regular text menu.

3-1. Standard Drupal menu

Drupal includes standard features for site construction > menus, allowing you to edit the elements that make up the top menu. The top menu is constructed by editing this section. However, if you want to change the design, you need to write the design elements in TWIG. This is the standard menu editing process in Drupal, but it can be time-consuming if you're not familiar with it. (Once the design is more solidified, we plan to switch to writing in TWIG, as this will make it easier to add items to the menu.) One of Drupal's advantages is its block and block layout functionality, which offers a high degree of customisation.

I am not using the menu provided by Drupal, but instead creating a separate block for the menu and calling it up using block layout. The advantage of this approach is that it allows for easy configuration, such as switching between Japanese and English menus, or switching between menus for articles and menus for list pages.

Drupal's translation feature does not translate text installed internally, so Japanese and English menus must be created separately. For this reason, I do not use Drupal's standard menu feature, but instead use a dedicated block and switch between menus using block layouts.

3-2.Fixed-Top

I have set the position of the Top menu to Fixed-Top. With a Fixed-Top menu, the menu remains at the top of the page even when you scroll down the site. This makes it easier for visitors to navigate to other articles or pages, which is why I have chosen this layout. To apply this Fixed-Top setting to Drupal's standard menu, Twig configuration is required. The advantage of Twig configuration is that it reflects changes in the Drupal admin interface's menu settings, allowing menu construction to be easily performed via a GUI. In my case, I directly modify the HTML for the menu, and since my site is still under construction, I frequently make design changes. Therefore, I do not customise the Drupal standard menu using Twig but instead use a separate menu block to freely adjust settings as needed.

3-3.Burger menu

This is the burger menu that was used in the past. It has now been changed to a regular text menu. The HTML source code is long, so it has been omitted. For details, please refer to the Bootstrap documentation.

<nav class="navbar navbar-dark fixed-top pt-2 pb-0" style="background-color:#333333;">
    <div class="container-md">
// Specify the site title here.
        <p class="menu">
            <a class="navbar-brand fw-bold fs-3" href="/top">Interest.</a>
        </p>
// Burger menu
        <p class="menu">
            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        </p>
// Menu after expansion: Specifies off-canvas.
        <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
            <div class="offcanvas-header">
                <p class="menu">
                    <button class="btn-close btn-close-white" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </p>
            </div>
            <div class="offcanvas-body">
                <ul class="navbar-nav justify-content-end flex-grow-1 pe-3 navbar-nav-scroll">
// Menu after expansion: Text menu
                    <li class="nav-item">
                        <a class="nav-link active" href="/top" aria-current="page">Home</a>
                    </li>
// Menu after expansion: Drop-down menu
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Articles related to Drupal and the web.</a>
                        <ul class="dropdown-menu dropdown-menu-dark">
                            <li>
                                <a class="dropdown-item" href="/article1">Article 1.</a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="/article2">Article 2.</a>
                            </li>
// Omitted below
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>

The following sample is originally fixed-top, but since it will be published in an article, the fixed-top specification has not been applied. The following is the actual menu bar that was used, so you can click on each link. To return to the article, please use the browser arrow button.

A menu bar like the one above will be created.

3-4.Text menu

This is the text menu currently in use. The nav class is specified as navbar-expand-lg. The HTML source is omitted as it is too long. For details, please refer to the Bootstrap documentation.

<nav class="navbar navbar-expand-lg bg-dark fixed-top" data-bs-theme="dark">
// Specifying navbar-expand-lg will make it a text menu.
  <div class="container-md">
// Specify the site title here.
    <a class="navbar-brand fw-bold" href="/top">Interest.</a>
// Burger menu: With responsive settings, the menu will be displayed as text on PCs and as a burger menu on mobile devices.
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
// From here, the navigation bar text menu appears.
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
// The font colour of the parent element is specified as link-light. The hover element is specified as link-opacity-75-hover.
        <li class="nav-item">
          <a class="nav-link link-light link-opacity-75-hover fw-bold" href="/top">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link link-light link-opacity-75-hover fw-bold" href="/creation">Creation</a>
        </li>
// The font colour of child elements is specified as link-danger.
        <li class="nav-item">
          <a class="nav-link link-danger link-opacity-75-hover" href="/term-article-drupal">Drupal.</a>
        </li>
        <li class="nav-item">
          <a class="nav-link link-danger link-opacity-75-hover" href="/term-article-web">Web.</a>
        </li>
// Omitted below
// Language switching is done using a drop-down menu.
        <li class="nav-item dropdown">
          <a class="nav-link link-light link-opacity-75-hover dropdown-toggle fw-bold" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Languege
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="/top">Japanese</a></li>
            <li><a class="dropdown-item" href="en/top-en">English</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Originally, it is fixed-top, but since it is posted in an article, we have not specified fixed-top. The following is the actual menu bar in use, so you can jump to each link. To return to the article, please use the browser arrow button.

A menu bar like the one above will be created.

The navigation menu provided by Bootstrap 5 is responsive by default, allowing you to create a simple HTML structure using the basic ul and li tags to list menu items. Below is a link to the documentation for Bootstrap 5's navigation bar. This should be very helpful for anyone looking to create a menu bar using Bootstrap.

Conclude.

In this article, I have briefly summarised the classes and components provided by Bootstrap 5 that I used when making design changes. I considered providing more detailed explanations of the classes and components I used, but decided that this would make the article too long and that readers would not necessarily want to use my exact style. Instead, I have provided a summary and links to the Bootstrap 5 documentation to help those who are interested in using Bootstrap 5.

Design thinking.

As I mentioned in this article, I believe that the most important factor in design is the readability of the article. While creating a modern and excellent design is also part of design thinking, since the content of my articles is text-based, I prioritise a design that makes the text easy to read, which is why I have adopted the current format. As my design vocabulary and CSS knowledge become more extensive, I may explore different design approaches in the future.

UI / UX.

UI: User Interface and UX: User Experience are fundamental concepts in website design. I haven't given them much thought myself, but these terms have become increasingly important in recent years. It goes without saying that designs should be easy to use and provide visitors with useful information.

Although I was unable to introduce it this time, while making design changes, I added Japanese/English language switching to each page, replaced the global navigation with anchors within the articles, and added navigation to the footer. I believe this will make my long articles, which are difficult to read, easier to read again.

In the next section, we will explain how to switch between Japanese and English, the navigation bar in the footer, and the hero content.