styleguide.md

title	permalink	layout	exclude_from_search	excerpt
Style Guide	/styleguide/	page	true	Style guide for Brightly Colored.

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

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 highlighted text.

• 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 level three heading

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 .photo-grid--one.

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',
    ]

Use a figure with the class of .photo-grid .photo-grid--three.

What about a table?

Let's look at some data!

|---

Page	Internet Speed	DOMContentLoaded	Load
Home (Before)	110mb/s	1.10s	1.10s
Home (After)	110mb/s	331ms	1.03s
Home (Before)	3G Slow	9.35s	9.35s
Home (After)	3G Slow	2.50s	5.29s
Article (Before)	3G Slow	9.01s	9.01s
Article (After)	3G Slow	2.30s	4.92s

//--------------------------------
// _footer.scss
// -------------------------------

.site__footer {
  background-color: $slate;
  color: rgba(white, 0.6);
  margin-top: 4rem;
  padding: 2rem 0;
  small {
    color: rgba(white, 0.4);
    display: block;
    font-size: 0.9rem;
    margin-top: 2rem;
    width: 100%;
    @media #{$medium-up} {
      font-size: 0.75rem;
    }
  }
  p {
    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.

Use a figure with the class of .photo-grid .photo-grid--two.

And that's it. Oh wait… I forgot something.¹

Footnotes

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