Styleguide

Post Styles

By Author Name

Headings

<h1> This is the main section heading.

On this site, it's used as the title of the page.

<h2> This is the second level page heading

Used as a section heading beneath the main heading.

<h3> This is the third level page heading

Used as a heading beneath the second level heading.

<h4> This is the fourth level page heading

Used as a heading beneath the fourth level heading.

<h5> This is the fifth level page heading

Not typically used on this site.

<h6> This is the sixth level page heading

Not typically used on this site.

Paragraphs

This is a paragraph. Paragraphs are wrapped in <p> tags.

No way. First, I'm gonna fall in love with one of those little guys, and then I'm gonna fall out of love.

And then I'm gonna totally fake die, of a fake heart attack!

Stressed text

<strong> tags are wrapped round text that is important.

Do you think I have the goods, Bubblegum? Because I am into this stuff!

Emphasised text

For emphasis, the <em> tag is used.

Imagination is for Turbonerds who can't handle how kickbutt reality is!

Asides

Asides are marked up using the <aside> tag. They can be used for content considered separate from the page content.

Abbreviations

Abbreviations are marked up using the <abbr> tag. To mark up an abbreviation like LSP, this code is used: <abbr title="Lumpy Space Princess">LSP</abbr>

Links

This is a link, it is marked up like this: <a href="">Link Text<a>.

Blockquotes

A <blockquote> tag can be wrapped round a paragraph that is a quote. A <cite> can be added after the quote. This isn't strictly the correct use of the tag because it doesn't allow for someone's name, but there isn't a suitable alternative for encapsulating a reference to a work and a person's name.

Slaps, that cat was kicking my buns. And it might of finished my buns it if wasn't for Jake's stank

Finn the human

<blockquote>
  <p>Slaps, that cat was kicking my buns. And it might of finished my buns it if wasn't for Jake's stank</p>
  <p><cite>Finn the human</cite></p>
</blockquote>

Lists

Ordered List: Top 3 Princesses in Adventure Time

  1. Princess bubblegum
  2. Hot dog princess
  3. Lumpy space princess

Unordered List: Places in the Land of Ooo

  • Cloud Kingdom
  • Candy Kingdom
  • Lumpy Space

Nested Ordered List: Characters in Adventure Time

  1. Robots
    1. BMO
    2. NEPTR
  2. Worms
    1. King Worm
    2. Shelby

Nested Unrdered List: Characters in Adventure Time

  • Robots
    • BMO
    • NEPTR
  • Worms
    • King Worm
    • Shelby

Images

An important image should be wrapped in a <figure> tag. For this tag to be used, it must still make sense if the figure were separated from the document.

A picture from Adventure Time, my favourite cartoon about the adventures of Jake the dog and Finn the human.
<figure>
  <img src="/perch/resources/imageexample1.png" alt="Picture of Finn and Jake from Adventure time doing a fist-bump." />
  <figcaption>A picture from Adventure Time, my favourite cartoon about the adventures of Jake the dog and Finn the human.</figcaption>
</figure>

To pull an image to the left, give it a class of pull.

To push it to the right, give it a class of push.

These classes can also be applied to other elements, such as <figure> and <div>.

The alt text needs to describe the image in a way that would be useful to someone if the image failed to load.

Interviews

Interviews have a small avatar of the people speaking next to what they're saying. This is just an image tag. The alt="" is left empty because the image isn't essential to the understanding of the text, and the name would be repeated.

I chose to use a <b> tag for the name because it seemed appropriate based on the new interpretation of the tag.

The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

HTML, the living standard by WHATWG

The image only needs to be added to the first paragraph of many spoken by the same person, until the person speaking changes.

Marcus: Hello Paul, how are you? I’ll be very amazed if this is a very small mini-micro boagworld because they never are!

<img class="avatar" src="/perch/resources/avatarmarcuslillington-.jpg" alt=""/><p><b>Marcus</b>: Hello Paul, how are you? I’ll be very amazed if this is a very small mini-micro boagworld because they never are!</p>

Code

A ver small snippet of code can be marked up using just the <code> tags. If it's a longer snippet, use the following:

<p>Hello world</p>
<pre class="example"><code><p>Hello world</p></code></pre>

Code will need to be written using less than & lt; and greater than & gt; encoding (without the space after the ampersand).

Audio

Interview articles have audio. This can be embedded using the <audio> tag. This displays a media player in modern browsers. In older browsers, we need a fallback, which will just be a link to the file.

All large media files like audio and video are hosted on Amazon S3.

<h2>Listen to the interview</h2>
<audio controls="controls">
  <source src="http://s3.amazonaws.com/scrunchup/brian-suda-designing-with-data.ogg" type="audio/ogg" />
  <source src="http://s3.amazonaws.com/scrunchup/brian-suda-designing-with-data.mp3" type="audio/mp3" />
  <a href="http://s3.amazonaws.com/scrunchup/brian-suda-designing-with-data.mp3">Listen to this interview (.mp3, 7.4MB)</a>
</audio>

Author Name

Author Bio