Typography

Basic typography information

  • Base font size:
  • Font family:
  • Text color:
h<n> Heading classes. Use when you need to make headings into different sizes.
typeHighlight1 Skin class. Optional. Blue text
typeLowlight Skin class. Optional. Light grey text
typeUpper Skin class. Optional. All uppser case

h1.Heading

<h1>h1.Heading</h1>

h3.Heading

<h3>h3.Heading</h3>

h4.Heading

<h4>h4.Heading</h4>
h5.Heading. Small text
<h5>h5.Heading. Small text</h5>
h6.Heading. Extra small text
<h6>h6.Heading. Extra small text</h6>

h5.Heading style on a h3 tag

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

Default paragraphy text

<p>Default paragraphy text</p>

Type Highlight

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

Type Lowlight

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

Uppercase

<p class="typeUpper">Uppercase</p>
Bold text using strong tag
<strong>Bold text using strong tag</strong>
Emphasis text using em tag
<em>Emphasis text using em tag</em>

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 Base class. Required. Skins and subclasses that extend box should add their classname to this element.
boxHead Subnode of box. Creates a box header which generally contains the box title and/or controls. Can be extended via skin classes. Optional.
boxBody Subnode of box. Creates the main content area of the box. Required. Any other types of objects may be placed inside the body of a box. A box does not control the display of it's content objects.
boxFoot Subnode of box. Creates the box footer. Any content can go in the footer including buttons, text, etc. Can be extended via a skin class. Optional.
boxBasic backgroundBasic this is a doc

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>

Caption Bubbles

Caption Bubbles are usually used for captions and modal messages.

  • Sed fringilla purus vitae bibendum malesuada. Donec eget mollis elit. Vivamus iaculis urna leo, nec tempor mauris sodales eu. Praesent sollicitudin pharetra felis, vitae interdum risus pulvinar sit amet. Nullam ac justo quis sapien lacinia cursus. Integer interdum eget nisl vitae luctus. In hac habitasse platea dictumst.

    <div class="box captionBubble ">
      <div class="arrow arrowAbove"></div>
      <div class="boxBody">
        <p>Sed fringilla purus vitae bibendum malesuada. Donec eget mollis elit. Vivamus iaculis urna leo, nec
          tempor mauris sodales eu. Praesent sollicitudin pharetra felis, vitae interdum risus pulvinar sit amet.
          Nullam ac justo quis sapien lacinia cursus. Integer interdum eget nisl vitae luctus. In hac habitasse
          platea dictumst.</p>
      </div>
    </div>
  • Sed fringilla purus vitae bibendum malesuada. Donec eget mollis elit. Vivamus iaculis urna leo, nec tempor mauris sodales eu. Praesent sollicitudin pharetra felis, vitae interdum risus pulvinar sit amet. Nullam ac justo quis sapien lacinia cursus. Integer interdum eget nisl vitae luctus. In hac habitasse platea dictumst.

    <div class="box captionBubble ">
      <div class="arrow arrowBelow"></div>
      <div class="boxBody">
        <p>Sed fringilla purus vitae bibendum malesuada. Donec eget mollis elit. Vivamus iaculis urna leo, nec
          tempor mauris sodales eu. Praesent sollicitudin pharetra felis, vitae interdum risus pulvinar sit amet.
          Nullam ac justo quis sapien lacinia cursus. Integer interdum eget nisl vitae luctus. In hac habitasse
          platea dictumst.</p>
      </div>
    </div>
  • Sed fringilla purus vitae bibendum malesuada. Donec eget mollis elit. Vivamus iaculis urna leo, nec tempor mauris sodales eu. Praesent sollicitudin pharetra felis, vitae interdum risus pulvinar sit amet. Nullam ac justo quis sapien lacinia cursus. Integer interdum eget nisl vitae luctus. In hac habitasse platea dictumst.

    <div class="box captionBubble ">
      <div class="arrow arrowLeft"></div>
      <div class="boxBody">
        <p>Sed fringilla purus vitae bibendum malesuada. Donec eget mollis elit. Vivamus iaculis urna leo, nec
          tempor mauris sodales eu. Praesent sollicitudin pharetra felis, vitae interdum risus pulvinar sit amet.
          Nullam ac justo quis sapien lacinia cursus. Integer interdum eget nisl vitae luctus. In hac habitasse
          platea dictumst.</p>
      </div>
    </div>
  • Sed fringilla purus vitae bibendum malesuada. Donec eget mollis elit. Vivamus iaculis urna leo, nec tempor mauris sodales eu. Praesent sollicitudin pharetra felis, vitae interdum risus pulvinar sit amet. Nullam ac justo quis sapien lacinia cursus. Integer interdum eget nisl vitae luctus. In hac habitasse platea dictumst.

    <div class="box captionBubble ">
      <div class="arrow arrowRight"></div>
      <div class="boxBody">
        <p>Sed fringilla purus vitae bibendum malesuada. Donec eget mollis elit. Vivamus iaculis urna leo, nec
          tempor mauris sodales eu. Praesent sollicitudin pharetra felis, vitae interdum risus pulvinar sit amet.
          Nullam ac justo quis sapien lacinia cursus. Integer interdum eget nisl vitae luctus. In hac habitasse
          platea dictumst.</p>
      </div>
    </div>

Carousel Options

data-interval Optional.
How many milliseconds the carousel will wait to change to the next slide
Defaults: 4000
data-transition-in Optional.
Can be one of the following:
  • fadeIn
  • slideInLeft
  • slideInRight
  • slideInDown
  • slideInUp
Case Sensitive.
Defaults: fadeIn
data-transition-out Optional.
Can be one of the following:
  • fadeOut
  • slideOutLeft
  • slideOutRight
  • slideOutDown
  • slideOutUp
Case Sensitive.
Defaults: fadeOut
data-transition-duration Optional.
How long in milliseconds it takes for both in and out transition animations to complete.
Defaults: 1000
data-animating Generated.
A boolean status that tell us if the carousel is currently in a state of animating a transition.
data-selected Generated.
An integer that tell us the currently selected slide index.

Carousel Slide Options

data-next-slide Optional.
Specifies the next slide index. Index starts from 0 to (slideCount-1)
Defaults: Sequential order
data-transition-in Optional.
Can be one of the following:
  • fadeIn
  • slideInLeft
  • slideInRight
  • slideInDown
  • slideInUp
Case Sensitive.
Defaults: Carousel data-transition-in
data-transition-out Optional.
Can be one of the following:
  • fadeOut
  • slideOutLeft
  • slideOutRight
  • slideOutDown
  • slideOutUp
Case Sensitive.
Defaults: Carousel data-transition-out
data-transition-duration Optional.
How long in milliseconds it takes for both in and out transition animations to complete.
Defaults: Carousel data-transition-duration

