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.
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.
Example | Tags |
---|---|
bold text | <strong> , <b> |
italic text | <em> , <i> |
abbr. text | <abbr> |
ASAP (acronym text) | <acronym> |
<del> |
|
inserted text | <ins> |
link text | <a> |
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
.
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.
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.
Use ordered lists for items that can be numbered. No extra markup is needed to make the numbers bold.
Use ordered lists for items that don't need to be numbered or organized in any particular order.
Use definition lists to define terms or associate one or more items that have a direct relationship.
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.
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.
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.
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.
Warning Node lists have a few caveats to using them, so they won't be suitable for all use cases:
before
and after
pseudo-elements.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.
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.
/** * This is a CSS comment block */ p { color: red; font-weight: bold; }
For small snippets of code, wrap them in the <code>
tag. For longer snippets,
wrap them inside a <pre>
tag.
Code syntax highlighting can be accomplished by including the Lighter JavaScript plugin.
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 | 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 | 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 | 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 | 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.
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.
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 | |||
---|---|---|---|
ID | Username | 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.
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 | 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 |
Some tables may require shading options per individual cell. Just add the proper cell-shading class
to the td
element you wish to shade.
Class | Example |
---|---|
disabledCell |
Disabled Cell |
infoCell |
Info Cell |
successCell |
Success Cell |
warningCell |
Warning Cell |
errorCell |
Error Cell |
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 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.
Selects, checkboxes, and radios can be custom-styled using several of our JavaScript plugins.
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.
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 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
.
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).
VM UI Framework is created, owned, maintained by Virtuosi Media, Inc. © 2012-2013.