Style Guide

Page breadcrumbsEnd of page breadcrumbs
Sometimes, we want to introduce the main article idea to user. This text will be larger than paragraphs in our post. You just have to wrap needed text in a div with the “intro” CSS class. You can copy this one: <div class="intro">YOUR TEXT HERE</div> and replace with your text. This text will be displayed usually at the beginning of the article.

And here is an example of normal paragraph which will be displayed in article.

We’re paying a lot of attention on typography and created this style guide page help you understand better how this theme works and what elements you can use. Let’s start with Dropcaps.

Dropcap or inital, in a written or published work is a letter at the beginning of a word, a chapter, or a paragraph that is larger than the rest of the text. The word is derived from the Latin initialis, which means standing at the beginning. An initial often is several lines in height and in older books or manuscripts, sometimes ornately decorated. [Source]

Words can also be used as dropcaps. All you have to do is to wrap the first letter(or, in case you want to dropcap a word – first word) in a span with the “dropcap” CSS class. You can copy this one: <span class="dropcap">YOUR LETTER HERE</span> and replace text with your letter.

Spiffy Theme Headings

Header one example

Header two example

Header three example

Header four example

Header five example
Header six example

Spiffy Theme Blockquotes

Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote with a cite reference:

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things. Steve Jobs – Apple Worldwide Developers’ Conference, 1997

Unordered Lists (Nested)

  • List item one
  • List item two
  • List item three
    • 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 four
  • List item five: what to you know about premium WordPress themes?

Ordered List (Nested)

  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four

HTML Tags

These supported tags come from the WordPress.com code FAQ.

Address Tag

1 Infinite Loop
Cupertino, CA 95014
United States

Anchor Tag (Link)

Links are displayed as underlined text.

Abbreviation Tag

The abbreviation wp stands for “WordPress”.

Cite Tag

“Code is poetry.” –Automattic

Code Tag

You will learn later on in these article where you can use this code: <span class="word-underline">TEXT WRITTEN HERE WILL BE UNDERLINED</span>

Delete Tag

This tag will let you strikeout text.

Emphasize Tag

The emphasize tag should italicize text.

Insert Tag

This tag should denote inserted text.

Keyboard Tag

This tag emulates keyboard text, which is usually styled like the <code> tag.

Preformatted Tag

This tag styles large blocks of code.

.post-title {
	margin: 0 0 5px;
	font-weight: bold;
	font-size: 38px;
	line-height: 1.2;
	and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}

Quote Tag

Developers, developers, developers… –Steve Ballmer

Strong Tag

This tag shows bold text.

Subscript Tag

Getting our science styling on with H2O, which should push the “2” down.

Superscript Tag

Still sticking with science and Isaac Newton’s E = MC2, which should lift the 2 up.

 

Definition Lists

Definition List Title
Definition list division.
Another Definition List Title
Another Definition list division
Lorem ipsum?
What we know about Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
Want to learn more about lorem ipsum?
Check this link for more information about lorem ipsum.

Tables

Table Head Column One Table Head Column Two Table Head Column Three
Table Footer Column One Table Footer Column Two Table Footer Column Three
Table Row Column One Short Text Testing a table cell with a longer amount of text to see what happens, you’re not using tables for site layouts are you?
Table Row Column One Table Row Column Two Table Row Column Three
Table Row Column One Table Row Column Two Table Row Column Three
Table Row Column One Table Row Column Two Table Row Column Three
Table Row Column One Table Row Column Two Table Row Column Three

Theme custom classes

If you want to highlight specific piece of text, just wrap it in a span with “highlight” CSS class like in this example: <span class="highlight">HERE GOES TEXT WHICH NEED TO BE HIGHLITHED</span>

If you want to underline a piece of text and have a nice effect on hover then you have to wrap it in a “word-underline” CSS class like in this example: <span class="word-underline">HERE GOES UNDERLINED TEXT</span>

Displaying text in columns
You can display text in 1 column(as it’s by default), two or 3 columns. If you want to display specific piece of text in two columns then you simply have to wrap it in a div and add “two-columns” class to it like in next example: <span class="two-columns">HERE GOES TEXT WHICH NEED TO BE DISPLAYED IN 2 COLUMNS</div>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

If you want to display specific piece of text in three columns then you simply have to wrap it in a div and add “three-columns” class to it like in next example: <span class="three-columns">HERE GOES TEXT WHICH NEED TO BE DISPLAYED IN 3 COLUMNS</div>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Images

OK, so images can get quite complicated as we have a few variables to work with! For example the image below has had a caption entered in the WordPress image upload dialog box, this creates a shortcode which then in turn wraps the whole thing in a div with inline styling.

This is a nice caption

This is a nice caption

The next issue we face is image alignment, users get the option of None, Left, Right & Center. On top of this, they also get the options of Thumbnail, Medium, Large & Fullsize.

Here is an example with image aligned on right:

f_post_7Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Here is an example with image aligned on left:

f_post_6Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

How about a centered image?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. f_post_10It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

And let’s add a full width image(actually, it’s width is greater than content container width):

f_post_2

 

Spiffy + Jetpack = ♡

Spiffy Theme is compatible with Jetpack Plugin and you can use it’s shortcodes for testimonials, portfolio or food menus.

Testimonials

To display testimonials simply add [testimonials] shortcode in your editor and save it. On frontend a nice list with testimonials will be displayed:

[testimonials]

Portfolio

To display portfolio simply add [portfolio] shortcode in your editor and save it. On frontend a nice list with portfolio items will be displayed:

[portfolio]