Core Elements

Typography

Typography is an often-overlooked but absolutely essential part to your design. Below are the styled typographic elements that are found in VM UI Framework.

Flexible Font Sizing

The typography and many of the elements in VM UI Framework are em-based, meaning that they will scale according to the base font size you assign to the <body>. The default base font size is 16 pixels, but you can change everything with a single CSS declaration.

Typographic Elements

Example Tags
bold text <strong>, <b>
italic text <em>, <i>
abbr. text <abbr>
ASAP (acronym text) <acronym>
deleted text <del>
inserted text <ins>
link text <a>

Return to top

Headings

Headings can be combined with a byline, which is done simply by inserting the <small> element into your heading tag. If you'd like to have your heading underlined as a title, just give it the class title. For an extra large page title, give an <h1> tag a class of pageTitle.

Heading 1 This is a byline

Heading 2 This is a byline

Heading 3 This is a byline

Heading 4 This is a byline

Heading 5 This is a byline
Heading 6 This is a byline

Lists

Lists come in three varieties, ordered, unordered, and definition or <ol>, <ul>, and <dl> respectively. Ordered and unordered lists have an automatic margin-left of 40px and a margin-bottom of 20px, so keep that in mind if you need to style a list for other purposes.

Unlisted

If you don't want to bullets or numbers on ordered or unordered lists, just add the class unlisted to the <ol> or <ul> tags.

Ordered Lists

Use ordered lists for items that can be numbered. No extra markup is needed to make the numbers bold.

  1. Item One
  2. Item Two
  3. Item Three
    1. Item 3.1
    2. Item 3.2
      1. Item 3.2.1
      2. Item 3.2.2
  4. Item Four
Unordered Lists

Use ordered lists for items that don't need to be numbered or organized in any particular order.

  • Item One
  • Item Two
  • Item Three
    • Item 3.1
    • Item 3.2
  • Item Four
Definition Lists

Use definition lists to define terms or associate one or more items that have a direct relationship.

HTML
HyperText Markup Language
XHTML
eXtensible HyperText Markup Language
Second definition would go here
CSS
Cascading Style Sheets
Tree Lists

Tree lists are a vertical list meant to show a hierarchy. They don't require additional markup, just add a class of tree to a <ul> element.

Tree List Example
  • Unrelated
  • Parent
    • Child
    • Child
      • Grandchild
        • Great Grandchild
        • Great Grandchild
      • Grandchild
      • Grandchild
    • Child
  • Single Parent
    • Only Child
Flush Lists

Most lists have a default margin-left of 2.5em to offset the list from the page content, but sometimes this is not desired behavior. To make remove the left margin from a list, just add the class flush to the <ul> or <ol>. If you have a nested list, the child lists will not be made flush. You will need to add flush to each list individually.

Horizontal Lists

If you want to make a list's items align horizontally, add the class horizontal to the list element. Each child <li> element will be floated to the left. No padding will be added, though each <li> element will have a margin-right: 1em;. Horizontal lists will also have a list-style: none; and a margin-left: 0;.

The horizontal list is perfect for creating simple, text-based menus. For more complex menus, check out the navigation section.

Horizontal List Example
Node Lists

If you need to create a node-like structure with a list, just add the class node to any <ul> element. You will also need to wrap the content of each node, excluding any child <ul> elements, with a <span> tag and the node list will be created automatically.

  • Unrelated
  • ParentParent
    • Child
    • Child
      • Grandchild
        • Great Grandchild
        • Great Grandchild
      • Grandchild
      • Grandchild
    • Child
  • Single Parent
    • Only Child

Warning Node lists have a few caveats to using them, so they won't be suitable for all use cases:

  • The width of the column must be wide enough to properly display the node hierarchy. A node list is partially responsive, but still requires a proper amount of space otherwise it may break.
  • Because of the way node lists create the connecting lines between nodes, you'll want to stick with solid backgrounds. If you want to change background color from white, you'll have to make a few adjustments to multiple before and after pseudo-elements.
  • Using multiple parents on the top level works, but it may take a little extra work to make them look right on sub-levels.
  • On smaller screen sizes, a node list will automatically turn into a tree list.

Return to top

Quotations

You can add quotations to your content. Use <q> and <cite> for short inline quotations like this text and <blockquote> for longer quotations.

The essence of software development is being able to break any seemingly complex problem into bite-sized chunks, solving them one-by-one. The ability to make a profitable piece of software lies in solving the right problem for the right people in such a way that they can quickly see the benefit.

A <blockquote> is 300px by default for column widths of 6 and above. For column widths of 5 and below, the blockquote will be displayed at 100% width. If you want to float it, simply add a utility class of either left or right. Keep in mind that blockquotes that are displayed at 100% width will have their float removed. If you use a <p> tag inside your <blockquote>, the first letter of the first paragraph will feature a dropcap.

Return to top

Blockquotes that are floated to the left will have the divider on the right rather than the left.

A beginning is a very delicate time. Know then that it is the year 10191. The Known Universe is ruled by the Padishah Emperor Shaddam IV, my father. In this time, the most precious substance in the universe is the spice Melange. The spice extends life.

- Princess Irulan

If you would like to add an author name or credit a source as a visible citation, just include it in the blockquote, wrapped in the <small> tag. If you have a URL to point to for a citation, be sure to use the blockquote's cite attribute.

Code

Default Code Block
/**
 * This is a CSS comment block
 */
p {
	color: red;
 	font-weight: bold;
}			

Return to top

For small snippets of code, wrap them in the <code> tag. For longer snippets, wrap them inside a <pre> tag.

Syntax Highlighting

Code syntax highlighting can be accomplished by including the Lighter JavaScript plugin.

