Typography

Basic typography information

• Base font size:
• Font family:
• Text color:

<h1>h1.Heading</h1>

<h2>h2.Heading</h2>

<h3>h3.Heading</h3>

<h4>h4.Heading</h4>

<h5>h5.Heading. Small text</h5>

<h6>h6.Heading. Extra small text</h6>

<h3 class="h5">h5.Heading style on a h3 tag</h3>

<p>Default paragraphy text</p>

<p class="typeHighlight1">Type Highlight</p>

<p class="typeLowlight">Type Lowlight</p>

<p class="typeUpper">Uppercase</p>

<strong>Bold text using strong tag</strong>

<em>Emphasis text using em tag</em>

Link

• Default link

  Default link

  <a href="#">Default link</a>

Boxes

Boxes are a common way of grouping related content. They consist of a wrapper with the class box applied. Inside a box, there are three sections the header, body, and footer. All boxes have a body, but some may not have either a header or footer.

Box Contours

Box contours are the outline of the box. You create different contours by extending the base class .box.

• This box has a white background.

  <div class="box boxBasic backgroundBasic">
    <div class="boxBody">
      <p>This box has a white background.</p>
    </div>
  </div>

Box Headers

Box Headers are a way to separate a small amount of content at the top of a box (usually a header) from the rest of the content.

• Box header. Can be any heading level.

  Box body

  <div class="box boxBasic">
    <div class="boxHead boxHeadBasic">
      <h5>Box header. Can be any heading level.</h5>
    </div>
    <div class="boxBody">
      <p>Box body</p>
    </div>
  </div>

Box Footers

Box Footers are a way to separate content at the bottom of a box from the rest of the content.

• Box body

  Box footer

  <div class="box boxBasic">
    <div class="boxBody">
      <p>Box body</p>
    </div>
    <div class="boxFoot boxFootBasic">
      <p>Box footer</p>
    </div>
  </div>

Grid

Grids may be used to break a page into smaller content areas. They allow you to layout full pages or even content within a box. They are infinitely nestable and stackable and will always retain the correct proportions with regard to the parent container.

You should use the cols class to define the relative proportions of the different content areas. For example, if you would like something to take one third of the space available on a line use the class cols4of12. In the examples below we have shown the most commonly used fractional widths, but you may use any value from 1 to 12.

Grid - responsive

The grid uses fluid width, but the responsive grid creates a set of additional classes based on the viewport sizes you set.

Viewport sizes corresponds to t-shirt size:

For each breakpoint that we set, we create a set of classes specific to the breakpoint.
E.g. if we only have 1 breakpoint(20em), it'll generate:

  @media only screen and (max-width: 20em) {
  .medHide {
  display: none !important;
  }

  ....

  .medCol1of12 {
  ...
  }
  }

Using viewport specific column classes

Using medExpand to expand columns

Using medHide and smShow to hide and show an element

Divider

The divider component is for separating vertical content.

<hr>

List

Lists are a common way of grouping related content. They consist of an ol (ordered list) or ul (unordered list) element containing li (list item) elements.

• Ordered List

  1. First list item
  2. Second list item
  3. Third list item

  <ol class="listOrdered">
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
  </ol>

• Bulleted List

  • First list item
  • Second list item
  • Third list item

  <ul class="listBulleted">
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
  </ul>

• Unbulleted list

  • First list item
  • Second list item
  • Third list item

  <ul class="listUnbulleted">
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
  </ul>

• Bordered

  • First list item
  • Second list item
  • Third list item

  <ul class="listBordered">
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
  </ul>

• Inline list

  • First list item
  • Second list item
  • Third list item

  <ul class="listInline">
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
  </ul>

• Inline list with dividers

  • First list item
  • Second list item
  • Third list item

  <ul class="listInlineDivider">
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
  </ul>

List Spacing

Most lists come with built in default spacing that should work for you. However, if you find yourself needing to modify the spacing, you should do that with list spacing classes rather than whitespace classes. A single class can be applied to the list and all direct children will be modified.

The classes are constructed by specifying <type><location><size>.

Vertical spacing options

<ul class="listBulleted lvn">
  <li>List item 1. Lorem ipsum Et.</li>
  <li>List item 2. Lorem ipsum Et exercitation ut fugiat.</li>
  <li>List item 3. Laboris ad laborum incididunt.</li>
</ul>

Horizontal spacing options

No spacing - lhn

• List item 1. Lorem ipsum Et.
• List item 2. Lorem ipsum Et exercitation ut fugiat.
• List item 3. Laboris ad laborum incididunt.

<ul class="listInlineDivider lhn">
  <li>List item 1. Lorem ipsum Et.</li>
  <li>List item 2. Lorem ipsum Et exercitation ut fugiat.</li>
  <li>List item 3. Laboris ad laborum incididunt.</li>
</ul>

Small spacing - lhs

• List item 1. Lorem ipsum Et.
• List item 2. Lorem ipsum Et exercitation ut fugiat.
• List item 3. Laboris ad laborum incididunt.

Medium spacing - lhm

• List item 1. Lorem ipsum Et.
• List item 2. Lorem ipsum Et exercitation ut fugiat.
• List item 3. Laboris ad laborum incididunt.

Large spacing - lhl

• List item 1. Lorem ipsum Et.
• List item 2. Lorem ipsum Et exercitation ut fugiat.
• List item 3. Laboris ad laborum incididunt.

Media Block

Media blocks are used to layout images with related content.

The media block is a UI pattern of an image to the left and some text (or really anything) that describes it to the right. The image can be any size. The media block has an optional right region which should also be fixed width.

Use any sized image or flash for the right or left area. Any content in the body including nesting other media blocks. Always set image height and width to avoid unnecessary reflows/repaints.

Simple text next to a small icon.

<div class="media">
  <a href="http://twitter.com/stubbornella" class="mediaImg ">
    <img src="http://placehold.it/21x21" width="21" height="21" alt="Left aligned image.">
  </a>
  <div class="mediaBody">Simple text next to a small icon.</div>
</div>

Right aligned media block

Media block with a right aligned image. Note that the media block expands to fill all the space available.

<div class="media">
  <a href="http://twitter.com/stubbornella" class="mediaImg mediaImgExt ">
    <img src="http://placehold.it/21x21" width="21" height="21" alt="Right aligned image.">
  </a>
  <div class="mediaBody">Media block with a right aligned image. Note that the media block expands to fill all the space available.</div>
</div>

Right and left aligned media block

This media block has an image aligned to the right via the imgExt class applied to the image wrapper. Images can be right, left, or both. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="media">
  <a href="http://twitter.com/stubbornella" class="mediaImg ">
    <img src="http://placehold.it/64x64" width="64" height="64" alt="Right aligned image.">
  </a>
  <a href="http://twitter.com/stubbornella" class="mediaImg mediaImgExt ">
    <img src="http://placehold.it/64x64" width="64" height="64" alt="Replace with good alt text">
  </a>
  <div class="mediaBody">
    <p class='mtn'>This media block has an image aligned to the right via the <code>imgExt</code> class applied to the image
      wrapper. Images can be right, left, or both. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed 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. Duis aute irure dolor in reprehenderit
      in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

Nested media block

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

media blocks can be nested.

<div class="media">
  <a href="http://twitter.com/stubbornella" class="mediaImg ">
    <img src="http://placehold.it/128x128" width="128" height="128" alt="">
  </a>
  <div class="mediaBody">
    <p class='mtn'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
      eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
      mollit anim id est laborum.</p>
    <div class='media'>
      <a href='#' class='mediaImg mrs'>
        <img src='http://placehold.it/21x21' alt='nested media block'>
      </a>
      <div class='mediaBody'>media blocks can be nested.</div>
    </div>
  </div>
</div>

Inline Media Block

Occasionally, you may need a media block that aligns vertically. In this case you should use the mediaInline. It only works with a single line of text, so use it judiciously. All mediaInline classes may be extended with vertical alignment utils txtT, txtM, and txtB to set the vertical alignment of that element to top, middle, or bottom respectively.

Left aligned inline media block

Icon on the left

