Style Guide

Based on Twitter Bootstrap which was designed for @twitter by @mdo and @fat.

Adapted for Active Network by Jeremy Spitzberg.

Global Elements

Grid

The Active.com grid is based directly on the Twitter Bootstrap scaffolding. Quoting directly:

The default grid system provided in Bootstrap utilizes 12 columns that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically. 

<div class="row">
	<div class="span4">...</div>
	<div class="span8">...</div>
</div>

As shown here, a basic layout can be created with two "columns", each spanning a number of the 12 foundational columns we defined as part of our grid system.

Furthermore, to maintain regularity throughout the design, the grid can be brought into the most micro of layouts. Again, from the Bootstrap documentation:

Nesting columns

With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new .row and set of .span* columns within an existing .span* column.

Example

Nested rows should include a set of columns that add up to the number of columns of it's parent. For example, two nested .span3 columns should be placed within a .span6.

Level 1 of column
Level 2
Level 2 
<div class="row">
	<div class="span6">
		Level 1 column
		<div class="row">
			<div class="span3">Level 2</div>
			<div class="span3">Level 2</div>
		</div>
	</div>
</div>

Typography

Headers

This is a h1 tag

<h1>This is a h1 tag</h1>

This is a h1 tag - on black

<h1 class="reverse-text">This is a h1 tag - on black</h1>

This is a h2 tag

<h2>This is a h2 tag</h2>

This is a h2 tag - on black

<h2 class="reverse-text">This is a h2 tag - on black</h2>

This is a h3 tag

<h3>This is a h3 tag</h3>

This is a h3 tag with a link

<h3><a href="">This is a h3 tag with a link</a></h3>

This is a h4 tag

<h3>This is a h4 tag</h3>

This is a h4 tag with a link

<h4><a href="">This is a h4 tag with a link</a></h4>
This is a h5 tag
<h5>This is a h5 tag</h5>
This is a h6 tag
<h6>This is a h6 tag</h6>

Type

This is a regularly styled paragraph.

<p>This is a regularly styled paragraph.</p>

This is a paragraph styled with the "secondary-text" class. Here is example linked element. Use this for... (??)

<p class="secondary-text">This is a "secondary-text" styled paragraph.</p>

This is a paragraph styled with the "reverse-text" class. Here is link text, to demonstrate the look of it. Use this for... (??)

<p class="reverse-text">This is a "reverse-text" styled paragraph. Here is <a href="">link text</a>, to demonstrate the look of it. Use this for... (??)</p>

Page Elements

Buttons

These styles can be applied to button or link elements.

Primary Register Now Button

<button class="btn btn-register btn-mega">
	Register Now
</button>

<button class="btn btn-register btn-mega">
	Register Now
	<span class="description">For as Low as $45</span>
</button>

Secondary Register Now Button

<button class="btn btn-inverse btn-large">
	Register with Active Advantage
</button>

Primary Content Button

<btn n class="btn-register">
	Read More 
</button>

Secondary Content Button

<button class="btn">
	Read More
</button>

<ul class="breadcrumb">
	<li><a href="http://www.active.com/">Home</a> <span class="divider">></span></li>
	<li><a href="">Running</a> <span class="divider">&gt;</span></li>
	<li><a href="">Activities</a> <span class="divider">&gt;</span></li>
	<li>America's Finest City Half Marathon and 5K</li>
</ul>

Toolbar

For use on search, event detail, and article pages. Requires transition and dropdown javascripts.

In addition to links, text, icons, dropdowns and other similar behaviors, a divider item can be included:


Two sections can be floated left/right using the "pull-left" and "pull-right" classes on the respective unordered lists.


<div class="toolbar">         
	<ul class="nav nav-pills pull-left">
		<li class="secondary-text">View as:</li>
		<li id="menu5" class="dropdown"> 
			<a href="#menu5" data-sort="relevance" data-toggle="dropdown" class="dropdown-toggle">
				List <b class="caret"></b>
			</a>
			<ul class="dropdown-menu">
				<li><a data-sort="relevance" href="#">List</a></li>
				<li><a data-sort="date_asc" href="#">Map</a></li>
				<li><a data-sort="date_desc" href="#">XML</a></li>
			</ul>
		</li>
	</ul>
	<ul class="nav nav-pills pull-right">
		<li><a href=""><i class="icon-share"></i> Share</a></li>
		<li class="divider-vertical"></li>
		<li><a href=""><i class="icon-envelope"></i></a></li>
		<li><a href=""><i class="icon-print"></i></a></li>
	</ul>
</div>

Progress Indicator

For use in the "Hot now" module on event detail pages, or any place else we need to show progress or urgency. There are striped and animated versions of this element in the Tw Bootstrap as well.

90% full

35% full
<div class="row">
	<div class="span3">
		<div class="progress progress-warning">
			<div style="width:90%" class="bar"></div>
		</div>
	</div>
	<div class="span1">
		<h6 class="progress-text">90% full</h6>
	</div>	
</div>

Pagination

