Styleguide

Heading one

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading two

Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.

Fugiat quo voluptas nulla pariatur? Corrupti quos dolores et quas molestias excepturi sint occaecati. Fugiat quo voluptas nulla pariatur? Non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Heading three

Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat. Nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam.

Heading four

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia. Excepteur sint occaecat cupidatat non proident, sunt in culpa.

Cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia. Laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.

Et harum quidem rerum facilis est et expedita distinctio. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Totam rem aperiam. Corrupti quos dolores et quas molestias excepturi sint occaecati.

Heading five

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading six

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Block Quote

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


Tables

Employee Salary
John Saddington $1 Because that’s all Steve Job’ needed for a salary.
Tom McFarlin $100K For all the blogging he does.
Jared Erickson $100M Pictures are worth a thousand words, right? So Tom x 1,000.
Chris Ames $100B With hair like that?! Enough said…

Table/Striped (.striped)

Employee Salary
John Saddington $1 Because that’s all Steve Job’ needed for a salary.
Tom McFarlin $100K For all the blogging he does.
Jared Erickson $100M Pictures are worth a thousand words, right? So Tom x 1,000.
Chris Ames $100B With hair like that?! Enough said…

Lists

  • Qui officia deserunt mollit anim id est laborum.
    • Non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Totam rem aperiam. Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
      1. Animi, id est laborum et dolorum fuga. Eaque ipsa quae ab illo inventore veritatis et quasi. Itaque earum rerum hic tenetur a sapiente delectus. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.
      2. List item two
      3. List item three
      4. List item four
    • Animi, id est laborum et dolorum fuga. Eaque ipsa quae ab illo inventore veritatis et quasi. Itaque earum rerum hic tenetur a sapiente delectus. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.
    • List item three
    • List item four
  • Qui officia deserunt mollit anim id est laborum.
  • List item three
  • List item four
  1. Qui officia deserunt mollit anim id est laborum.
    1. Non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Totam rem aperiam. Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
      • Animi, id est laborum et dolorum fuga. Eaque ipsa quae ab illo inventore veritatis et quasi. Itaque earum rerum hic tenetur a sapiente delectus. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.
      • List item two
      • List item three
      • List item four
    2. Animi, id est laborum et dolorum fuga. Eaque ipsa quae ab illo inventore veritatis et quasi. Itaque earum rerum hic tenetur a sapiente delectus. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. 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.


HTML Tags

Address Tag

1 Infinite Loop
Cupertino, CA 95014
United States

Anchor Tag (aka. Link)

This is an example of a link.

Abbreviation Tag

The abbreviation srsly stands for “seriously”.

Acronym Tag

Big Tag

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 scarsly known 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;
    }
    

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 Albert Einstein’s E = MC2, which should lift the “2” up.

Teletype Tag

This allows you to denote variables.


Forms

Few form examples from the site.

Create an Account

Contact Form

Write Us
Jot us a note and we’ll get back to you as quickly as possible.

Form Elements

Here's a Title
This is basically telling you something important about the above option.
This is basically telling you something important about the above option.

Messages

Success

You've got all this money. How come you always dress like you're doing your laundry? Check it out, y'all. Everyone who was invited is here. A true inspiration for the children. Hello, little man. I will destroy you!

Error

Eeeee! Now say "nuclear wessels"! Take me to your leader! Goodbye, friends. I never thought I'd die like this. But I always really hoped. For one beautiful night I knew what it was like to be a grandmother. Subjugated, yet honored.

Alert

It's a fez. I wear a fez now. Fezes are cool. You hit me with a cricket bat. I am the last of my species, and I know how that weighs on the heart so don't lie to me! Sorry, checking all the water in this area; there's an escaped fish.

Information

Too much work. Let's burn it and say we dumped it in the sewer. Oh, all right, I am. But if anything happens to me, tell them I died robbing some old man. Guess again. Guess again.

Warning

I could if you hadn't turned on the light and shut off my stereo. Hey, guess what you're accessories to. Oh right. I forgot about the battle. Who's brave enough to fly into something we all keep calling a death sphere?

Editor Components

These are extra classes available for use in templates or in the WYSWIYG. Typically for content breakup on pages.

Callout | .callout

Hey, guess what you're accessories to. Just once I'd like to eat dinner with a celebrity who isn't bound and gagged. Yep, I remember. They came in last at the Olympics, then retired to promote alcoholic beverages!


Large Text | .font-size-l

And why did 'I' have to take a cab? Wow! A superpowers drug you can just rub onto your skin? You'd think it would be something you'd have to freebase. Yes, if you make it look like an electrical fire. When you do things right, people won't be sure you've done anything at all.

