Mobilize16 Style Guide

Layout

Two-Column Content

Any content in the main content area can be organized into two columns. To place content, wrap all content to be placed in a column in a div with a class of wrapper__twocolumns (note that there are two underscores). Do this for each column.

Note that at smaller screen sizes (mobile), the columns will be abandoned and will stack vertically, one after the other.

<div class="wrapper__twocolumns">
	<h3>This is column 1</h3>
	<p>This is a paragraph in column 1.</p>
</div>

<div class="wrapper__twocolumns">
	<h3>This is column 2</h3>
	<p>This is a paragraph in column 2.</p>
</div>
		

Three-Column Content

Any content in the main content area can be organized into three columns. To place content, wrap all content to be placed in a column in a div with a class of wrapper__threecolumns (note that there are two underscores). Do this for each column.

Note that at smaller screen sizes (mobile), the columns will be abandoned and will stack vertically, one after the other.

<div class="wrapper__threecolumns">
	<h3>This is column 1</h3>
	<p>This is a paragraph in column 1.</p>
</div>

<div class="wrapper__threecolumns">
	<h3>This is column 2</h3>
	<p>This is a paragraph in column 2.</p>
</div>

<div class="wrapper__threecolumns">
	<h3>This is column 3</h3>
	<p>This is a paragraph in column 3.</p>
</div>
		

Content Elements

Animated Headers

There are two classes that need to be applied to each paragraph (<p>) element: .primary or .secondary, and .fadeInUp or .fadeInDown (note the latter two are case-sensitive).

.primary sets the text to the larger font size and is the first animation. Can be used with either .fadeInUp or .fadeInDown.

.secondary sets the text to the smaller font size and doesn't animate until .primary is finished animating. Can be used with either .fadeInUp or .fadeInDown.

.fadeInUp (case-sensitive) fades the text in and moves it from the bottom of the hero image background to the top. Can be used with either .primary or .secondary.

.fadeInDown (case-sensitive) fades the text in and moves it from the top of the hero image background to the top. Can be used with either .primary or .secondary.

Primary

Secondary

<p class="primary fadeInUp">Primary text</p>
<p class="secondary fadeInDown">Secondary text</p>
		

Headings

<h4> <h5> <h6> are identical in styling to discourage excessive levels of hierarchy.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Callouts

Heading 2 class="callout"

<h2 class="callout">Heading 2 class="callout"</h2>

Text Styles

.lead

For paragraphs that need to duplicate the styling of the first paragraph of each page. Use sparingly.

This is a paragraph with a class of "lead".

<p class="lead">This is a paragraph with a class of "lead".</p>

Fake CTAs

For links that should look like a CTA but when we don't want their behavior and clicks tracked by HubSpot.

<p class="fakecta"><a href="#">This is a fake CTA.</a></p>

Accordions

This uses the HTML5 elements <details> and <summary>.

The <details> element functions as a wrapper and tells the browser that any content placed inside this element will be hidden or shown as necessary.

The <summary> element is the text that is always shown and is clickable to show or hide the following content.

Any valid HTML can be placed between the <summary> and the </details> closing tag.

This is the clickable always-shown text.

This is the content that will hide and show when clicking the <summary> element.

<details>
	<summary>This is the clickable always-shown text.</summary>
	<p>This is the content that will hide and show when clicking the <summary> element.</p>
</details>

Accordions in open state by default

Accordions can be set to default to an open state, so that the first click on the <summary> element will close the <details> element. To do this, the <details> tag needs to have an attribute of open applied. The full <details> element should look like this: <details open>.

This is an accordion set to default to an open state.

This is the content that is defaulted to being shown and will hide when the <summary> element is clicked.

<details open>
	<summary>This is an accordion set to default to an open state.</summary>
	<p>This is the content that is defaulted to being shown and will hide when the <summary> element is clicked.</p>
</details>

