Utility Classes in "general2.css"

After floating an element using ux-float-left, ux-float-right or with ux-grid-12, ux-clear is used to make sure your next piece of content will "clear" the floating element and start at the next available full-width position that follows.

<div class="ux-grid-12">
    <p class="ux-grid-12-9">...</p>
    <p class="ux-grid-12-3">...</p>
</div>
<div class="ux-clear"></div>
<div>The float has been cleared.</div>

<p class="ux-colr-bg-orange-3">
Quodsi option timeam ne eam, cu errem mollis facilis vis, ei cibo commodo nonumes nec. Mel vero nemore philosophia te. Ea sit velit suscipiantur, dicunt vituperata pro te. Vidit quando splendide ex duo, vim at case tempor. Semper tritani adversarium mea ea, nam an laoreet delectus.

An alternate method of clearing floating elements.

The various colored DIV elements shown here are contained in a DIV that has it's class set to ux-clear-after:

<div class="ux-clear-after">
    <div class="ux-float-left ux-width-15t">...</div>
    <div class="ux-float-left ux-width-15t">...</div>
    <div class="ux-float-left ux-width-15t">...</div>
</div>
<div>The float has been cleared.</div>

Center an element inside of it's container.

<div class="ux-colr-bg-blue-1">
    <p class="ux-centered-block ux-width-15t">...</p>
</div>

Use to float an element to the left or to the right and allow other contentt to wrap around it. Use ux-float-none to remove an inherited float behavior.

<div class="ux-float-left ux-width-5t ux-height-7t">
   <p>Lorem ipsum dolor sit...</p>

<div class="ux-float-right ux-width-5t ux-height-7t">
   <p>Mei novum offendit at...</p>

Lorem ipsum dolor sit amet, mea dico gloriatur te, id sumo reque iudico ius. Liber debet partiendo vel cu, officiis legendos ex vix, in rebum recteque concludaturque usu. Persius docendi in quo, pro cu adipisci constituam, nec vidit decore ea. Eu illud oblique insolens usu, sed ne viderer equidem menandri, veri mediocritatem ius eu. Erat ludus antiopam ut ius. Ad idque invidunt definitionem sea, indoctum definitionem id eos.

Mei novum offendit at, in suscipit definiebas vim, elit justo ullum ex vis. Tritani legendos et duo. Eum ea omnesque ocurreret, vis id affert dolorem splendide. Justo zril vim te, cum delectus intellegat te. Et usu nulla libris admodum, sapientem repudiandae in vim, eu duo laudem adipisci.

Ad illum nonumy usu, est at impetus malorum signiferumque, tacimates maiestatis sea ea. Sea eirmod fabellas splendide ex, usu consequat suscipiantur an, quod principes vix et. Mutat splendide vulputate eum cu, nisl mollis offendit vis ei, ius in nostrum voluptua perpetua. Vix an vero aperiam temporibus. Sea lorem altera referrentur ea. Discere adipisci inimicus vis et, duo ad mollis prodesset. Per in meliore luptatum vituperata.

Allows the contents of a container to scroll if the need to.

<div class="ux-scrollable ux-height-10t">...</div>

Allows an element to be hidden from being displayed even thought it is still a part of the document. These classes could also be used with a script event to display or hide an element and it's contents.

<ol class="ux-list-content-ol">
  <li class="ux-util-visible">One (ux-util-visible)</li>
  <li class="ux-util-hidden">Two (ux-util-hidden)</li>
  <li class="ux-util-visible">Three (ux-util-visible)</li>
</ol>

In the following example, there are three ordered list elements, one of them is hidden.

1. One (ux-util-visible)
2. Two (ux-util-hidden)
3. Three (ux-util-visible)

Use ux-util-inline-block when you have an element you want to display inline with other content, and want to be able to control padding, margins and borders better.

At habeo ancillae iracundia ius, wisi persius consectetuer id ius. . Sed an inani pericula interpretaris, legere semper pro ad. Ne modo stet definiebas vel, vis at simul oratio fuisset. Ex ancillae facilisis sed, putant principes in his.

Class: ux-grid-12, ux-grid-12-full, ux-grid-12-12, and ux-grid-12-1 to ux-grid-12-11

Allows content to be arranged into flexible-width columns within a container. For best results, the total of the columns used should always equal twelve. It's also useful to include ux-clear-after on the grid-12 container.

The Grid-12 layout system provides twelve sections that can be combined to divide content into columns.

In the following example, there are three flexable-width columns of varying sizes.

<div class="grid-12 ux-clear-after">
  <div class="ux-grid-12-2 ux-colr-bg-blue-7 ux-colr-gray-0"><p>2 of 12 wide</p></div>
  <div class="ux-grid-12-6 ux-colr-bg-green-7 ux-colr-gray-0"><p>6 of 12 wide</p></div>
  <div class="ux-grid-12-4 ux-colr-bg-yellow-7 ux-colr-gray-0"><p>4 of 12 wide</p></div>
</div>

In the following example, there are two columns; 3/12ths (25%) and 9/12ths (75%) wide respectively.

<div class="grid-12 ux-clear-after">
  <div class="ux-grid-12-3 ux-colr-bg-turquoise-3 ux-colr-gray-0"><p>3 of 12 wide</p></div>
  <div class="ux-grid-12-9 ux-colr-bg-orange-3 ux-colr-gray-0"><p>9 of 12 wide</p></div>
</div>

Class: ux-type-center, ux-type-right, ux-type-nowrap, ux-type-large-header, and ux-type-midline

Allows for the formatting of some specific type (text) properties.

The ux-type-center is used to center text within it's container.

<p class="ux-type-center">

The ux-type-right is used to align text right within it's container.

<p class="ux-type-right">

The following example shows the ux-type-large-header.

<p class="ux-type-large-header">

The following example shows an inline-block container aligned with the text using ux-type-midline. The example also shows what it would look like without the class.

<img class="ux-type-midline" src="../../images/help_large.png">

Duo with ux-type-midline.

Duo without ux-type-midline.

The following example shows the ux-type-nowrap class which is used to protect text from wrapping (the highlighted text shown here is set to ux-type-nowrap).

Sea timeam iisque repudiare an, eam ubique referrentur no. Modo latine aliquip sit at. <span class="ux-colr-bg-yellow-2 ux-type-nowrap">...</span> An erat persecuti cum, has fugit appetere intellegat an.

Class: ux-width-full-inclusive,
ux-width-1t to ux-width-60t and
ux-height-1t to ux-height-51t

The width and height classes are allow for the precise control of the size of elements. In this example, the height and width of the container are set and the buttons are also set so their widths match.

Margins refer to the protected space outside of a block element and are used to preserve space between elements. Thought it looks like a lot of classes, their use is very straightforward.

The five sets of classes are used to affect the margins of either all sides, or a particular side. multiple classes are applied to set different margins on each side.

Class: ux-margin-none,
ux-margin-min,
ux-margin-halft,
ux-margin-1t to ux-margin-5t

Instead of listing all the classes for each of the sides, we'll just note that the following classes are available for each side of a block element: top, right, bottom and left. Also, the complete list of classes is available in the table of contents (at the top of this page).
ux-margin-top-none,
ux-margin-top-min,
ux-margin-top-halft,
ux-margin-top-1t to ux-margin-top-5t

In this example, paragraph "Alpha" and "Charlie" have a '0t' (zero t) margin on all sides except for a '1t' (one t) margin on the top and bottom. Paragraph "Bravo" has a '1t' margin on all sides except for a '2t' (two t) margin on the bottom.

Notice that setting margins mearly protect and preserve space between elements, they are not additive. Paragraph Alpha has a '1t' bottom margin and "Bravo" has a '1t' top margin, but there is still only a measurement of '1t' between them.

<p class="ux-margin-none ux-margin-top-1t ux-margin-bottom-1t">Alpha</p>

<p class="ux-margin-1t ux-margin-bottom-2t">Bravo</p>

<p class="ux-margin-none ux-margin-top-1t ux-margin-bottom-1t">Charlie</p>

Alpha

Bravo

Charlie

Padding refers the space between the inside edge of a block element where it's content. Thought it looks like a lot of classes, their use is very straightforward.

The five sets of classes are used to affect the padding on all sides, or a particular side. Multiple classes are applied to set different values on each side.

Class: ux-padding-none,
ux-padding-min,
ux-padding-halft,
ux-padding-1t to ux-padding-5t

Instead of listing all the classes for each of the sides, we'll just note that the following classes are available for each side of a block element: top, right, bottom and left. Also, the complete list of classes is available in the table of contents (at the top of this page).
ux-padding-top-none,
ux-padding-top-min,
ux-padding-top-halft,
ux-padding-top-1t to ux-padding-top-5t

In this example, the paragraph has a '1t' (one t) padding set on all sides except for a 'halft' (half of 1 t) padding set on the top and bottom. (The span is set to ux-util-inline-block and ux-width-full-inclusive so it expands to highlight the padding of it's parent)..

<p class="ux-padding-1t ux-padding-top-halft ux-padding-bottom-halft">
  <span class="ux-colr-bg-yellow-2 ux-util-inline-block ux-width-full-inclusive">1 2 3 4 5 6 7 8 9 0...</span>
</p>

1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0

For information on how to use the colors provided here, be sure to refer to the Branding section of the UIMF wiki.

The classes used to set the color of text follow this format: ux-colr-COLORNAME-NUM.
The classes used to set the background color of an element follow this format: ux-colr-bg-COLORNAME-NUM.

Where COLORNAME is one of the following colors that have been defined:
  blue, gray, green, orange, purple, red, turquoise or yellow

Where NUM is a number which signifies the color luminosity:
Light – Color Intense – Dark
0-1-2-3-4-5-6-7-8-9

Class: (the complete list of classes is shown in the example below)

In this example, all of the text colors and background colors is shown. Note that in the background color examples, the text color is set for readability

The placeholder class is used to mark an element or section of a UX Code mockup as something that is not ready for production use. It may be an component that is not available client-side or that the design patten is still being defined.

Class: ux-plac

In this example, the paragraph has a '1t' (one t) padding set on all sides except for a 'halft' (half of 1 t) padding set on the top and bottom. (The span is set to ux-util-inline-block and ux-width-full-inclusive so it expands to highlight the padding of it's parent)..

<p>
<span class="ux-plac ux-float-right">Placeholder</span>
Lorem ipsum dolor sit amet...
</p>

ux-plac

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non massa non augue interdum pulvinar eget nec arcu. Cras in justo luctus, ultrices nunc quis, scelerisque nibh. Mauris faucibus, tellus vel interdum varius, lectus justo interdum metus, vel semper nisi augue at magna. Sed ac nisl enim. Ut ut sapien neque. Vestibulum a laoreet lectus. Mauris auctor libero magna, eget fermentum sem semper a. Vivamus in vulputate elit.