This style guide demonstrates the default presentation of elements in Sullivan. The page can also be used as a blueprint for how to present content within the theme in an effective way.
Heading one
Heading two
Heading three
Heading four
Heading five
Heading six
Blockquote
The blockquote tag can be used to display a quote from a person or from another site. It can be as long or as short as you like, and it is displayed like this:
“Among the numerous luxuries of the table…coffee may be considered as one of the most valuable. It excites cheerfulness without intoxication; and the pleasing flow of spirits which it occasions…is never followed by sadness, languor or debility.”
Benjamin Franklin
The blockquote is useful for longer quotes – a block of them, if you will. If you just want to display a small snippet of a quote to add some flair to your content, you can use the pull class.
“It’s great for lifting out a smaller excerpt from your post.”
Add the classes pull left to a paragraph, and it will be pulled to the left and given the special typographic treatment, like the paragraph to the left. You probably don’t want to display a longer quote – such as the Benjamin Franklin quote above – like this, but it’s great for lifting out a smaller excerpt from your post. Oh, and you probably want the surrounding text to be pretty long, so that it can wrap around the pull quote. That’s why this paragraph is still going strong.
“Variety is the spice of life, you know.”
If you want to pull the quote to the right instead, all you have to do is change the paragraph class from pull left to pull right. Variety is the spice of life, you know. You can see it in action in the paragraph floating to the right. Pretty great, huh? Same rule about the length applies here – keep the surrounding paragraph (this paragraph) going until it cradles the pull quote in the soft embrace of letters.
On mobile devices, smaller than 400 pixels wide, the pull quotes are displayed full-width but retain their text alignment. The text in pull left is aligned to the left, and vice versa.
Ordered List
- List Item 1
- List Item 2
- List Item 3
Unordered List
- List Item 1
- List Item 2
- List Item 3
Mixed List
- List Item 1
- List Item 1
- List Item 2
- List Item 1
- List Item 2
- List Item 1
- List Item 2
- List Item 3
- List Item 3
- List Item 3
- List Item 2
- List Item 3
Table Styles
| Table Header 1 | Table Header 2 | Table Header 3 |
|---|---|---|
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
Post Media
Left aligned
This is an image of a typewriter, aligned to the left. It also has a small caption. On smaller screen sizes, the image (and the caption) will clear the content and be centered in the content container. For the floated image to look good, the surrounding text will need to be of a certain length. That’s why I’m writing this filler text: A typewriter is a mechanical or electromechanical machine for writing in characters similar to those produced by printer’s movable type by means of keyboard-operated types striking a ribbon to transfer ink or carbon impressions onto the paper.
Right aligned
This is an image of a typewriter, aligned to the right. It also has a small caption. On smaller screen sizes, the image (and the caption) will clear the content and be centered in the content container. For the floated image to look good, the surrounding text will need to be of a certain length. That’s why I’m writing this filler text: Typically one character is printed per keypress. The machine prints characters by making ink impressions of type elements similar to the sorts used in movable type letterpress printing.
Center aligned
This is a center aligned image. It also has a small caption. After their invention in the 1860s, typewriters quickly became indispensable tools for practically all writing other than personal correspondence. They were widely used by professional writers, in offices, and for business correspondence in homes.
Galleries
Sullivan includes styling for the regular WordPress image galleries. All image galleries are displayed wider than the content column on desktop, meaning it could be worthwhile to use a gallery even when you only want to display a single image. Like so:
In addition to the extra width, the image above has a caption, displayed in the bottom left of the image. If you add two images to a gallery and set it to two columns, we get the following:
If you like your galleries more complex, you can stack galleries with different numbers of columns on top of each other. As long as you make sure that there aren’t any line breaks between each gallery, the space between the separate galleries will be the same as between individual gallery items. This is an example:
This is a great way to build complex galleries for photoshoots, photoblogging posts, graphic design cases and much more.