Tables

Table styling is handled automatically, no extra markup is needed. Just use semantically-proper markup for the table, with an optional table header and footer. At no time should a table ever be used to achieve a layout effect.

Username Email Hometown
Options could go here.
Donald Duck donald@duck.com Quackville
John Doe john@doe.com Anywhere, USA
Sally Sometimes saso@gmail.com Washington D.C.
Jay Leno jay@leno.com LA
Justin B. j@belieb.com Somewhere in Canada
Users Table
ID Username Email Hometown
1 Donald Duck donald@duck.com Quackville
2 John Doe john@doe.com Anywhere, USA
3 Sally Sometimes saso@gmail.com Washington D.C.
4 Jay Leno jay@leno.com LA
5 Justin B. j@belieb.com Somewhere in Canada

If you want a table with a title bar and subheadings, simply use a <th> tag for the title and a <td> tag for the column-headings in the <thead>.

To add zebra-striping to your table, just add the class stripedTable to the <table> element.

Username Email Hometown
Donald Duck donald@duck.com Quackville
John Doe john@doe.com Anywhere, USA
Sally Sometimes saso@gmail.com Washington D.C.
Jay Leno jay@leno.com LA
Justin B. j@belieb.com Somewhere in Canada
Users Table
ID Username Email Hometown
1 Donald Duck donald@duck.com Quackville
2 John Doe john@doe.com Anywhere, USA
3 Sally Sometimes saso@gmail.com Washington D.C.
4 Jay Leno jay@leno.com LA
5 Justin B. j@belieb.com Somewhere in Canada

Adding a borderedTable class to the <table> element will produce a table with borders around each cell.

Responsive Tables

Because each table is different, tables can be difficult to make responsive (as demonstrated by the examples above). There is no "one-size-fits-all" approach because the data that needs to be displayed from table to table varies so much. In recognition of this design dilemma, VM UI Framework provides several different approaches to making tables responsive.

Column Tables

In cases where it's necessary to display all of the data in a wide table, you can add the class columnTable to the table element. Then, for each td element in the tbody, add a data-attribute of data-column with the column's name as the value. For mobile-sized screens, each row in the table will collapse into a single column, with each cell value preceded by the column name. (Chris Coyier gets the credit for this technique).

Users Table
Users Table
ID Username Email Hometown
1 Donald Duck donald@duck.com Quackville
2 John Doe john@doe.com Anywhere, USA
3 Sally Sometimes saso@gmail.com Washington D.C.
4 Jay Leno jay@leno.com LA
5 Justin B. j@belieb.com Somewhere in Canada

Note In order to maintain consistent header bars for the table, you will need to use both the <caption> element and the <th> element. The <caption> will be shown for mobile screens, but hidden for all other sizes. The <th> will display for the inverse.

Hiding Select Columns

For some tables, it may not be necessary to display all columns on smaller screens. In such cases, you can use the selective display classes on each <th> and <td> in the column you wish to hide or show at select screen resolutions.

Users Table
ID Username Email Hometown
1 Donald Duck donald@duck.com Quackville
2 John Doe john@doe.com Anywhere, USA
3 Sally Sometimes saso@gmail.com Washington D.C.
4 Jay Leno jay@leno.com LA
5 Justin B. j@belieb.com Somewhere in Canada

Table Cell Shading

Some tables may require shading options per individual cell. Just add the proper cell-shading class to the td element you wish to shade.

Return to top

Table Cell Shading Classes
Class Example
disabledCell Disabled Cell
infoCell Info Cell
successCell Success Cell
warningCell Warning Cell
errorCell Error Cell

Forms

Creating forms is simple; for most elements, no added classes are necessary for default styling. However, if you want a form field to be a specific width, give it a class of col1, col2, etc.

Checkboxes and Radios

Checkboxes and radios are special cases when it comes to styling. They should always be wrapped in a <div> container that has a class of formContainer. This applies even for checkboxes that appear by themselves.

In order to align checkbox and radio labels with the inputs, each checkbox or radio input should be wrapped with its <label>. The label text should appear either before or after the <input> element, depending on which side you want it to appear.

Additional Styling

Selects, checkboxes, and radios can be custom-styled using several of our JavaScript plugins.

Return to top

Sample Form

Buttons

There are several styles of buttons, each with a specific name designed to be both semantic and easy to remember. You should endeavor to make consistent use of the button type throughout your application or website. To create a button, simply add the appropriate button class to the element.

Example Classes
Button button, secondaryButton
Button infoButton
Button successButton, primaryButton
Button warningButton
Button errorButton
Button contrastButton
Buttons Sizes

There are three button sizes: small, medium, and large. To make your button either medium or large, prepend the size to your button class. For example, largeInfoButton or mediumSuccessButton. Small buttons are the default size, so there is no need to append anything to the end of the class. The small buttons can also be used inline with text (Example), but the medium and large button will push vertical margins so that they won't disrupt vertical rhythm.

Multi-line Buttons

Multi-line buttons allow you to add subtitle text to larger button text and are meant for important calls-to-action, like downloads, sign-ups, etc. To create a multi-line button, use any of the existing button classes (except the sized classes like Medium or Large) and append Multi to the class name, like multiSuccessButton or multiInfoButton.

Free DownloadVersion 1.1 Available Take A TourOver 100 Features

Return to top

Button Groups

If you want to group buttons together in a tight row, wrap them with a containing <ul> element with a class of buttonGroup. You can use any size or color buttons for your button group, but each group should maintain a consistent size (and usually a consistent color as well, though there may be a few cases where you want to mix and match).

Want to continue the tour?

VM UI Framework is created, owned, maintained by Virtuosi Media, Inc. © 2012-2013.