The style guide provides you with a blueprint of the theme’s default post and page HTML styles. The style guide is also a great reference for suggested typographic treatment and styles for your content.
Starting with headings styles:
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
Blockquote
The blockquote is used to indicate the quotation of a large section of text from another source. It can be as long or as short as you’d like.
It is what you read when you don’t have to that determines what you will be when you can’t help it.
Oscar Wilde
List Items
Unordered Lists (Nested)
- List item one
- List item one
- List item one
- List item two
- List item three
- List item four
- List item two
- List item three
- List item four
- List item one
- List item two
- List item three
- List item four
Ordered List (Nested)
- List item one
- List item one
- List item one
- List item two
- List item three
- List item four
- List item two
- List item three
- List item four
- List item one
- List item two
- List item three
- List item four
Definition Lists
- Definition List Title
- Definition list division.
- Startup
- A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
- #dowork
- Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.
- Do It Live
- I’ll let Bill O’Reilly will explain this one.
Code Formatting
pre {
padding: 4%;
margin-bottom: 1.62em;
background: #eaecee;
overflow: auto;
tab-size: 2;
}
Table Styles
| Employee | Salary | |
|---|---|---|
| John Doe | $1 | Because that’s all Steve Jobs needed for a salary. |
| Jane Doe | $100K | For all the blogging she does. |
| Fred Bloggs | $100M | Pictures are worth a thousand words, right? So Jane x 1,000. |
| Jane Bloggs | $100B | With hair like that?! Enough said… |
Highlight Text Style
To use the highlight, you simply need to wrap the text in mark HTML tag. This can be done in the Text editor view. See an example below:
<mark>This will be highlighted.</mark>
Image Alignment
Right Aligned Image
Images may be two-dimensional, such as a photograph, screen display, and as well as a three-dimensional, such as a statue or hologram. They may be captured by optical devices – such as cameras, mirrors, lenses, telescopes, microscopes, etc. and natural objects and phenomena, such as the human eye or water surfaces.
Left Aligned Image
The word image is also used in the broader sense of any two-dimensional figure such as a map, a graph, a pie chart, or an abstract painting. In this wider sense, images can also be rendered manually, such as by drawing, painting, carving, rendered automatically by printing or computer graphics technology, or developed by a combination of methods.
Pull Quote Styles
To use the pull quote, you simply need to add a class of alignright or alignleft to your content. This can be done in Visual editor with additional style buttons that theme provides. See an example below:
<blockquote class="alignright">Pull this text right.</blockquote>
This pull quote is just hanging out on the right side of the post. Lorem ipsum dolor sit amet, consectetur.
A pull quote (also known as a lift-out quote) is a quotation or excerpt from an article that is typically placed in a larger or distinctive typeface on the same page, serving to entice readers into an article or to highlight a key topic. The term is principally used in journalism and publishing.
Placement of a pull quote on a page may be defined in a publication’s or website’s style guide. Such a typographic device may or may not be aligned with a column on the page. Some designers, for example, choose not to align the quote. In that case, the quotation cuts into two or more columns, as in the example shown.
And this pull quote is pulling text to the left, like a sir. Lorem ipsum dolor sit amet, consectetur.
Pull quotes need not be a verbatim copy of the text being quoted; depending on a publication’s house style pull quotes may be abbreviated for space and/or paraphrased for clarity, with or without indication. There are no hard-and-fast rules for the exact formatting of pull quotes.
Image Gallery Standard
This is a traditional WordPress thumbnail gallery available in all WordPress sites. To add this gallery, simply click Add Media in your post editor and click Create Gallery. In the Gallery Settings area, choose Thumbnail Grid as the type of gallery.
Jetpack Mosaic Image Gallery
This awesome mosaic thumbnail gallery is provided by the Jetpack plugin. To add this gallery you will need Jetpack installed. Once installed, simply click Add Media in your post editor and click Create Gallery. In the Gallery Settings area, choose Tiled Mosaic as the type of gallery.
HTML Tags
These supported tags come from the WordPress.com code FAQ.
Address Tag
1 Infinite LoopCupertino, CA 95014
United States
Anchor Tag (aka. Link)
This is an example of a link.
Abbreviation Tag
The abbreviation srsly stands for “seriously”.
Inline Quotation and Cite Tag
Code is poetry.
Automattic
Code Tag
You will learn later on in these tests that word-wrap: break-word; will be your best friend.
Delete Tag
This tag will let you strikeout text, but this tag is no longer supported in HTML5 (use the <strike> instead).
Emphasize Tag
The emphasize tag should italicize text.
Insert Tag
This tag should denote inserted text.
Keyboard Tag
This scarcely known tag emulates keyboard text, which is usually styled like the <code> tag.
Strong Tag
This tag shows bold text.
Subscript and Superscript Tag
Getting our science styling on with H2O, which should push the “2” down. Still sticking with science and Isaac Newton’s E = MC2, which should lift the 2 up.
Variable Tag
This allows you to denote variables.
0 comments on “Style guide”Add yours →