Carousel Examples

  • A basic carousel which slides in from the left and slides out to the right

    
    <div class="carousel" data-transition-in="slideInLeft" data-transition-out="slideOutRight">
      <!-- slides -->
      <div class="carouselSlide carouselSlideActive">
        <p></p>
      </div>
      <div class="carouselSlide">
        <p></p>
      </div>
      <div class="carouselSlide">
        <p></p>
      </div>
    </div>
    <!-- buttons -->
    <div class="txtC mvm">
      <button id="carouselBtn1" class="btn btnDefault carouselBtn" style="background-color: lightGray"></button>
      <button id="carouselBtn2" class="btn btnDefault carouselBtn"></button>
      <button id="carouselBtn3" class="btn btnDefault carouselBtn"></button>
    </div>
    <script>
      $(document).ready(function() {
          // starts all carousels
          oocss.carousel.startAll();
          // Button click examples
          $("#carouselBtn1").click(function() {
              oocss.carousel.select("#basicCarousel", 0);
          });
          $("#carouselBtn2").click(function() {
              oocss.carousel.select("#basicCarousel", 1);
          });
          $("#carouselBtn3").click(function() {
              oocss.carousel.select("#basicCarousel", 2);
          });
          $("#basicCarousel").change(function(event, index) {
              $(".carouselBtn").css("background-color","white");
              $("#carouselBtn" + (index+1)).css("background-color","lightGray");
          });
      });
    </script>
  • An advanced carousel which has its transition and order specified for each slide and contains arrow buttons for manual sliding

    
    <div class="carousel" data-transition-in="slideInUp" data-transition-out="slideOutDown">
      <!-- arrow buttons -->
      <div class="arrow arrowLeft"></div>
      <div class="arrow arrowRight"></div>
      <div class="arrow arrowAbove"></div>
      <div class="arrow arrowBelow"></div>
      <!-- slide -->
      <div class="carouselSlide carouselSlideActive" data-transition-in="fadeIn" data-transition-out="slideOutLeft"
      data-next-slide="2">
        <div class="media mvn">
          <a href="#" class="mediaImg">
            <img />
          </a>
          <div class="mediaBody">
            <p class="mvn"></p>
          </div>
        </div>
      </div>
      <!-- slide -->
      <div class="carouselSlide" data-transition-in="slideInRight" data-transition-out="fadeOut" data-next-slide="0">
        <div class="media mvn">
          <a href="#" class="mediaImg">
            <img />
          </a>
          <div class="mediaBody">
            <p class="mvn"></p>
          </div>
        </div>
      </div>
      <!-- slide -->
      <div class="carouselSlide" data-transition-in="slideInDown" data-transition-out="slideOutUp" data-next-slide="1">
        <div class="media mvn">
          <a href="#" class="mediaImg">
            <img />
          </a>
          <div class="mediaBody">
            <p class="mvn"></p>
          </div>
        </div>
      </div>
    </div>
    <script>
      // Arrow code examples
      $(".arrowLeft").click(function() {
          oocss.carousel.prev($(this).parent(), 'slideInRight', 'slideOutLeft');
      });
      $(".arrowRight").click(function() {
          oocss.carousel.next($(this).parent(), 'slideInLeft', 'slideOutRight');
      });
      $(".arrowAbove").click(function() {
          oocss.carousel.prev($(this).parent(), 'slideInUp', 'slideOutUp');
      });
      $(".arrowBelow").click(function() {
          oocss.carousel.next($(this).parent(), 'slideInDown', 'slideOutDown');
      });
    </script>

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.

line Wrapper around one horizontal grouping of columns. This class takes all available width.
cols<n>of12 All columns are a fractional width of the total horizontal space taken up by their parent .line element.
lastCol For <=IE8 you must include a class lastCol on the final column in each line. This is because IE 7 & 8 do not support the last-child selector.

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:

No. of breakpoints Sizes
1 med
2 lg, med
3 lg, med, sm
4 xl, lg, med, sm
5 xl, lg, med, sm, xs
6 xxl, xl, lg, med, sm, xs
7 xxl, xl, lg, med, sm, xs, xxs
8 xxxl, xl, lg, med, sm, xs, xxs
9 xxl, xl, lg, med, sm, xs, xxs, xxxs

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 {
  ...
  }
  }

The classes only get triggered at the specific breakpoint, giving you full flexibility in creating a responsive site.

<tshirtSize>Hide Hide element
<tshirtSize>Show Hide element
<tshirtSize>Col Float a column left
<tshirtSize>ColExt Float a column right
<tshirtSize>Cols<n>of12 Column widths
<tshirtSize>Expand Make element full width. Can be added to <line> in the grid to expand columns

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> An hr element creates a horizontal divider.

<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.

listOrdered Ordered list. Shows an numbered indicator for each list item. Can be extended via skin classes
listBulleted Unordered list. Base class. Skins and subclasses that extend ul should add their classname to this element.
listUnbulleted An unordered list with no bullets and has top and bottom margin.
listBordered List with top border
listInline Inline list
listInlineDivider Inline list with dividers
  • 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>.

Type:
l list Space on the inside of each of the li direct children of the element
Location:
h horizontal Adds spacing to the left and right of the li.
v vertical Adds spacing to the top and bottom of the li.
Size:
l large Adds 21 pixels of space
m medium Adds 10 pixels of space
s small Adds 5 pixels of space
n none Sets any existing space to 0

Vertical spacing options