Known Issues

  1. For this to work in Internet Explorer and Edge, details-element-polyfill.js (located here) must be attached to the page. This will be needed until Microsoft fully supports HTML5 in Edge and Internet Explorer. By default, all templates in the Mobilize16 theme have details-element-polyfill.js attached.
  2. Multi-line summary elements will break the layout position of the expand icon. Either shorten the text in the summary or reduce the number of columns in the layout (to provide more available width for the summary text so that it doesn't wrap to a new line).

Images

Images must be wrapped in a <figure> tag. A class of figure--left or figure--right is required to position the image to the left or right sides, respectively.

RLL Z4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla turpis nec nibh vestibulum, in molestie tellus elementum. Pellentesque accumsan lectus molestie ipsum blandit sagittis. Quisque iaculis libero rutrum lobortis cursus. Duis eget varius nisi. Donec tempor tortor quis eros vehicula sollicitudin. Aenean a feugiat neque, vitae porta eros. Nullam et ultrices turpis. Praesent viverra, diam nec efficitur varius, ex nulla aliquet ex, lobortis porttitor elit tellus in dolor. Etiam fringilla libero sit amet neque aliquet efficitur. Nam pretium ut metus convallis molestie. Duis sodales id ligula quis gravida. In tempor, ipsum eget lacinia tempor, dolor ipsum porttitor turpis, venenatis sagittis justo est eget urna. Curabitur bibendum cursus magna, quis dictum nunc auctor eget. Nunc porta facilisis mi, eu maximus sem rhoncus ac.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla turpis nec nibh vestibulum, in molestie tellus elementum. Pellentesque accumsan lectus molestie ipsum blandit sagittis. Quisque iaculis libero rutrum lobortis cursus. Duis eget varius nisi. Donec tempor tortor quis eros vehicula sollicitudin. Aenean a feugiat neque, vitae porta eros. Nullam et ultrices turpis. Praesent viverra, diam nec efficitur varius, ex nulla aliquet ex, lobortis porttitor elit tellus in dolor. Etiam fringilla libero sit amet neque aliquet efficitur. Nam pretium ut metus convallis molestie. Duis sodales id ligula quis gravida. In tempor, ipsum eget lacinia tempor, dolor ipsum porttitor turpis, venenatis sagittis justo est eget urna. Curabitur bibendum cursus magna, quis dictum nunc auctor eget. Nunc porta facilisis mi, eu maximus sem rhoncus ac.

<figure class="figure--right">
    <img src="http://i.imgur.com/JZckP3pm.jpg" width="220" alt="RLL Z4">
</figure>

Images with Captions

Use the <figure> element. A class of .figure--left or .figure--right can be applied to float the figure to the left or right.

For image sizing, use HubSpot's native controls in the text editor.

Duplicate the image as many times as needed for a specific caption.

RLL Z4 RLL Z4
The "Stars and Stripes" tribute paint scheme as run by Rahal Letterman Lanigan Racing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla turpis nec nibh vestibulum, in molestie tellus elementum. Pellentesque accumsan lectus molestie ipsum blandit sagittis. Quisque iaculis libero rutrum lobortis cursus. Duis eget varius nisi. Donec tempor tortor quis eros vehicula sollicitudin. Aenean a feugiat neque, vitae porta eros. Nullam et ultrices turpis. Praesent viverra, diam nec efficitur varius, ex nulla aliquet ex, lobortis porttitor elit tellus in dolor. Etiam fringilla libero sit amet neque aliquet efficitur. Nam pretium ut metus convallis molestie. Duis sodales id ligula quis gravida. In tempor, ipsum eget lacinia tempor, dolor ipsum porttitor turpis, venenatis sagittis justo est eget urna. Curabitur bibendum cursus magna, quis dictum nunc auctor eget. Nunc porta facilisis mi, eu maximus sem rhoncus ac.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla turpis nec nibh vestibulum, in molestie tellus elementum. Pellentesque accumsan lectus molestie ipsum blandit sagittis. Quisque iaculis libero rutrum lobortis cursus. Duis eget varius nisi. Donec tempor tortor quis eros vehicula sollicitudin. Aenean a feugiat neque, vitae porta eros. Nullam et ultrices turpis. Praesent viverra, diam nec efficitur varius, ex nulla aliquet ex, lobortis porttitor elit tellus in dolor. Etiam fringilla libero sit amet neque aliquet efficitur. Nam pretium ut metus convallis molestie. Duis sodales id ligula quis gravida. In tempor, ipsum eget lacinia tempor, dolor ipsum porttitor turpis, venenatis sagittis justo est eget urna. Curabitur bibendum cursus magna, quis dictum nunc auctor eget. Nunc porta facilisis mi, eu maximus sem rhoncus ac.

<figure class="figure--left">
    <img src="http://i.imgur.com/JZckP3pm.jpg" width="220" alt="RLL Z4">
    <img src="http://i.imgur.com/O6PPvlvm.jpg" width="220" alt="RLL Z4">
<figcaption>The "Stars and Stripes" tribute paint scheme as run by RLL Racing</figcaption>
</figure>

Code Samples

A script called PrettyPrint has been setup to automatically format webpage code samples in "C and friends, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, and Makefiles. It works passably on Ruby, PHP and Awk and a subset of Perl." Extensions are enabled to format Basic, SQL, and VB.

Since PrettyPrint needs to be turned on for each page it appears on, it does require a couple of steps to enable:

  1. Add the script link to the page's head by coping the relevant line from the source code of this Style Guide.
    1. In HubSpot, edit this page (the Style Guide page)
    2. Go to "Settings"
    3. Select "Edit Head HTML"
    4. Copy the <script> include that links to run_prettify.js
    5. Select Cancel and close from the Head HTML editor.
    6. In HubSpot, return to the page you're editing
    7. Edit this page.
    8. Go to "Settings"
    9. Select "Edit Head HTML"
    10. Paste the script that you copied from the Style Guide.
    11. Select Save changes from the Head HTML editor.
  2. Wrap each code sample in a <pre> element and declare a class of "prettyprint". If line numbers are desired, then add a class of "linenums". To enable formatting for Basic, SQL, or VB, they must be explicitly declared with a class of "lang-basic", "lang-sql", or "lang-vb".

The page will need to be published or updated in HubSpot before the changes will be visible.

<pre class="prettyprint linenums lang-vb">
... code here ...
</pre>

Tables

<thead> and <tbody> should always be used to give a visual distinction from the heading labels and the table body content.

The browswer will control sizing the widths of the table cells.

Default Tables

Head 1 Head 2
Cell 1 Cell 2
Cell 1 Cell 2
<table>
	<thead>
		<tr>
			<th>Head 1</th>
			<th>Head 2</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cell 1</td>
			<td>Cell 2</td>
		</tr>
		<tr>
			<td>Cell 2</td>
			<td>Cell 2</td>
		</tr>
	</tbody>
</table>

All-Text Tables

Head 1 Head 2
Row 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla turpis nec nibh vestibulum, in molestie tellus elementum. Pellentesque accumsan lectus molestie ipsum blandit sagittis.
Row 2 Quisque iaculis libero rutrum lobortis cursus. Duis eget varius nisi. Donec tempor tortor quis eros vehicula sollicitudin.
<table class="allText">
	<thead>
		<tr>
			<th>Head 1</th>
			<th>Head 2</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cell 1</td>
			<td>Cell 2</td>
		</tr>
		<tr>
			<td>Cell 2</td>
			<td>Cell 2</td>
		</tr>
	</tbody>
</table>