Color Blocked Home Pages

The home pages for sites such as Center for Open Science and Enertiv illustrate a “color blocked” design pattern where the background color is used to separate the sections of the site.

This is simple to implement.

First, create a style.css file with classes similar to this:

.grey-background {
  background-color: lightgray;
  height: 200px;
}

.white-background {
  background-color: whitesmoke;
  height: 200px;
}

.black-background {
  background-color: black;
  color: whitesmoke;
  height: 200px;
}

.grad-background {
  background: url('gradbackground.png') no-repeat center center fixed;
  background-size: cover;
  height: 200px;
}

.colorblocktop {
  padding-top: 20px;
}

The height attribute is optional but useful if you want a consistent height across all blocks. If you simply want consistent padding around your content with variable heights, you can delete the height attribute and (for example) add a padding-bottom attribute to the colorblocktop class.

In the HTML file, your outermost div elements should set the color. Note that any Bootstrap 5 container classes should be inside these divs. For example:

<div class="grey-background">
  <div class="container colorblocktop">
    <h1>Bootstrap 5 Color Block</h1>
    <p>Welcome to a sample page formatted using Bootstrap 5.</p>
  </div>
</div>

<div class="white-background">
  <div class="container colorblocktop">
    <h1>Bootstrap 5 Color Block</h1>
    <p>Welcome to a sample page formatted using Bootstrap 5.</p>
  </div>
</div>

<div class="black-background">
  <div class="container colorblocktop">
    <h1 style="color: whitesmoke">Bootstrap 5 Color Block</h1>
    <p>Welcome to a sample page formatted using Bootstrap 5.</p>
  </div>
</div>

<div class="grad-background">
  <div class="container colorblocktop">
    <h1>Bootstrap 5 Color Block</h1>
    <p>Welcome to a sample page formatted using Bootstrap 5.</p>
  </div>
</div>

Finally, note that when you have a dark background, you may have to manually tweak the font color. For example, the black-background class sets the color attribute to whitesmoke, but this does not affect the h1 text, so a style parameter is added to set the color of the h1 explicitly.

Source code: https://github.com/ics-software-engineering/bootstrap-5-color-blocking

Here’s a short screencast reviewing this approach: