Logo / Site Name

Kitchen sink blog post title

All blog posts would have the same layout, maybe with one or two options you might tweak, ex. whether or not it has a header image. This showcases some of the default things that are already set up. Opening paragraph can be styled differently. In this case, I make it larger. More content to follow.

This is the next paragraph. Quisque suscipit et metus sed euismod. Nullam ullamcorper eget quam vitae ullamcorper. Donec imperdiet diam id vestibulum feugiat. Proin at tincidunt purus. Sed volutpat tincidunt dapibus. Vivamus sit amet auctor nisl. Aliquam eu mi tellus. Fusce aliquet imperdiet interdum.

Fusce ac nisi a erat lacinia eleifend eget ac ligula. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam lacinia id sapien vitae ornare. Ut dapibus quam elit, sed pulvinar tellus imperdiet et.

Make some text a link.

The usual inline formatting, plus optional small caps

  • This is italic This is regular
  • This is bold This is regular
  • THIS IS ALL GOING TO BE CONVERTED TO SMALL CAPS This is regular

It’s possible to style all-caps phrases differently, if you want to give them small caps. Ex. “Vancouver, BC” or “EST 2011.” This doesn’t require any code or changes to how you write the blog posts, it happens automatically.

Blockquote

This is more to highlight the fact that it can be styled, rather than to show off this styling specifically:

based on the data from HTTP Archive showing a huge increase in web font usage from 1% in the end of 2010 to 50% across all sites in the beginning of 2015

Code with syntax highlighting

For all your HTML & CSS samples for users:

h1 {
  font-family: 'Implicate';
  font-weight: 400;
}

Inline code works too. Then, you can talk about the @font-face declaration in the middle of a sentence, for example, and have it show up in a monospace font and possibly with a different background colour, as developers often expect.

Code block that is too long, but will scroll nicely:

@font-face {
  font-family: "Implicate";          /* Specify the family name */
  font-style: normal;                /* Specify normal or italic */
  font-weight: 300;                  /* Specify a font weight */
  src: url("implicate-light.woff")
       format("woff");               /* Reference the file and format */
}

Embeds

This requires some customization, but I have it set up to work with CodePen, Twitter, and Instagram for me. We’d configure it specifically for what you need.

All you need to do is paste in the URL, ex:

https://www.instagram.com/p/BtOkgFHBcU1/

…and you’ll get a full embed on the live version of the site.

CodePen

Instagram

Twitter

Wide Image

This is a figure that is wider than the text column width, when there is room:

Quisque hendrerit ut nulla ac luctus. Duis volutpat nibh ac convallis ornare. Morbi tincidunt congue magna, sit amet iaculis erat auctor non.

Figure with caption:

This is the caption

Maecenas accumsan urna in est pellentesque, sed ullamcorper sem condimentum. Nunc ut ex viverra, pellentesque enim sed, efficitur magna.

Breakout figure with caption:

This is the caption

Maecenas vel risus sit amet turpis semper interdum. Vivamus cursus pulvinar sem quis pharetra. Duis turpis felis, pellentesque quis eros in, finibus suscipit nisi. Aliquam non felis diam. Phasellus tempus ultricies imperdiet.

Figure with border:

Quisque hendrerit ut nulla ac luctus. Duis volutpat nibh ac convallis ornare. Morbi tincidunt congue magna, sit amet iaculis erat auctor non. Maecenas accumsan urna in est pellentesque, sed ullamcorper sem condimentum. Nunc ut ex viverra, pellentesque enim sed, efficitur magna.

List items

Maecenas vel risus sit amet turpis semper interdum. Vivamus cursus pulvinar sem quis pharetra. Duis turpis felis, pellentesque quis eros in, finibus suscipit nisi. Aliquam non felis diam. Phasellus tempus ultricies imperdiet.

Ordered list:

  1. Item one
  2. Item two
  3. Item three

Unordered list:

  • An item
  • Another item
  • And another one

Heading h2

In hac habitasse platea dictumst. Nunc massa libero, finibus sed venenatis et, fringilla eget neque. Nulla auctor a nisl ut tempus. Donec sit amet mattis sem.

Heading h3

Mauris fringilla justo nisi, vel ultricies erat tristique sit amet. Donec lacinia lobortis lectus vel faucibus. Aliquam erat volutpat. Donec accumsan odio ipsum, ut pulvinar metus accumsan et. Vestibulum cursus nisi quis felis vehicula, a fringilla neque imperdiet. Proin ac magna nisl.

Heading h4

Fusce dapibus consequat ex ut consectetur. Vestibulum orci leo, laoreet ac lacus sed, viverra tincidunt tortor. In egestas arcu at felis mollis consequat. Quisque a sapien tincidunt, placerat tellus rutrum, malesuada ligula. Nam varius in sapien quis interdum. Curabitur sagittis, diam ac rhoncus maximus, felis nisl molestie lectus, eget dictum elit est vitae dui.

Heading h5

Aliquam auctor, urna ut luctus cursus, turpis nisl eleifend ipsum, at dapibus dui libero in erat. Vestibulum congue porttitor lacus, ut auctor sapien. Ut egestas vel velit ut ornare. Etiam blandit nunc sit amet turpis pulvinar, eu molestie nibh aliquet. Nunc in viverra ipsum, in sagittis mi. Sed vitae mattis diam. Pellentesque quam erat, consequat a velit ac, eleifend dictum ligula. Pellentesque efficitur, nisl vitae sollicitudin ultrices, nulla nibh volutpat neque, et vehicula lectus turpis nec odio.

Heading h6

Ut eu nibh scelerisque, euismod tellus eget, congue tortor. Nullam facilisis viverra augue, sed maximus orci tristique sit amet. Quisque pellentesque pellentesque iaculis. Aenean tincidunt, elit quis pharetra fringilla, orci mauris tempor nisi, vel eleifend lorem ligula nec turpis. Cras nec ullamcorper ex, sit amet commodo dui.

Horizontal break:

Aliquam auctor, urna ut luctus cursus, turpis nisl eleifend ipsum, at dapibus dui libero in erat. Vestibulum congue porttitor lacus, ut auctor sapien.