Article 4: Basic styling using bootstrap

2022-02-22

Goal

In this article we're finally going to make our blog not look like crap anymore. We will start to introduce a little bit of styling to make the usability better. We can then also start to promote our blog a bit more. After looking around which CSS libraries are out there, I decided to go with bootstrap for now. The main reason being, that we don't want to waste a lot of time into styling the content ourselves. I'd rather have a nice preset and maybe add a nice theme later on. Since we also do not want to deal with 3rd party servers, we will host the necessary files ourselves.

What do we need to do?

  1. add bootstrap library to our source files
  2. apply necessary classes to the relevant pages
  3. summary

Implementation

1. add bootstrap library to our source files

First thing we need to do is to download bootstrap. According to bootstrap content versions we will use the full minified version. Therefore we create a CSS and a JS folder in our content directory. Afterwards we copy bootstrap.min.css and bootstrap.bundle.min.js to the respective directories. To prevent caching when we update to a later bootstrap version, we also include the version in the file name (bootstrap-5.1.3.min.css,bootstrap-5.1.3.bundle.min.js).

Next we need to include the libraries in our webpage. So for every page that we want to have bootstrap, we need to add <link rel="stylesheet" href="/css/bootstrap-5.1.3.min.css"> to the head section of the page in order to load the stylesheet. We also need to add <script src="/js/bootstrap-5.1.3.bundle.min.js"> to the bottom of the body section. Javascript should be loaded at the end of the page to prevent it from blocking the rendering of the rest of the page, while the script is loaded and parsed.

More metadata

It's also a good idea to give the browser a bit more information how to display our webpage. Therefore we include two more special tags in the head of the webpage:

<meta charset="utf-8">
Tells the browser the text in our webpage in encoded in UTF-8, which is a standard to encode text for computers.

<meta name="viewport" content="width=device-width, initial-scale=1">
Gives the browser information about the area of the window in which web content can be seen. More information can be found on mozilla.org.

2. apply necessary classes to the relevant pages

We will start with a very basic layout. This includes a header for our page, that has a little bit of navigation, and a footer, that will hold the link to the impressum and the last commit link. For the header we change the part after the body tag in our webpage like this:

<body class="d-flex flex-column h-100">
  <header>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">fanderl.rocks</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
          aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav me-auto mb-2 mb-md-0">
            <li class="nav-item">
              <a class="nav-link" aria-current="page" href="/index.html">Overview</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

This is basically the example from bootstrap sticky footer with fixed navbar. In the content of the body the rough layout is done via a flex container. As we want to have our navigation to be sticky at the top, we add fixed-top to the nav tag. The container for the content of our navbar is a fluid container, which automatically uses the full width of the viewport. The button becomes visible when the viewport becomes small enough. Then the actual navigation items disappear and one can use the button that shows up, to open up a navigation menu on the left side of the screen. In order to position the main content properly, we need to add a little padding on top of main > .container. Thus I created a new custom-styles-1.0.0.css file, added it to our css folder and linked it into our html file. Otherwise I just changed to content to be appropriate for our page.

For the footer I also just basically copied the recommendation from the bootstrap examples page and adjusted the content.

<footer class="footer mt-auto py-3 bg-light">
  <div class="container">
   <a href="impressum.html">Impressum</a> - ...
  </div>
</footer>

The nice thing about this footer is, that it stays at the bottom of the page, even if the article does not take the entire height of the page. That's because mt-auto, what means margin-top: auto;, uses all available space top of the box, thus pushing the box down to the bottom of the page.

3. Summary

In this article we extended our page with some basic styling using bootstrap. The page now has basic responsive features, making it more suitable for devices of all sizes. It also looks (a little) more polished so we might dare to advertise for a broader audience. Of course the whole layout is still very basic and I'm pretty sure we will evolve it over time.