Sample Post Styles

How to style your posts in Ahab

The first paragraph has a different style to invite readers in. (You can also apply this style to later paragraphs by wrapping them in <p class="first">.

cover-image

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Content

First paragraph: Nullam mattis eget lacus non hendrerit. Vestibulum vitae tincidunt est. Mauris vitae condimentum libero. Aenean faucibus, risus vitae euismod vestibulum, metus lacus ultricies tellus, non elementum massa sem quis dolor. Curabitur quis erat nisi. Aliquam ut sapien vehicula, pulvinar erat a, dapibus erat.

Every other paragraph: Quisque nec velit volutpat, imperdiet lacus venenatis, iaculis magna. Sed ligula ligula, ullamcorper aliquet est ac, vestibulum feugiat augue. Nullam eget pulvinar sapien. Donec non interdum nisl, in iaculis lectus. Sed nec lectus odio. Nullam vestibulum metus tortor, ac rhoncus mauris consectetur ac. Sed vulputate vehicula tortor, et vulputate turpis dictum id. Sed vitae mauris vulputate, placerat neque quis, convallis felis. Duis nunc lorem, porta vel molestie eget, egestas et ipsum. Aenean tellus nulla, faucibus ut diam vel, luctus vestibulum dui. Proin faucibus metus in pretium sollicitudin. Cras id convallis enim, a aliquam dolor. Ut a erat id ipsum tristique lobortis in ac risus. Nullam at porttitor tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas id nisl at orci cursus malesuada.

  • Lists are an easy way to segment related content.
  • And they are easier to skim quickly.
  • So use them regularly.

Here's a paragraph between lists.

  1. Ordered lists imply an intentional organization.
  2. Either a hierarchy or structure.
  3. Or a process ordered by steps.
  4. Or just listed by importance.

Example code: Sidebars

<aside class="pull-right">
  <p>
    You can pull information into sidebars by wrapping them in the <code>&lt;aside&gt;</code> tag.
    Add the <code>pull-left</code> or <code>pull-right</code> classes to pull the sidebar left or
    right (inline with your content).
  </p>
</aside>

Quotes

Sometimes you just want to quote something without drawing extra attention to it. That's where normal blockquotes come in handy.

Creativity is just connecting things. When you ask creative people how they did something, they feel a little guilty because they didn't really do it, they just saw something. It seemed obvious to them after a while. That's because they were able to connect experiences they've had and synthesize new things. Steve Jobs

And sometimes you want to give extra emphasis to a quote. Here's a large pullquote.

Design is not just what it looks like and feels like. Design is how it works. Steve Jobs

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ullamcorper lobortis tortor, sit amet aliquam risus dapibus ut. Integer metus sem, cursus vitae quam sit amet, pellentesque sollicitudin lacus. Vestibulum in feugiat ante, vitae condimentum enim. Donec ac augue pellentesque, aliquam lacus ut, ornare nisi. Nullam hendrerit nibh eget adipiscing tempus. Integer vitae lacinia lorem, id tempor nibh. Pellentesque egestas et massa a bibendum. Proin vitae pharetra mauris, id vehicula metus. In magna tellus, placerat ut molestie vitae, luctus sed leo. Duis semper metus sit amet diam interdum, ut consequat mi mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse rhoncus urna eu imperdiet feugiat. Sed pellentesque felis eget mollis fermentum. Praesent sodales lacinia eros. Sed feugiat nisi ante, vitae rutrum dolor sollicitudin vitae.

This is another pullquote that is pulled to the left at wider resolutions. Ahab Theme

Quisque nec velit volutpat, imperdiet lacus venenatis, iaculis magna. Sed ligula ligula, ullamcorper aliquet est ac, vestibulum feugiat augue. Nullam eget pulvinar sapien. Donec non interdum nisl, in iaculis lectus. Sed nec lectus odio. Nullam vestibulum metus tortor, ac rhoncus mauris consectetur ac. Sed vulputate vehicula tortor, et vulputate turpis dictum id. Sed vitae mauris vulputate, placerat neque quis, convallis felis. Duis nunc lorem, porta vel molestie eget, egestas et ipsum. Aenean tellus nulla, faucibus ut diam vel, luctus vestibulum dui. Proin faucibus metus in pretium sollicitudin. Cras id convallis enim, a aliquam dolor. Ut a erat id ipsum tristique lobortis in ac risus. Nullam at porttitor tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas id nisl at orci cursus malesuada.

Fusce luctus eget sapien quis sagittis. Nulla blandit facilisis odio ut consequat. Maecenas bibendum orci hendrerit erat hendrerit, in condimentum velit lacinia. Sed rutrum viverra faucibus. Proin at ipsum ut nunc ultricies commodo. Nullam tincidunt vulputate sem quis tempor. Vivamus nisl erat, congue a diam id, porttitor semper eros. Quisque sit amet ligula euismod, accumsan leo eu, placerat sapien. Nunc consectetur a felis eu interdum. Pellentesque eget diam molestie, accumsan quam et, ultrices enim.

And here is an example of a pullquote that is pulled to the right, just in case you like to swing that way. Ahab Theme

Quisque nec ante urna. Vestibulum vel pretium odio. Nunc nec porta metus, et consectetur arcu. Sed dapibus sem at tellus dictum mollis. Sed eget massa risus. Nullam sodales risus sit amet dictum vestibulum. In pellentesque quam eget laoreet pharetra. Aenean in ultrices nibh, vitae feugiat nulla. Suspendisse sodales ligula vel turpis euismod eleifend. Aliquam vestibulum mi lectus, non mollis dui mattis a. In at sollicitudin justo. Pellentesque sit amet iaculis sapien, ac tempor risus. Donec orci tellus, convallis nec neque sed, semper sollicitudin tortor. Suspendisse accumsan ut magna non ornare. Cras cursus sollicitudin sapien eget cursus. Quisque sed nulla id dolor scelerisque cursus.

Vivamus venenatis, libero at sodales tincidunt, justo dui faucibus neque, elementum rutrum augue nulla ac sem. Mauris ut felis massa. In nulla mauris, viverra eu mattis vel, sodales ut elit. Praesent vitae odio magna. Sed vitae felis sapien. Donec ut ante cursus, sagittis tortor in, ultrices arcu. Aliquam erat volutpat. Proin vitae luctus neque, vitae suscipit orci. Aliquam pretium velit porta, luctus enim at, eleifend ligula. Nulla urna mi, faucibus ornare lacinia vitae, ultricies at nibh. Nunc fermentum mauris diam, et blandit neque rutrum sit amet. Vestibulum vehicula, massa mattis hendrerit congue, sem est eleifend sem, in accumsan urna est eu tellus.

Example code: Pullquotes

<!-- Full pullquote -->
<blockquote class="pullquote">
  <p>
    Pull quotes help engage readers.
  </p>
</blockquote>
<!-- Left pullquote -->
<blockquote class="pull-left">
  <p>
    This is a pullquote that is pulled to the left at wider resolutions.
    <cite>Ahab Theme</cite>
  </p>
</blockquote>
<!-- Right pullquote -->
<blockquote class="pull-right">
  <p>
    This is another pullquote that is pulled to the right at wider resolutions.
    <cite>Ahab Theme</cite>
  </p>
</blockquote>

Data

Column 1 Column 2 Column 3 Column 4 Column 5 Column 6
First column 2 Third column 4 Fifth column 6
First column 2 Third column 4 Fifth column 6
First column 2 Third column 4 Fifth column 6

Example code: Tables

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>First column</td>
      <td>2</td>
      <td>Third column</td>
      <td>4</td>
      <td>Fifth column</td>
      <td>6</td>
    </tr>
  </tbody>
</table>

Images & Media

You can add a cover image to a post by uploading an image and setting its alt text to "cover-image". The cover image will be shown instead of the default background image.

![cover-image](/path/to/image.url)

This is a caption. By default it is centered, but you can add pull-left or pull-right just as you would for images.
<img src="http://uxcellence.com/content/images/2013/Dec/always_look.gif" class="frame" />
<div class="caption">
    This is a caption. By default it is centered, but you can add
    <code>pull-left</code> or <code>pull-right</code> just as you
    would for images.
</div>

There are several other image classes so you can add a little spice to your posts. Want a frame around your image? Add the frame class. Want to have a left or right-aligned image? Add pull-left or pull-right. Want an image as wide as your content (and slightly wider at full resolution)? Add wide.

And now for some lorem ipsum text. Cras tincidunt egestas feugiat. Nulla porta luctus molestie. Sed luctus consectetur ante sit amet laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In suscipit massa sed lacus porttitor auctor. Phasellus ultrices accumsan pellentesque. Maecenas porta pellentesque metus. In accumsan neque sed eros luctus hendrerit. Nullam vel leo euismod, pellentesque ligula eu, bibendum sem. Nullam luctus ultrices risus, ac sagittis magna suscipit eget.

Ut eu interdum dui, et suscipit ipsum. Maecenas iaculis felis eget purus feugiat ullamcorper. Sed est dui, mattis vel faucibus in, viverra quis lacus. Fusce dignissim felis ultricies risus semper, at vehicula nibh malesuada. Sed id malesuada felis, sed laoreet lectus. Morbi venenatis fringilla nibh ut molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum fringilla purus diam, a semper erat blandit id. Donec sollicitudin volutpat nisi, vel dictum arcu condimentum ut.

Nulla egestas vulputate lorem egestas pharetra. Quisque tristique, lacus eu lobortis tempus, est nisi semper urna, nec venenatis dui sem et enim. Curabitur pretium erat vitae pellentesque bibendum. Nam dapibus lectus ligula, et porttitor sem consectetur eget. Integer et hendrerit mi. Nulla facilisi. Praesent ac adipiscing ligula. Ut gravida urna sed porttitor ornare. Suspendisse sit amet ante massa. Nam neque eros, aliquam id magna ut, ultrices molestie ligula. Mauris hendrerit ante ullamcorper enim hendrerit sollicitudin a nec purus. Nam felis sem, ultrices sit amet lectus eu, condimentum molestie risus. Nunc tincidunt iaculis aliquet. Nunc justo felis, vestibulum nec fringilla at, fermentum in nisi. Nam ac dolor augue. Sed ullamcorper elementum nisi, at ornare sem eleifend ac.

Nulla eleifend semper urna et sodales. Vestibulum urna purus, euismod at rhoncus vitae, malesuada a odio. Aliquam tempus condimentum tellus, vitae vehicula ipsum. Fusce volutpat orci ipsum. Sed vitae lacinia nisl, aliquam iaculis sapien. Nunc rutrum lacus non diam luctus vehicula. Pellentesque porttitor purus a facilisis euismod. Nunc sit amet risus ac massa tincidunt cursus. Ut vel fermentum massa. Suspendisse ac molestie purus, at congue diam. Phasellus eget lectus augue. In id pharetra dui. Fusce rhoncus enim tellus, at laoreet arcu venenatis ultrices. Quisque ante lorem, ultricies id lectus vitae, iaculis consectetur neque.

Example code: Images

<!-- Smaller image pulled right -->
<img src="http://gifs.stegrainer.com/billy-crystal-you-look-mahvelous.gif" class="pull-right" />
<!-- Smaller image pulled left -->
<img src="http://gifs.stegrainer.com/alison-brie-shocked.gif" class="pull-left" />
<!-- Full width image with a frame -->
<img src="http://gifs.stegrainer.com/blues-bros-mission-from-god.gif" class="wide frame" />

When embedding video and media into posts, add an enclosing div around the media with a class of media-wrap. Make sure to remove any width and height attributes from the iframe, media, or object itself. The wrapping div and the removal of the size attributes will allow the embedded media to resize with the screen. Want your media to expand beyond the content width at wider resolutions? Add the wide class to the wrapping div.

Example code: Media

<div class="media-wrap">
  <iframe src="//www.youtube.com/embed/17QQcK4l6Yw" frameborder="0" allowfullscreen></iframe>
</div>

Code

This theme uses Prettify.js to make code blocks easier to read.
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

You can also interject <code> directly into paragraphs.

Miscellaneous Classes

class="mute": for "quieter" text

Example code: Miscellaneous classes

<!-- Add muted text  -->
<div class="mute"><code>class="mute"</code>: for "quieter" text</div>
<!-- Or add buttons -->
<div class="button"><a href="#">This is a button</a></div>