Styleguide

The purpose of the styleguide is to show the various styles that are present on the site and to demonstrate how they can work in concerpt. The body copy is set in PT Serif at 21px (rem equavalient) with a colour of #444 Headings are set in PT Sans and have a colour of #222.

The typography uses the Augmented Fourth modular scale. You can see an example below and also on Type Scale

Heading 1

Heading 2

Heading 3

Heading 4

Headings 4, 5 and 6 all have a border. They are small and so need that little extra flourish to distinguish themselves from the rest of the copy.

Heading 5

So, above is a 5th level heading. Cool.

Heading 6

Heading 6 isn't used very much on this site; but it's nice to know it's there, you know?

Images

Images should not be placed directly beneath a heading. There should always be some content to give some context before actually presenting an image.

(image: http://placehold.it/835x600 class:alignfull alt:This is the alt tag for the image title:This is the image title)

Images are centered and extend beyond the constraints of the content. This draws more attention to them and breaks up the boxy nature of the left aligned content. (image:http://placehold.it/200 class:alignleft alt:This is the alt tag) Images can be aligned to the left or to the right within content as well. For smaller images apply the .alignleft or .alignright class to get the desired effect.

Speaking of content, the links use a linear-background gradient to achieve a better underline. Find out how on Medium.

Code

This paragraph has some code in it. It also has a lovely keyboard shortcut ⌘ + C which will never break onto two lines.

Here is some code:

<script src="jquery.js"></script>
<script src="dist/animatecss.min.js"></script>
<script>
  $(document).ready( function(){
   $('#your-id').animateCSS("fadeIn");
 });
</script>

Here is some code that is embedded from GitHub:

Lists

  1. This is the first list item.
  2. This is the second list item.
  • Red
  • Green
  • Blue
  1. Lists can have sublists
    1. This is an example of a sublist
    2. This list is ordered
    3. The same as the parent
  • Unordered lists can have sublists too
    1. They can be ordered
    2. They can be unordered

Some headings have links in them

While the use of links in headings is discouraged, they work none-the-less.