No spacing - lvn

  • List item 1. Lorem ipsum Et.
  • List item 2. Lorem ipsum Et exercitation ut fugiat.
  • List item 3. Laboris ad laborum incididunt.
<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>

Small spacing - lvs

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

Medium spacing - lvm

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

Large spacing - lvl

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

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

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.

media The wrapper class for the media block. Required.
mediaBody Wrapper of the content region of the media block. Any content or other UI objects, including other media blocks may be nested within the media body.
mediaImg Applied to an image or wrapper of the image (often a link), that you wish to align left. Optional.
mediaImgExt Applied to an image or wrapper of the image (often a link), that you wish to align right. Optional.
Left aligned image.
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

Right aligned image.
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

Right aligned image. Replace with good alt text

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.

nested media block
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>

Media Inline

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.

mediaInline The wrapper class for the inline media block. Required.
mediaInlineBody Wrapper of the content region of the inline media block. It can only contain a single line of text. If you need more than that, use a regular media block.
mediaInlineImg Applied to an image or wrapper of the image (often a link), that you wish to align left. Optional.
mediaInlineImgExt Applied to an image or wrapper of the image (often a link), that you wish to align right. Optional.

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.

table Base class. Required. Skins and subclasses that extend table should add their classname to this element.
Positioning helper classes
  • txtL - align the text to the left of the cell (default)
  • txtC - horizontally center the text in the cell
  • txtR - horizontally align the text to the right of the cell
  • txtT - vertically align text to the top of the cell
  • txtM - vertically align text to the middle of the cell (default)
  • txtB - vertically align text to the bottom of the cell
  • 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>.

Type:
t table Space on the inside of each of the td and th children of the element
Location:
a all Adds spacing to all sides of the children td and th.
h horizontal Adds spacing to the left and right of the td and th.
v vertical Adds spacing to the top and bottom of the td and th.
Size:
l large Adds 20 pixels of space
m medium Adds 10 pixels of space
s small Adds 5 pixels of space
n none Sets any existing space to 0

Example table with large spacing applied - tal

Header 1 Header 2 Header 3
Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum

Buttons

btnDefault Base class. Required. Skins and subclasses that extend btn should add their classname to this element.
btnLink Button that looks like a link

Base Button

<button class="btn btnDefault">Base button</button>

Button with anchor element

Sometimes an element might look like a button, but semantically and functionally isn't one. A lot of the times it's an anchor looking like a button. When an element directs the user to another location, use <code>a</code>

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

Form

Form component is composed with some components

Form containers

Forms need to have class form.


    
...your form fields

Each group form field is wrapped by field, usually consisting of a labek and a type of form field.

The form field is wrapped by class fieldItem plus the type of form field: text, select, radio and checkbox.

  • Input text

    <div class="field">
      <label for="text1" class="fieldLabel">Label with input</label>
      <span class="fieldItem text">
        <input type="text" id="text1">
      </span>
    </div>
  • Select

    <div class="field">
      <label for="select" class="fieldLabel">Label with select</label>
      <span class="fieldItem select">
        <select id="select">
          <option value="">Any</option>
          <option value="0">Option 0</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
        </select>
      </span>
    </div>
  • Checkbox

    <div class="field">
      <span class="fieldItem checkbox">
        <input type="checkbox" id="checkbox1-1" name="checkbox1">
        <label for="checkbox1-1">Label for checkbox</label>
      </span>
    </div>

    Radio

    <div class="field">
      <span class="fieldItem radio">
        <input type="radio" id="radio1-1" name="radio1">
        <label for="radio1-1">Label for radio button</label>
      </span>
    </div>
  • Textarea

    <div class="field">
      <label for="textarea" class="fieldLabel">Label with textarea</label>
      <span class="fieldItem text">
        <textarea id="textarea" rows="4"></textarea>
      </span>
    </div>
  • Field Group

    Use fieldGroup on ul if the list of form fields are related.

    List of radio buttons
    <div class="field">
      <label class="fieldLabel">Select your options</label>
      <ul class="fieldGroup">
        <li>
          <span class="fieldItem radio">
            <input type="radio" id="radiogroup20" name="radiogroup">
            <label for="radiogroup20">Label for radio button</label>
          </span>
        </li>
        <li>
          <span class="fieldItem radio">
            <input type="radio" id="radiogroup21" name="radiogroup">
            <label for="radiogroup21">Label for radio button</label>
          </span>
        </li>
      </ul>
    </div>
    List of checkboxes
    <div class="field">
      <label class="fieldLabel">Select your option</label>
      <ul class="fieldGroup">
        <li>
          <span class="fieldItem checkbox">
            <input type="checkbox" id="checkboxgroup20" name="checkboxgroup">
            <label for="checkboxgroup20">Label for checkbox</label>
          </span>
        </li>
        <li>
          <span class="fieldItem checkbox">
            <input type="checkbox" id="checkboxgroup21" name="checkboxgroup">
            <label for="checkboxgroup21">Label for checkbox</label>
          </span>
        </li>
      </ul>
    </div>
    List of inputs
    <div class="field">
      <label class="fieldLabel">Your email addresses</label>
      <ul class="fieldGroup">
        <li>
          <label for="emailInputblock0">Email address 0</label>
          <span class="fieldItem text">
            <input type="text" id="emailInputblock0">
          </span>
        </li>
        <li>
          <label for="emailInputblock1">Email address 1</label>
          <span class="fieldItem text">
            <input type="text" id="emailInputblock1">
          </span>
        </li>
      </ul>
    </div>
    List of selects
    <h5>List of selects</h5>
    <div class="field">
      <label class="fieldLabel">Select your options</label>
      <ul class="fieldGroup">
        <li>
          <label for="selectInputblock0">Option 0</label>
          <span class="fieldItem select">
            <select id="selectInputblock0">
              <option value="">Any</option>
              <option value="0">Option 0</option>
              <option value="1">Option 1</option>
              <option value="2">Option 2</option>
            </select>
          </span>
        </li>
        <li>
          <label for="selectInputblock1">Option 1</label>
          <span class="fieldItem select">
            <select id="selectInputblock1">
              <option value="">Any</option>
              <option value="0">Option 0</option>
              <option value="1">Option 1</option>
              <option value="2">Option 2</option>
            </select>
          </span>
        </li>
      </ul>
    </div>
  • Field Group Inline

    Use fieldGroupInline on ul if the list of form fields are related and inline.

    List of inline radio buttons
    List of inline checkboxes
    List of inline text boxes
  • Range

    Use fieldRange on ul if you want to have form fields to indicate a range. Use grid column classes (cols<n>of12) to achieve different widths.

Layout

Columns

You can use the grid to create column layouts within your form.

<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>

Label on the left

Single field with label on left

Add class labelLeft to label.

<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>
Multiple fields with label on left

Add class labelLeft to parent container.

<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>

Sizing

You can use cols<n>of24 to give labels form fields different sizing

<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

icon Base class. Required. Skins and subclasses that extend icon should add their classname to this element.
iconExt Skin class. Makes margin on left side instead of right

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>.

Type:
p padding Space on the inside of the element
m margin Space on the outside of the element
Location:
a all Adds spacing on all sides of the element
t top Adds spacing to the top of the element
r right Adds spacing to the right of the element
b bottom Adds spacing to the bottom of the element
l left Adds spacing to the left of the element
h horizontal Adds spacing to the left and right of the element
v vertical Adds spacing to the top and bottom of the element
Size:
l large Adds 21 pixels of space
m medium Adds 10 pixels of space
s small Adds 5 pixels of space
n none Sets any existing space to 0
  • This paragraph has a 20 pixel padding on all sides.

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

Utilities

Use these classes sparingly.

Horizontal Text Alignment

txtL Align text left
txtC Align text center
txtR Align text right

Vertical Text Alignment

txtT Align text top
txtB Align text bottom
txtM Align text middle

Hiding Things

hideText Hides only text of an element.
hideFully Hides content both visually and from screen readers.
hideVisually Hides content visually but allow screen reader to read it.
hideVisually.focusable Hide content visually but can be focused on e.g. used on skip link.