Global Font Families

Select from UXi's custom font families. Applying these custom families will not change the output to an H1, H2, etc. They will only apply css classes to the text, outputting something like 

<span class='header-font'>Lorem ipsum dolor sit amet</span>

This method is great for applying UXi's custom fonts to body text for a more customized look & feel. Options include:

  • Header Font
  • Subheader Font
  • Body Font


Global Font Styles

Select from a list of headline sizes. Applying these custom styles will not change the output to an H1, H2, etc. They will only apply css classes to the text, outputting something like:

<span class='h1'>Text</span>

This method is great for adding visible emphasis to certain pieces of text without changing them to headlines. Options include:

  • Heading 1
  • Heading 2
  • Heading 3
  • Heading 4
  • Heading 5
  • Heading 6


Font Case

Select from a list of custom font cases.  Applying these custom styles will apply css classes to the text, outputting something like 
<span class='text-case-smallcaps'>Lorem ipsum dolor sit amet</span>

This method is not intended to alter the look of ALL body text, but instead, add more emphasis on certain portions.  Options include:

  • Title Case
  • UPPER CASE
  • lower case
  • small caps
  • none/remove 


To re-set text back to rely on the defaults, use the last option: none / remove.

Mobile Text Align

Give text custom alignment specifically for mobile devices. Options include:

  • Left
  • Right
  • Center
  • Justify


Caption Text Align

Give any photo caption a custom text alignment. Options include:
  • Left
  • Right
  • Center
  • Justify

Float

Align an element like an image or list to the left or right edge of the container and add the appropriate padding so text will 'wrap' around it.

Left / Right: Use the top two options to float an object on all devices.

Phone Left / Phone Right: Float an object specifically on mobile phones.

Tablet Left / Tablet Right: Float an object specifically on tablets.

Desktop Left / Desktop Right: Float an object specifically on desktop displays.

Table Formats

Use these options to add custom css classes to tables.

Striped: Add alternating grey/white backgrounds to each table row.


Bordered: Add a simple border to each cell of the table


Condensed: Decreases the padding of each table cell.


Center: Table This option requires a width to be added in the table properties dropdown.  Adding this format centers the table inside it's containing column.


Equal Column Widths ( Halves, Thirds, Fourths, Fifths ) Use these options to make each column in the table use equal widths. Be sure to only use the 'halves' format on two-column tables, 'thirds' only on three-column tables, and so on.


Collapse Use this class to collapse table cells around their content for easier reading on small mobile devices.  This is most useful on tables with two or possibly three columns.  Use this format carefully as it can lead to wider tables not being unable to display their content.

Though it may seem counter-intuitive, UXi's tables do not use this class by default. Instead tables maintain their widths and users can swipe left-to-right to read the contents. This is one reason tables should not be used to lay out content.


Columns

Use this format to arrange content in columns.  Highlight content and apply separate classes based on device size.

Options include:

  • Palm 2 Columns will display the content in two columns on palms-sized devices like most smart phones.


Lead Paragraph

Use this feature to highlight a particular section of text and increase it's font size and padding to add emphasis.

Drop Cap

Use this feature to add further emphasis to a particular selection of text by increasing the font size of the first letter of the first word.