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 Semantic UI container classes should be inside these divs. For example:

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

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

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

<div class="grad-background">
  <div class="ui container colorblocktop">
    <h1 class="ui header">Semantic UI Color Block</h1>
    <p>Welcome to a sample page formatted using Semantic UI.</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/semantic-ui-color-block

Here’s a short screencast reviewing this approach: