Typography

Headings | Lists | Blockquotes | Dropcaps | Pullquote | Notices | Pre Example | Dividers | Forms | Buttons | Tables | Misc | Images | Page Classes | Subscriber | Columns | Boxes


This is an H1 Header Link

It is a truth universally acknowledged, that a single man in possession of a good fortune must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters.

The previous paragraph is a lede. Simply add the .lede class to your paragraph to display the paragraph in an irresistibly little-bit-larger-little-bit-lighter kind of way.

This is an H2 Header Link

I honour your circumspection. A fortnight’s acquaintance is certainly very little. One cannot know what a man really is by the end of a fortnight. But if we do not venture, somebody else will; and after all, Mrs. Long and her nieces must stand their chance; and, therefore, as she will think it an act of kindness, if you decline the office, I will take it on myself.

This is an H3 Header Link

The rest of the evening was spent in conjecturing how soon he would return Mr. Bennet’s visit, and determining when they should ask him to dinner.

This is an H4 Header Link

Mr. Bennet was among the earliest of those who waited on Mr. Bingley. He had always intended to visit him, though to the last always assuring his wife that he should not go; and till the evening after the visit was paid she had no knowledge of it. It was then disclosed in the following manner. Observing his second daughter employed in trimming a hat, he suddenly addressed her with.

This is an H5 Header Link

Mr. Bennet was so odd a mixture of quick parts, sarcastic humour, reserve, and caprice, that the experience of three-and-twenty years had been insufficient to make his wife understand his character. Her mind was less difficult to develop.

This is an H6 Header Link

She was a woman of mean understanding, little information, and uncertain temper. When she was discontented, she fancied herself nervous. The business of her life was to get her daughters married: its solace was visiting and news.


Lists

Unordered List

  • One cannot know what a man really is by the end of a fortnight.
  • But if we do not venture, somebody else will
    • and after all, Mrs. Long and her nieces must stand their chance
    • and, therefore, as she will think it an act of kindness
      • if you decline the office
      • I will take it on myself

Ordered List

  1. Come, Darcy, I must have you dance.
  2. I certainly shall not.
    1. You know how I detest it, unless I am particularly acquainted with my partner.
    2. There is not another woman in the room whom it would not be a punishment to me to stand up with.
      1. First of all, he asked Miss Lucas.
      2. Then he inquired of Jane, and got introduced, and asked her for the two next.

List With Class .none

  • They attacked him in various ways.
  • With barefaced questions, ingenious suppositions, and distant surmises.
  • But he eluded the skill of them all.

Definition List

Dweeb
young excitable person who may mature into a Nerd or Geek
Hacker
a clever programmer
Nerd
technically bright but socially inept person

Horizontal List

  • I’m a list.
  • With class.
  • The class is .horr_list.
  • A very classy list.


Blockquote Example

Once in a while you will stumble upon the truth; but most of us manage to pick ourselves up and hurry along as if nothing had happened.

this is a p.cite element with a link

Blockquote with class .none

If we listened to our intellect, we’d never have a love affair. We’d never have a friendship. We’d never go into business, because we’d be too cynical. Well, that’s nonsense. You’ve got to jump off cliffs all the time and build your wings on the way down.

Blockquote with class .big

The price of anything is the amount of life you exchange for it.

Henry David Thoreau


Images

We never put height and width in our images (fucks with responsiveness). We use only two sizes: img_full and img_half. You add these like this:

<img src="image.jpg" class="img_full" />
<img src="image.jpg" class="img_half frame" /> (with optional frame)

I setup a text expander snippet for them like so: (first i upload the image, select the URL of the image and copy it, then invoke this snippet using ;img.

<img src="%clipboard" alt="%fill:name%" class="frame img_full" />

The thing with image size is we need to be thoughtful about the height of our images so’s we can go with the flow of our baseline rhythm. See how each of these images starts and ends exactly with the lines of text you’re reading right now?

Ok, that was pretty clever of me to make that paragraph the exact number of lines necessary to fill up the space of the image. You’re impressed, right? I would be. Here’s a thing to note: these images, due to the simple .img_half class I’ve applied to them will scale.

This is a WP caption. Yup.

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. Nunc eu ullamcorper orci. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. Nunc eu ullamcorper orci. Donec congue lacinia dui.

Works with .alignleft too. Yup.

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. Nunc eu ullamcorper orci. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. Nunc eu ullamcorper orci. Donec congue lacinia dui.


DropCaps

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis.

<span class="drop_cap">P</span>


Pullquote Styles

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Inset Right TitleYou will need to use the following formatting: span.pullquote_right & then span.title for the title.Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Inset Left TitleYou will need to use the following formatting: span.pullquote_right & then span.title for the title.Sed euismod magna a nibh. Sed euismod magna a nibh. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy.


Notice Styles

This is an alert

This is the div.alert style. Use this style to highlight information to your users.

See how we can have a second paragraph here and that title at the top?

Just some simple text here to show you what it looks like with a paragraph afterwards. Pretty cool, right? Pretty attention-grabbing I think.

You can also use the .alert class on a paragraph. That’s what we’re doing here.

Just some simple text here to show you what it looks like with a paragraph afterwards. Pretty cool, right? Pretty attention-grabbing I think.

This is a note

This is a sample of the div.note style. Use this style to highlight information to your users.

See how we can have a second paragraph here?.

Just some simple text here to show you what it looks like with a paragraph afterwards. Pretty cool, right? Pretty attention-grabbing I think.

You can also use the .note style class on paragraphs. See?

Just some simple text here to show you what it looks like with a paragraph afterwards. Pretty cool, right? Pretty attention-grabbing I think.


Pre Example

This is a sample pre tag:

div.modulebox-black div.bx1 {
  background: url(../images/black/box_bl.png) 0 100% no-repeat;
}

div.modulebox-black div.bx2 {
  background: url(../images/black/box_tr.png) 100% 0 no-repeat;
}

div.modulebox-black div.bx3 {
  background: url(../images/an even bigger images folder so we can see what it looks like when we go off-screen/black/box_tl.png) 0 0 no-repeat;
  padding: 0;
  margin: 0;
}


Dividers

Above is a regular hr element. here is an hr.small element (a little less padding on top and bottom).


See how that’s not that much space there? Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Forms & Such

Legend of The Form

Paragraph within a fieldset looks something likum impsum thispum. Perhaps we give it a little moreum textum.

Radio Buttons:

Checkboxes:

Other Stuffs


Buttons

Regular Button

Alternate Button

Button Fancy

Button Fancy Alternate

Button Green

Button Full Main

Button Full Secondary

Button Full Tertiary




Tweet This


Tables

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter


Misc Stuff

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. cite. NBA Mauris a ante del and ins and mark.


Page Classes

Things you can add to page class (meta box on each page)

.landing      // landing page
.no_headline  // hides the WP default headline
.centered     // centers the headline


Subscribe Shortcode

You can use the shortcode [subscribe] to place a form in your post as you’re writing. Example:

Variables you can set in this shortcode are:

page  | sets the page for tracking code
headline  | text in the headline
button  | text in the button
quote  | Quote at bottom of form
content between an opening and closing [subscribe][/subscribe].

Example:

 
[subscribe page="About_Top" headline="I'm a headline. Please subscribe!" button="Gimme Gimme" quote="This is fantastic stuff!! Truly a gift to humanity. You're the best around!” – some guy"]This is the contents of the shortcode. It shows up as a paragraph before the form![/subscribe]

I'm a headline. Please subscribe!

This is the contents of the shortcode. It shows up as a paragraph before the form!


This is fantastic stuff!! Truly a gift to humanity. You're the best around!” – some guy


Columns

Two Column Formatting

Inside column 1
inside column 2

onethird_column Formatting

onethird_column_left
inside column 2

Three Column Formatting

inside column 1
inside column 2
inside column 3

Note: the .line_1of2, .line_1of3 and .line_2of3 classes are optional classes to add vertical line between columns

Four Column Formatting

inside column 1
inside column 2
inside column 3
inside column 4


Boxes & Text

.box_main
.alert
.note
.quiet
.alt_font
.quiet.alt_font.border_top

Here’s a title

This is some stuff in a .box_main div. Quite boxed, isn’t it?

This is some stuff in an .alert div. Awfully alertful, amiright?

This is some stuff in a .note paragraph. It’s very notey, wouldn’t you say? It is a truth universally acknowledged, that a single man in possession of a good fortune must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters.

This is the .quiet style. It is a truth universally acknowledged, that a single man in possession of a good fortune must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters.

This is the .text_alert style. It is a truth universally acknowledged, that a single man in possession of a good fortune must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters.

This is the .alt_font style. It is a truth universally acknowledged, that a single man in possession of a good fortune must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters.

This is the .quiet.alt_font.border_top style. It is a truth universally acknowledged, that a single man in possession of a good fortune must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters.