This page gives you a good one-stop-shop for seeing how many styles look. There is another page for form elements.
Regular paragraph. 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.
Inside a
<blockquote>. 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.
<strong>
<del> deleted
<dfn> dfn
<em> emphasis
<abbr> abbr - extended text when mouseover.
<acronym> acronym - extended text when mouseover.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore dolore.
<pre> pre space1 pre space1 pre space2 pre space2 pre tab pre tab </pre>
<code>
Not indented
indent1
indent1
indent2
indent3
</code>
The IxF also offers a number of style options that help with layouts. Many of these aren't obvious by looking at the demos. You can use them by adding the class name to the object.
The element the style has been applied to is in this color. There is a wrapper around it that has this treatment to show any applied margins (which are normally not visible). The text may be abnormally close to the sides of the box. But since we are demoing padding and margin given by applying classes we can't add extra padding to look spiffy.
Most classes that have different sizes use the same xs, sm, md, lg, xl, xxl suffixes. This makes it easy to remember how to move up or down a size with whatever you are using. These are also used on the forms for text input fields and textareas (scroll down on the first tab).
By default, almost none of the components in the IxF have margins or padding on them relative to parent items. This is so that full width elements can be mixed with elements with an inset (see the sidebar of this page for an example). Padding and margins can be easily and consistently set with the following classes:
default
padding-xs padding-sm padding-md padding-lg padding-xl
margin-xs margin-sm margin-md margin-lg margin-xl
margin-top-xs margin-top-sm margin-top-md margin-top-lg margin-top-xl
margin-left-xs margin-left-sm margin-left-md margin-left-lg margin-left-xl
margin-right-xs margin-right-sm margin-right-md margin-right-lg margin-right-xl
margin-bottom-xs margin-bottom-sm margin-bottom-md margin-bottom-lg margin-bottom-xl
left center right
| top | middle | bottom | baseline |
These classes do NOT have any margin. The wrapping box was made bigger so you could see the float.
float-left float-right
This can be added to a floated item or its parent. It will automatically clear the float when it's done.
clear
Font sizes can be adjusted globally or per component with these classes.
text-xs text-sm text-md text-lg text-xl text-xxl
When you have a master ixf-list or ixf-table in a sidebar, add the following style to change its behavior.
master
And when a list is right against the top or bottom of something, you can turn off the top or bottom borders to make it look better with these styles:
noline-top noline-bottom