Code Club Style Guide

Typography

Fonts

Our main font is Museo Sans Rounded and is used in weights 300 (default) and 500 (bold, headings, links, buttons).

Museo is not a system font, so it must be purchased and licensed for web use. It is available to license from the following vendors, as well as many others:

For Cryllic alphabets, we use Museo Sans Cyrillic.


Headings

Example

Page heading

Secondary heading

Tertiary heading

Sub heading

Small heading
Micro heading
<h1>Page heading</h1>
<h2>Secondary heading</h2>
<h3>Tertiary heading</h3>
<h4>Sub heading</h4>
<h5>Small heading</h5>
<h6>Micro heading</h6>

Body copy

Paragraphs are set at 16px with a 22px leading. For legibility, the maximum line-length is 40em. This is the base font sizing. On larger screens, the relative em value will increase.

On smaller devices the base font sizing remains the same but the headings will decrease in relative size.

Example

Lorem ipsum dolor sit amet, duo nostro ocurreret abhorreant at, his ut errem vocibus suscipit, veniam nonumy eu duo. Sea et wisi decore, cu verterem hendrerit mel. Latine deleniti vim an, vim an congue nostrum definitiones. Ipsum tibique salutandi sed at. Id mundi graece percipit usu, commune deleniti ad eum.

An his paulo vocibus praesent. An odio voluptaria reformidans vis, ad est odio apeirian, per soleat ponderum signiferumque ne. Idque consectetuer ius ei, mea affert vivendo voluptatibus ei. Accumsan noluisse mea cu, nostrum fastidii ex has. Ad congue docendi sit, an melius bonorum laboramus eam, hinc commodo laoreet in vim.

<p>Lorem ipsum dolor sit amet, duo nostro ocurreret abhorreant at, his ut errem vocibus suscipit, veniam nonumy eu duo. Sea et wisi decore, cu verterem hendrerit mel. Latine deleniti vim an, vim an congue nostrum definitiones. Ipsum tibique salutandi sed at. Id mundi graece percipit usu, commune deleniti ad eum.</p>
<p>An his paulo vocibus praesent. An odio voluptaria reformidans vis, ad est odio apeirian, per soleat ponderum signiferumque ne. Idque consectetuer ius ei, mea affert vivendo voluptatibus ei. Accumsan noluisse mea cu, nostrum fastidii ex has. Ad congue docendi sit, an melius bonorum laboramus eam, hinc commodo laoreet in vim.</p>

Smaller items can be set in 14px. Useful for meta information, notes, etc

Example

Smaller items can be set in 14px. Useful for meta information, notes, etc

<p class="c-meta">Smaller items can be set in 14px. Useful for meta information, notes, etc</p>

There is a larger class which is useful for presenting introductory pieces of text, callouts, or similar.

Example

There is a larger class which is useful for presenting introductory pieces of text, callouts, or similar.

<p class="c-lede">There is a larger class which is useful for presenting introductory pieces of text, callouts, or similar.</p>

Alignment Utilities

For aligning text on an ad-hoc basis, the following utility classes can be used.

Example

Left aligned text

Center aligned text

Right aligned text

<p class="u-text--left">Left aligned text</p>
<p class="u-text--center">Center aligned text</p>
<p class="u-text--right">Right aligned text</p>

Colour Adjustment Utilities

The following utility classes will allow you to change the colour of your text. Be careful to display text on a contrasting background to aid readability.

Example

Lorem Ipsum dolor sit amet

Lorem Ipsum dolor sit amet

Lorem Ipsum dolor sit amet

Lorem Ipsum dolor sit amet

Lorem Ipsum dolor sit amet

Lorem Ipsum dolor sit amet

Lorem Ipsum dolor sit amet

Lorem Ipsum dolor sit amet

Lorem Ipsum dolor sit amet

<p class="u-color--grey-dark">Lorem Ipsum dolor sit amet</p>
<p class="u-color--grey-med">Lorem Ipsum dolor sit amet</p>
<p class="u-color--grey-light">Lorem Ipsum dolor sit amet</p>
<p class="u-color--grey-x-light">Lorem Ipsum dolor sit amet</p>
<p class="u-color--grey-xx-light">Lorem Ipsum dolor sit amet</p>
<p class="u-color--green">Lorem Ipsum dolor sit amet</p>
<p class="u-color--blue">Lorem Ipsum dolor sit amet</p>
<p class="u-color--yellow">Lorem Ipsum dolor sit amet</p>
<p class="u-color--red">Lorem Ipsum dolor sit amet</p>

Unordered Lists

Nothing fancy. They look like this:

Example
  • See?
  • It's just a regular list.
  • With bullet points.
  • Mmm lovely bullet points.
  • I like bullet points.
<ul>
<li>See?</li>
<li>It's just a regular list.</li>
<li>With bullet points.</li>
<li>Mmm lovely bullet points.</li>
<li>I like bullet points.</li>
</ul>

Ordered Lists

Again, absolutely nothing special whatsoever.

Example
  1. I told you so.
  2. Nothing special.
  3. Doesn't even have bullet points.
  4. What's this? Numbers?
  5. I'd rather have a bullet point.
  6. But that's just me.
<ol>
<li>I told you so.</li>
<li>Nothing special.</li>
<li>Doesn't even have bullet points.</li>
<li>What's this? Numbers?</li>
<li>I'd rather have a bullet point.</li>
<li>But that's just me.</li>
</ol>

Tables

Example
Type Date Rating
Cheddar Jan 3, 2012 ★★★
Havarti Jan 12, 2012 ★★★★
Muenster Jan 20, 2012 ★★
Swiss Jan 22, 2012
Gouda Jan 25, 2012 ★★★★★
Emmentaler Jan 27, 2012 ★★★
<table>
<thead>
<tr>
<th>Type</th>
<th>Date</th>
<th>Rating</th>
</tr>
</thead>
<tr>
<td>Cheddar</td>
<td>Jan 3, 2012</td>
<td>★★★</td>
</tr>
<tr>
<td>Havarti</td>
<td>Jan 12, 2012</td>
<td>★★★★</td>
</tr>
<tr>
<td>Muenster</td>
<td>Jan 20, 2012</td>
<td>★★</td>
</tr>
<tr>
<td>Swiss</td>
<td>Jan 22, 2012</td>
<td></td>
</tr>
<tr>
<td>Gouda</td>
<td>Jan 25, 2012</td>
<td>★★★★★</td>
</tr>
<tr>
<td>Emmentaler</td>
<td>Jan 27, 2012</td>
<td>★★★</td>
</tr>
</table>

Blockquotes and Citations

Example
I think Code Club is brilliant, and my favourite moments are when the kids’ eyes light up when they get something right, or they have a new experience with technology that is fun and creative.”
Code Club Volunteer
<blockquote>I think Code Club is brilliant, and my favourite moments are when the kids’ eyes light up when they get something right, or they have a new experience with technology that is fun and creative.”</blockquote>
<cite>Code Club Volunteer</cite>