Style Guide

Use the .small__right class for this particular styling.

This page exists to show the different components and pieces of Brightly Colored. More than anything, I maintain it because I think style guides are interesting. There’s also a writing style guide if you enjoy that type of stuff.

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
    • Here’s another 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.

  • These are pretty cool sometimes, but like I said, don’t really use them all that often.

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. Goal title one
    Some text that explains the goal
  2. Goal title two
    More text that explains the goal and gives context. Tells you why I’m setting this as a goal.

  1. This is a numbered list
  2. It’s got a few list items
    1. This is a numbered list inside of a numbered list
    2. And it’s got two items people
  3. And this is the last item
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.

Again use a figure with the class of .photo-grid. Then, use .grid-thirds-tall and .grid-two-thirds for this styling.

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.