Markup Conventions for jQuery Foundation Sites

All of the sites that are part of the jQuery WordPress network use the following markup conventions to apply styling to elements. Please adhere to these conventions if you are working on any of our web sites. This page is a live example of these conventions in action.

Tools & Libraries

The jQuery sites are built with a number of existing libraries and tools. The list below will attempt to catalog the most important ones:

Background & Logos

The background colors and logos are set in the base.css file of the parent theme and are triggered by classes on the body. Unless you're setting up a site with a new color scheme and logo, you should just need to use one of the following classes.

  • jQuery: body.jquery (blue)
  • jQuery UI: body.jquery-ui (orange)
  • jQuery Mobile: body.jquery-mobile (green)
  • jQuery Foundation: body.jquery-foundation (navy)
  • Sizzle JS: body.sizzlejs (red)
  • Qunit JS: body.qunitjs (purple)

If you are adding a site with a new logo/color scheme, please add to base.css. Don't forget the retina version of the logo and the media query to toggle it based on pixel density.

Other colors (like headers, buttons & links) and layout styles specific to the site will be in the style.css of that site's theme.

Please see the Colors section of the jQuery Brand Guidelines for more information about our color story.

Typography

The jQuery sites use 4 typefaces. Please see the Typography section of the jQuery Brand Guidelines for more information about our font choices.

Cairo

Use Cairo for headings.

Also for navigation, buttons & actions.

1
 
font-family: "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;

Helvetica Neue

Used Helvetica Neue for body copy.

1
 
font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;

Source Code Pro

Used Source Code Pro for code blocks.
1
 
font-family: "source-code-pro", Consolas, monospace;

Foundation

Please use this basic foundation for all pages:

  • The #container sets the background color and provides padding around the white content area.
  • The #content-wrapper creates the white content area and gives the appropriate padding.
  • The #content should be used for the main content column.
  • The #sidebar should be used for the secondary column or sidebar.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<body>
 
<header>
  Header (Global Nav, Logo and Main Nav)
</header>
 
<div id="container">
  <div id="content-wrapper" class="clearfix row">
    <div class="content-right twelve columns">
      <div id="content">
        main content
      </div>
      <div id="sidebar">
        sidebar content
      </div>
    </div>
  </div>
</div>
 
</body>

Layout Options

You can easily customize different layouts for #content.

Content Right
This is the default
Content Full
body.content-full
Content Left
body.content-right
Content Full
body.content-full.full-width

Images

Images can be floated and given captions very easily.

Image Full

Have you ever seen an orange up close? It's really bumpy and shiny. Kind of like a martian landscape. Oranges are really hard to get open, too. And if you do manage to peel the skin off, your fingers will smell like oranges for at least 3 hours. Oh, those oranges. They are grand.

1
 
<img src="..." alt="..." class="full">

Image Floated Left

Have you ever seen an orange up close? It's really bumpy and shiny. Kind of like a martian landscape. Oranges are really hard to get open, too. And if you do manage to peel the skin off, your fingers will smell like oranges for at least 3 hours. Oh, those oranges. They are grand.

1
 
<img src="..." alt="..." class="left">

Image Floated Right

Have you ever seen an orange up close? It's really bumpy and shiny. Kind of like a martian landscape. Oranges are really hard to get open, too. And if you do manage to peel the skin off, your fingers will smell like oranges for at least 3 hours. Oh, those oranges. They are grand.

1
 
<img src="..." alt="..." class="right">

Image with Caption

test
Hey look a figcaption!
Have you ever seen an orange up close? It's really bumpy and shiny. Kind of like a martian landscape. Oranges are really hard to get open, too. And if you do manage to peel the skin off, your fingers will smell like oranges for at least 3 hours. Oh, those oranges. They are grand.
1
2
3
4
 
<figure class="left">
  <img src="..." alt="..." class="left">
  <figcaption>Hey look a figcaption!</figcaption>
</figure>

Image with Caption & No Border

Hey look a figcaption!
Have you ever seen an orange up close? It's really bumpy and shiny. Kind of like a martian landscape. Oranges are really hard to get open, too. And if you do manage to peel the skin off, your fingers will smell like oranges for at least 3 hours. Oh, those oranges. They are grand.
1
2
3
4
 
<figure class="left noborder">
  <img src="..." alt="..."  class="left noborder"
  <figcaption>Hey look a figcaption!</figcaption>
</figure>

Embeds

