Style Guide

Use the .small__right class for this particular styling.

This page exists to show the different components and pieces of The Bold Report. More than anything, I maintain it because I think style guides are interesting.

This website is currently set in Whitney for primary and secondary text, and Whitney Condensed for headings.

Heading Two

Secondary headings are used to separate portions of text. I don’t ever use links in headings unless it’s a link post. Primary headings are only used once in the page title or post title. Links in regular text look like this.

This image style can be used with the .extendout class.
# This is how you use the figure tag
{% figure className /path/to/img.jpg "Caption in quotes" %}

As normal, you’ve got styles for inline code, italics, and bold text. Inline code is used when the code isn’t multi-line. Italics are used for emphasis, and bold is hardly used but when it is, it’s used for the necessary visual contrast.

  • This is an unordered list.
  • Second list item
    • Here’s a second-level list item
  • I sometimes use lists in articles, but quite rare. Every once in a while, I use a list item that has a paragraph in it which has a little more information.
Use the .alignright class for this image styling. Use of images is encouraged.
Heading Five

Level five headings are not used often, but are used to list articles of further reading. When that’s the case, we display the link — then give a bit of context to the article separated by an em dash.

I use horizontal rules for separating ideas in an article.


  1. Here’s a numbered list
  2. I don’t use these much either, except for the annual review.
  3. This is an indented list
  4. another item on this list
  5. Here’s a Goal Title
    For the annual review, I use the list items to write goals and then write a little bit about them.
For this image styling, use the .alignleft class. I like to use captions for the most part, not required though.

Here’s a blockquote for you. These are mostly used in link posts to quote writing from elsewhere. They’re usually preceded by the person who said or wrote the quote.

Ben Brooks on The Brooks Review:

There’s a lot of good looking options out there, but I wanted to be able to test something affordable for a change. So I reached out to Tom Bihn and asked if I could stop by to test out a few different bags, and possibly swipe one for a while to test out.

Use a figure with the class of .photo-grid. Then, each image has their own class to determine size within the grid. I've got .grid-thirds and .grid-half at my disposal.

I use Github Flavored Markdown for code blocks. In other words, I use three back ticks. I always declare the language that’s being used in the code block.

# _config.yml
markdown: redcarpet
markdown_ext:  markdown,mkdown,mkdn,mkd,md

redcarpet:
  extensions: ["tables", "autolink", "strikethrough", "space_after_headers", "with_toc_data", "fenced_code_blocks", "no_intra_emphasis", "footnotes", "smart"]
//--------------------------------
// _footer.scss
// -------------------------------

.site__footer {
  background-color: $slate;
  color: rgba(white, .6);
  margin-top: 4rem;
  padding: 2rem 0;
  small {
    @extend %sans;

    color: rgba(white, .4);
    display: block;
    font-size: .9rem;
    margin-top: 2rem;
    width: 100%;
    @media #{$medium-up} {
      font-size: .75rem;
    }
  }
  p {
    @extend %sans;

    font-size: 1rem;
    line-height: 1.5;
  }
  a {
    text-decoration: none;
  }
  .container {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    @media #{$large-up} {
      width: 100%;
    }
  }
}

Let’s Test That Fluid Type

Lorem ipsum dolor sit amet, consectetur adip*isicing elit, sed do eiusmod *tempor incididunt ut labore et dolore magna aliqua.

And that’s it. Oh wait… I forgot something.1

  1. Yep. These are footnotes, and this is what they look like. Not a huge deal, but sometimes very necessary.