Hey, guess what you're accessories to. Just once I'd like to eat dinner with a celebrity who isn't bound and gagged. Yep, I remember. They came in last at the Olympics, then retired to promote alcoholic beverages!


Extra Extra Large Text | .font-size-xxl

And why did 'I' have to take a cab? Wow! A superpowers drug you can just rub onto your skin? You'd think it would be something you'd have to freebase. Yes, if you make it look like an electrical fire. When you do things right, people won't be sure you've done anything at all.


Heading Font Family | .font-family-headings

In your time, yes, but nowadays shut up! Besides, these are adult stemcells, harvested from perfectly healthy adults whom I killed for their stemcells. And when we woke up, we had these bodies. Look, last night was a mistake.

You can also mix and match these basic typography classes as needed.

I am a different looking callout.


CMS Columns

Make columns using nested div elements. The columns must be wrapped in a div with the class cms-columns.

The last column per row requires the class "last".

Available Column Classes:

  • .one-half
  • .one-third
  • .two-third
  • .one-quarter
  • .three-quarter

Examples

Okay, it's 500 dollars, you have no choice of carrier, the battery can't hold the charge and the reception isn't very… We'll go deliver this crate like professionals, and then we'll go home. I never loved you.

Oh, you're a dollar naughtier than most. Shinier than yours, meatbag. Leela, are you alright? You got wanged on the head. Oh, all right, I am. But if anything happens to me, tell them I died robbing some old man.

But existing is basically all I do! Leela's gonna kill me. Uh, is the puppy mechanical in any way? With a warning label this big, you know they gotta be fun! Well, thanks to the Internet, I'm now bored with sex. Is there a place on the web that panders to my lust for violence?

Have you ever tried just turning off the TV, sitting down with your children, and hitting them? Please, Don-Bot… look into your hard drive, and open your mercy file! Hello Morbo, how's the family?

So I really am important? How I feel when I'm drunk is correct? Maybe I love you so much I love you no matter who you are pretending to be. Noooooo! Tell them I hate them. Now, now. Perfectly symmetrical violence never solved anything.

Okay, it's 500 dollars, you have no choice of carrier, the battery can't hold the charge and the reception isn't very… We'll go deliver this crate like professionals, and then we'll go home. I never loved you.

But existing is basically all I do! Leela's gonna kill me. Uh, is the puppy mechanical in any way? With a warning label this big, you know they gotta be fun! Well, thanks to the Internet, I'm now bored with sex. Is there a place on the web that panders to my lust for violence?

Image Alignment & Clear/Clearfix

This will allow us to have consistent spacing between floated elements.

You can add the "clear" class to an element to clear surrounding elements.

You can add the "clearfix" class to an element to clear it's own children. This is good to use on elements with floated children.

The following classes can be used on figure or img tags.

  • .alignright
  • .alignleft
  • .aligncenter

Esse cillum dolore eu fugiat nulla pariatur.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat. Eaque ipsa quae ab illo inventore veritatis et quasi.

  1. Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
  2. Duis aute irure dolor in reprehenderit in voluptate velit.
  3. Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Eaque ipsa quae ab illo inventore veritatis et quasi.

Itaque earum rerum hic tenetur a sapiente delectus. Fugiat quo voluptas nulla pariatur? Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. At vero eos et accusamus. Non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

  • Et harum quidem rerum facilis est et expedita distinctio.
  • Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
  • Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem.

Nihil molestiae consequatur, vel illum qui dolorem eum. Animi, id est laborum et dolorum fuga. Excepteur sint occaecat cupidatat non proident, sunt in culpa. Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.

Cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia. Excepteur sint occaecat cupidatat non proident, sunt in culpa. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia. 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. Laboris nisi ut aliquip ex ea commodo consequat. Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

  • Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
  • Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
  • Itaque earum rerum hic tenetur a sapiente delectus.

Eaque ipsa quae ab illo inventore veritatis et quasi. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam. At vero eos et accusamus. Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque.

Duis aute irure dolor in reprehenderit in voluptate velit. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam. Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque.

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat. Animi, id est laborum et dolorum fuga. Esse cillum dolore eu fugiat nulla pariatur. Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque.

Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Totam rem aperiam. At vero eos et accusamus. Duis aute irure dolor in reprehenderit in voluptate velit. Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Corrupti quos dolores et quas molestias excepturi sint occaecati.

Animi, id est laborum et dolorum fuga. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit. Do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia.

Fugiat quo voluptas nulla pariatur? Duis aute irure dolor in reprehenderit in voluptate velit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Et harum quidem rerum facilis est et expedita distinctio.

Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo. Corrupti quos dolores et quas molestias excepturi sint occaecati. Cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia.

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam.

Itaque earum rerum hic tenetur a sapiente delectus. Eaque ipsa quae ab illo inventore veritatis et quasi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.

Nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.