For an embedded element like a YouTube or Vimeo video, iframe, etc. make sure you wrap the element in an embed div so that it scales proportionately with media queries.

Video Embed

1
2
3
 
<div class="embed">
  <iframe src="..."></iframe>
</div>

Buttons

Styling buttons is as simple as adding a class of button. Other options include dark and large.

Button Styles

Regular Button

Dark Button

Large Button

1
2
3
 
<a class="button" href="#">Regular Button</a>
<a class="button dark" href="#">Dark Button</a>
<a class="button large" href="#">Large Button</a>

Form Buttons







1
2
3
 
<input type="submit" value="Submit Button">
<input type="submit" value="Dark Submit Button" class="dark">
<input type="submit" value="Large Submit Button" class="large">

Default Element Styling

Headings

Heading One Looks Like This

Heading Two Looks Like This

Heading Three Looks Like This

Heading Four Looks Like This

1
2
3
4
 
<h1>Heading One Looks Like This</h1>
<h2>Heading Two Looks Like This</h2>
<h3>Heading Three Looks Like This</h3>
<h4>Heading Four Looks Like This</h4>

Lists

  • Unordered List
  • Looks Like
  • This
  1. Ordered List
  2. Looks Like
  3. This
1
2
3
4
5
6
7
8
9
10
11
 
<ul>
  <li>Unordered List</li>
  <li>Looks Like</li>
  <li>This</li>
</ul>
 
<ol>
  <li>Ordered List</li>
  <li>Looks Like</li>
  <li>This</li>
</ol>

Basic Elements

Have you ever seen an orange up close? It's really bumpy and shiny. Kind of like a martian landscape.

Oranges are really hard to get open, too. And if you do manage to peel the skin off, your fingers will smell like oranges for at least 3 hours. Oh, those oranges. They are grand.

1
2
3
4
5
 
<p>Have you ever seen an <strong>orange</strong> up close? It's really bumpy and shiny. Kind of like a <a href="#">martian landscape</a>.</p>
 
<hr>
 
<p>Oranges are <em>really</em> hard to get open, too. And if you do manage to peel the skin off, your fingers will smell like oranges for at least 3 hours. Oh, those <code>oranges</code>. They are grand.</p>

Code Blocks

1
2
 
// Example Code
var foo = "bar";
1
2
3
4
 
<pre><code>
// Example Code
var foo = "bar";
</code></pre>

Blockquotes

Go do something awesome today. You'll be glad you did.

1
2
3
 
<blockquote>
  <p>Go do something awesome today. You'll be glad you did.</p>
</blockquote>

Header Block .block

Header One Block

This gives your header a background and padding. Great for column headings.

Header Two Block

1
2
3
 
<h1 class="block">Header One Block</h1>
<p>This gives your header a background and padding. Great for column headings.</p>
<h2 class="block">Header Two Block</h2>

Centered Text - .center-txt

Header One Centered

This is a paragraph that has been centered. It's great, huh? Use this class to center any text.

1
2
 
<h1 class="center-txt">Header One Centered</h1>
<p class="center-txt">This is a paragraph that has been centered. It's great, huh? Use this class to center any text.</p>

Banners

Secondary Banner

1
2
3
 
<div id="banner-secondary">
  <h1>Banner Header Should Go Here</h1>
</div>

Secondary Banner Large

1
2
3
4
 
<div id="banner-secondary" class="large-banner">
  <h2>Banner Header Should Go Here</h2>
  <p>Secondary Header Can Go Here</p>
</div>

Forms

Forms

Top aligned labels

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<form class="top-labels">
<label for="name">
      Name
      <input type="text" placeholder="Your Name" name="name"/>
</label>
<label for="website">
      Your website
      <input type="text" placeholder="http://" name="website" />
</label>
<label for="message">
      Message
      <textarea name="message" placeholder="Your message"></textarea>
</label>
 
<fieldset class="radio">
      <label for="notifications"><span><strong>Notifications</strong></span></label>
      <ul>
              <li><label><input type="radio" name="notifications"> Send me email</label></li>
              <li><label><input type="radio" name="notifications"> Don't send me email</label></li>
      </ul>
</fieldset>
 
<label for="remember"><input type="checkbox" name="remember"> Remember me</label>
 
<input type="submit" value="Submit" />
</form>

Grid

We are using the Zurb Foundation grid as a basis for the grid. Please only use this grid inside of the main foundation mentioned above (i.e. in the #content or #sidebar).

We'll have a reference eventually, but for now go here to see how to use the grid.