<div class="pagination pagination-centered">
	<ul>
		<li><button type="button" class="previous-page btn btn-content">Prev</button></li>
		<li class="active"><a href="/search?page=1">1</a></li>
		<li><a href="/search?page=2" rel="next">2</a> </li>
		<li><a href="/search?page=3">3</a></li>
		<li><a href="/search?page=4">4</a></li>
		<li><a href="/search?page=5">5</a></li>
		<li class="disabled"><a href="">...</a></li>
		<li><a href="/search?page=283">283</a></li>
		<li><a href="/search?page=284">284</a></li>
		<li><button type="button" onclick="window.location='/search?page=2'" rel="next" class="next-page btn btn-content">Next</button></li>
	</ul>
</div>

Save/Favorite

The save/favorite "dog-ear" sits at the top right corner of the page. It should be the first code inside the <div class="content-wrap container">. The dog-ear has hover and click states, and on hover a popover appears. The popover is a TwBootstrap element and requires the appropriate javascript, as described in their documentation.

Note: I've put inline styles on the tag (not in the code example) for this styleguide only. Please remove that for use on your site.

<!-- Save "dog-ear" -->
<a data-content="Add to my favorites" rel="popover" href="#" class="save-tag"></a>

Tabs

boo!
recently...
			<ul id="profile-tabs" class="nav nav-tabs">
			<li class="active"><a href="#alerts">Alerts</a></li>
			<li><a href="#recent">Recent Activity</a></li>
			</ul>
			<div class="tab-content">
			<div id="alerts" class="tab-pane active">boo!</div>
			<div id="recent" class="tab-pane">recently...</div>
			</div>

Modules

Related Content Module

For use on search, event detail, and article pages.

Running Tips, Training & Advice

7 Midsummer Nights and Moonlight Runs

7 Midsummer Nights and Moonlight Runs

By Giselle Domdom

Flip your normal morning race routine on its head by racing under the stars. See how much faster you can run at night.

Read More
More Running Tips, Training & Advice

This is the related content module. If there are not five (5) assets available, remove the "thumbnails" list.

Related Content Code

On a two-column page (inside a "span8" column)

ie, channel or article page

			<section>
			<header class="sectionheader">
			<h2></h2>
			</header>
			<div class="sectioncontent top-blue-border thick">
			<div class="row featured">
			<div class="span3">
			<a href="">
			<img src="" alt="" title="" />
			</a>
			</div>
			<div class="span5">
			<h4></h4>
			<p class="secondary-text"></p>
			<p></p>
			<a href="" class="btn btn-register">Read More</a>
			</div>
			</div>
			<ul class="thumbnails">
			<li class="span2">
			<a href="" class="thumbnail">
			<img src="" alt="" title="" />
			<div class="caption"></div>
			</a>
			</li>
			<li class="span2">
			<a href="" class="thumbnail">
			<img src="" alt="" title="" />
			<div class="caption"></div>
			</a>
			</li>
			<li class="span2">
			<a href="" class="thumbnail">
			<img src="" alt="" title="" />
			<div class="caption"></div>
			</a>
			</li>
			<li class="span2">
			<a href="" class="thumbnail">
			<img src="" alt="" title="" />
			<div class="caption"></div>
			</a>
			</li>
			</ul>
			<a href="" class="section-footer-link">
			More Running Tips, Training & Advice
			</a>
			</div>
			</section>
On a three-column page (inside a "span6" column)

ie, search. In the thinner column, the featured asset's column width diminishes and we need to remove one thumbnail.

			<section>
			<header class="sectionheader">
			<h2></h2>
			</header>
			<div class="sectioncontent top-blue-border thick">
			<div class="row featured">
			<div class="span2">
			<a href="">
			<img src="" alt="" title="" />
			</a>
			</div>
			<div class="span4">
			<h4></h4>
			<p class="secondary-text"></p>
			<p></p>
			<a href="" class="btn btn-register">Read More</a>
			</div>
			</div>
			<ul class="thumbnails">
			<li class="span2">
			<a href="" class="thumbnail">
			<img src="" alt="" title="" />
			<div class="caption"></div>
			</a>
			</li>
			<li class="span2">
			<a href="" class="thumbnail">
			<img src="" alt="" title="" />
			<div class="caption"></div>
			</a>
			</li>
			<li class="span2">
			<a href="" class="thumbnail">
			<img src="" alt="" title="" />
			<div class="caption"></div>
			</a>
			</li>
			</ul>
			<a href="" class="section-footer-link">
			More Running Tips, Training & Advice
			</a>
			</div>
			</section>

Tags

One repeating pattern is a list of tags, preceded by a header. This is used on profile, event, and article pages.

Related Items
biking distance endurance riding training for races bike training workout excercise plans 
			<section class="tags section">
			<h5>Related Items</h5>
			<a class="btn" href="#">biking</a>
			<a class="btn" href="#">distance</a>
			<a class="btn" href="#">endurance riding</a>
			<a class="btn" href="#">training for races</a>
			<a class="btn" href="#">bike training</a>
			<a class="btn" href="#">workout</a>
			<a class="btn" href="#">excercise plans</a>
			</section>