<a class="mediaInline" href="/">
  <img src="http://placehold.it/25x25" width="25" height="25" alt="">
  <span>Icon on the left</span>
</a>

Right aligned inline media block

Icon on the right

<a class="mediaInline" href="/">
  <span>Icon on the right</span>
  <img src="http://placehold.it/25x25" width="25" height="25" alt="">
</a>

Table

Tables are used for structuring tabular data. You will need to set the width of the columns yourself.

• Header 1	Header 2	Header 3
  Text align left by default	Text align center	Text align right
  Text align left by default	Text align center	Text align right

  <div class="data">
    <table class="table ">
      <thead>
        <tr>
          <th style="width:30%">Header 1</th>
          <th class="txtC" style="width:20%">Header 2</th>
          <th class="txtR" style="width:20%">Header 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Text align left by default</td>
          <td class="txtC">Text align center</td>
          <td class="txtR">Text align right</td>
        </tr>
        <tr>
          <td>Text align left by default</td>
          <td class="txtC">Text align center</td>
          <td class="txtR">Text align right</td>
        </tr>
      </tbody>
    </table>
  </div>

Table Spacing

Table has a set of spacing classes that you can use to alter the spacing between cells. A single class can be applied to the table and all td and th children will be modified.

The classes are constructed by specifying <type><location><size>.

Example table with large spacing applied - tal

Buttons

<a href="#" class="btnLink">This is an anchor</a>

Form

Form component is composed with some components

    
...your form fields
  

<div class="line">
  <div class="col cols6of12">
    <div class="field">
      <label class="fieldLabel">Select your option set 1</label>
      <ul class="fieldGroup">
        <li>
          <span class="fieldItem checkbox">
            <input type="checkbox" id="checkboxgroupcol0" name="checkboxgroupcol">
            <label for="checkboxgroupcol0">Label for checkbox</label>
          </span>
        </li>
        <li>
          <span class="fieldItem checkbox">
            <input type="checkbox" id="checkboxgroupcol1" name="checkboxgroupcol">
            <label for="checkboxgroupcol1">Label for checkbox</label>
          </span>
        </li>
      </ul>
    </div>
  </div>
  <div class="col lastCol">
    <div class="field">
      <label class="fieldLabel">Select your option set 2</label>
      <ul class="fieldGroup">
        <li>
          <span class="fieldItem checkbox">
            <input type="checkbox" id="checkboxgroupcol20" name="checkboxgroupcol2">
            <label for="checkboxgroupcol20">Label for checkbox</label>
          </span>
        </li>
        <li>
          <span class="fieldItem checkbox">
            <input type="checkbox" id="checkboxgroupcol21" name="checkboxgroupcol2">
            <label for="checkboxgroupcol21">Label for checkbox</label>
          </span>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="field">
  <label for="singleLabelText1" class="labelLeft fieldLabel">Label on the left</label>
  <span class="fieldItem text">
    <input type="text" id="singleLabelText1">
  </span>
</div>

<div class="labelLeft">
  <div class="field">
    <label for="text111" class="fieldLabel">Label on the left</label>
    <span class="fieldItem text">
      <input type="text" id="text111">
    </span>
  </div>
  <div class="field">
    <label for="text222" class="fieldLabel">Label on the left</label>
    <span class="fieldItem text">
      <input type="text" id="text222">
    </span>
  </div>
</div>

<div class="field">
  <label for="text234" class="labelLeft">Label with input</label>
  <span class="fieldItem text">
    <input type="text" id="text234" class="cols6of24">
  </span>
</div>

Icon

Text presentation of the component icon

Whitespace

Most elements will have the correct spacing by default, so in most cases, spacing classes will not be needed. However, if you need to tweak elements by using margin or padding, use the following classes rather than adding to the CSS file.

Please use these to tweak existing elements rather than use these classes when building legos.

The classes are constructed by specifying <type><location><size>.

• This paragraph has a 20 pixel padding on all sides.

  <p class="pal">This paragraph has a 20 pixel padding on all sides.</p>

Utilities

Use these classes sparingly.

Horizontal Text Alignment

Vertical Text Alignment

Hiding Things