January 24, 1981 Style Guide

This entry serves as a markup and style guide for my personal reference. Beyond that, there’s no value here. Sorry!

Note: I’m using the Markdown ExpressionEngine plugin to format my blog posts, so the parsed output has been automatically generated for me based on the syntax rules documented on John Gruber’s site.

This is an H2 header

Included in each of these example paragraphs are inline elements, such as code, strong, em, and a href. Their purpose is to help me visualize the final, styled appearance of my blog posts, and give me an active example to work with and style via CSS.

In addition, I’ve employed the power of JavaScript and Roger Johansson’s automatic pullquotes function to take selected statements and emphasize them, without having to change their semantic meaning. For instance, in order to feature this statement, all I do is wrap it in a span element, with a specific class.

Wouldn’t you guess, this is an H3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean magna tortor, luctus sit amet, nonummy non, consequat ac, augue. Cras quis lacus et est pretium dignissim. In ut velit vel erat accumsan vestibulum. Sed a felis. Nam dictum nisl id sem. Praesent pretium enim quis dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus scelerisque. In mauris risus, dictum sed, sagittis quis, commodo id, est.

Nunc eu velit et justo tincidunt sollicitudin. Cras sagittis purus. Fusce sed mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed feugiat feugiat purus. Cras a mi. Donec ultricies neque ut felis.

And here’s an H4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean magna tortor, luctus sit amet, nonummy non, consequat ac, augue. Cras quis lacus et est pretium dignissim. In ut velit vel erat accumsan vestibulum. Sed a felis. Nam dictum nisl id sem. Praesent pretium enim quis dolor. In the next paragraph, I include an example of the abbr element.

In mauris risus, dictum sed, sagittis quis, commodo id, est. Nunc eu velit et justo tincidunt sollicitudin. Cras sagittis purus. Fusce sed mi EE. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed feugiat feugiat purus. Cras a mi. Donec ultricies neque ut felis.

Hooray for the H5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean magna tortor, luctus sit amet, nonummy non, consequat ac, augue. Cras quis lacus et est pretium dignissim. In ut velit vel erat accumsan vestibulum. Sed a felis. Nam dictum nisl id sem. Praesent pretium enim quis dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus scelerisque. In mauris risus, dictum sed, sagittis quis, commodo id, est. Nunc eu USA velit et justo tincidunt sollicitudin. Cras sagittis purus. Fusce sed mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed feugiat feugiat purus. Cras a mi. Donec ultricies neque ut felis.

And finally, the elusive H6

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean magna tortor, luctus sit amet, nonummy non, consequat ac, augue. Cras quis lacus et est pretium dignissim. In ut velit vel erat accumsan vestibulum. Sed a felis. Nam dictum nisl id sem. Praesent pretium enim quis dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus scelerisque.

Lists

Now, this guide wouldn’t be complete without some additional block-level elements. Let’s start with lists.

  • This is a list item
  • This is a list item
  • This is a list item with a link!
  • This is a list item
  • This is a bold list item
  • This is a list item, too!

That wasn’t so bad now, was it? How about an ordered list?

  1. This is an ordered list item
  2. This is an ordered list item with a link!
  3. This is an ordered list item wrapped in a span
  4. This is a bold ordered list item
  5. This is an ordered list item

Okay, now that we’ve gotten those out of the way, how about throwing in some advanced list techniques? Yes, let’s add a paragraph inside of some of these list items:

  • This is a list item

    This is an additional paragraph inside this list item! Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean magna tortor, luctus sit amet, nonummy non, consequat ac, augue. Cras quis lacus et est pretium dignissim. In ut velit vel erat accumsan vestibulum. Sed a felis. Nam dictum nisl id sem. Praesent pretium enim quis dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus scelerisque.

  • This is a list item

    This is an additional paragraph inside this list item! Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean magna tortor, luctus sit amet, nonummy non, consequat ac, augue. Cras quis lacus et est pretium dignissim. In ut velit vel erat accumsan vestibulum. Sed a felis. Nam dictum nisl id sem. Praesent pretium enim quis dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus scelerisque.

  • This is a list item

    This is an additional paragraph inside this list item! Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean magna tortor, luctus sit amet, nonummy non, consequat ac, augue. Cras quis lacus et est pretium dignissim. In ut velit vel erat accumsan vestibulum. Sed a felis. Nam dictum nisl id sem. Praesent pretium enim quis dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus scelerisque.

Wheew! Great stuff!

Blockquotes

Now, let’s do blockquotes, since I like to include a lot of quotation and citations in my posts.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean magna tortor, luctus sit amet, nonummy non, consequat ac, augue. Cras quis lacus et est pretium dignissim. In ut velit vel erat accumsan vestibulum. Sed a felis. Nam dictum nisl id sem. Praesent pretium enim quis dolor.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus scelerisque. In mauris risus, dictum sed, sagittis quis, commodo id, est. Nunc eu velit et justo tincidunt sollicitudin. Cras sagittis purus. Fusce sed mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed feugiat feugiat purus. Cras a mi. Donec ultricies neque ut felis.

Here’s a more complicated blockquote:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean magna tortor, luctus sit amet, nonummy non, consequat ac, augue. Cras quis lacus et est pretium dignissim. In ut velit vel erat accumsan vestibulum. Sed a felis. Nam dictum nisl id sem. Praesent pretium enim quis dolor.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus scelerisque. In mauris risus, dictum sed, sagittis quis, commodo id, est. Nunc eu velit et justo tincidunt sollicitudin. Cras sagittis purus.

  • Fusce sed mi
  • Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus
  • Sed feugiat feugiat purus. Cras a mi

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean magna tortor, luctus sit amet, nonummy non, consequat ac, augue. Cras quis lacus et est pretium dignissim. In ut velit vel erat accumsan vestibulum. Sed a felis. Nam dictum nisl id sem. Praesent pretium enim quis dolor.

Code

Here’s a codeblock from Geek & Mild’s navigation:

  1. <ul id="nav">
  2. <li><a href="/" class="home">Home</a></li>
  3. <li><a href="/about" class="about">About</a></li>
  4. <li><a href="/archive" class="archive">Archive</a></li>
  5. </ul>

Displaying example code is probably the hardest thing to do with the Markdown EE because it parses the actual example EE code. To avoid that problem, I use TextMate’s ability to convert characters to entities.

As an example of inline code: Notice how I use weblog="seanblog|seanasides" to delineate two blogs, separated by the pipe character.

Grammar usage, formatting and style

As far as grammar usage and style goes, I tend to follow the rules outlined in the Gregg’s Reference Manual. Most of my grammar decisions are made subconsciously, but some are deliberate:

  • Capitalizing the first word after a colon I’ve made the decision to not capitalize the first word after the colon, as it seems the more common practice among writers whom I respect [070909]
  • Using a space before and after a trailing thought signified by an ellipsis
  • Using a space before and after an interrupted thought signified by an em-dash

Images & figures

As of 070526 I have yet to come up with a satisfying solution for images in posts. I’d like to have a standardized ruleset, including classes and sizes, but haven’t yet realized or found a good one.

Currently I use three classes for img elements:

  1. imgcenter — used for images meant to span the width of a post, or at least reserve their own line
  2. imgright — used for images meant to float to the right
  3. imgleft — used, obviously, for images meant to float to the left

I know, I know. I shouldn’t be delineating CSS classes based on appearance — but as I said, I’ve yet to find or come up with a better way.

0 Comments