Version 3.0.6

Utility Classes

In addition to responsive grid layout classes, ProgressUI provides a variety of utility classes and mixins that make it easy to apply simple rules or patterns throughout your project. Unlike component classes, which style elements in the context of a particular component, utility classes may be applied anywhere and are not contextually dependent.

Jump to: Text Alignment | Font-Sizing | Text-Styling | Colors | Responsiveness | Divider | Margin and Padding | Overflow Handling | Borders

ProgressUI has several classes that are shorthand for changing the CSS display value of an element. These are:

  • .inline sets element display to inline, so that vertical margin and padding rules do not apply and elements sit next to each other
  • .inline-block sets display to inline-block, allowing elements to sit next to each other while respecting all margin and padding declarations
  • .block sets display to block, causing the element to appear on a new line and stretch out as wide as possible
  • .hide sets element display value to "none", so that it is hidden
  • .clickable on hover changes the cursor to a pointer, showing that the item is clickable

Float property defines whether an element should be placed on the left or right side of its container. You can use .pull-left and .pull-right classes to position your elements.

ProgressUI also supports a clearfix class, which is a shortcut for applying Bootstrap's clearfix mixin. In addition to .clearfix, you can use .clearboth, which will tell an element to clear floats on the left and right.

In order to align things vertically, one can use the .v-baseline, .v-bottom, .v-middle or .v-top.

Vertical alignment only applies to elements of an inline or table-cell box.

BaselineTopMiddleBottom
Lorem IpsumLorem ipsumLorem ipsumLorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci felis, sollicitudin rhoncus felis at, pretium efficitur lorem.
                      
<div class="table-wrapper">
<table class="table">
<thead class="thead">
<tr>
<th scope="col">Baseline</th>
<th scope="col">Top</th>
<th scope="col">Middle</th>
<th scope="col">Bottom</th>
<th scope="col"></th>
</tr>
</thead>
<tbody class="tbody">
<tr>
<td class="v-baseline" >Lorem ipsum</td>
<td class="v-top" >Lorem ipsum</td>
<td class="v-middle" >Lorem ipsum</td>
<td class="v-bottom" >Lorem ipsum</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci felis, sollicitudin rhoncus felis at, pretium efficitur lorem.</td>
</tr>
</tbody>
</table>
</div>

Left aligned

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci felis, sollicitudin rhoncus felis at, pretium efficitur lorem.

Centered

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci felis, sollicitudin rhoncus felis at, pretium efficitur lorem.

Right aligned

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci felis, sollicitudin rhoncus felis at, pretium efficitur lorem.

Justified

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci felis, sollicitudin rhoncus felis at, pretium efficitur lorem.

                      
<h3 class="left">Left aligned</h3>
<p class="left text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci felis, sollicitudin rhoncus felis at, pretium efficitur lorem.</p>
<h3 class="center">Centered</h3>
<p class="center text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci felis, sollicitudin rhoncus felis at, pretium efficitur lorem.</p>
<h3 class="right">Right aligned</h3>
<p class="right text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci felis, sollicitudin rhoncus felis at, pretium efficitur lorem.</p>
<h3 class="justify">Justified</h3>
<p class="justify text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci felis, sollicitudin rhoncus felis at, pretium efficitur lorem.</p>

The largest is 32px.

This one uses 24px font.

This paragraph is 20px.

The base font size is 14px.

This one is slightly larger at 12px.

This paragraph has a font size of 11px.

The smallest font size ProgressUI offers is 10px.

                      
<p class="text-xxl">The largest is 32px.</p>
<p class="text-xl">This one uses 24px font.</p>
<p class="text-lg">This paragraph is 18px.</p>
<p class="text-base">The base font size is 14px.</p>
<p class="text-sm">This one is slightly larger at 12px.</p>
<p class="text-xs">This paragraph has a font size of 11px.</p>
<p class="text-xxs">The smallest font size ProgressUI offers is 10px.</p>

This paragraph uses a light font-weight of 300.

This paragraph uses the default font-weight, which is 400.

This paragraph is semi-bold, which means its font-weight is 500.

This paragraph is bolded using a font-weight of 600.


Strikethroughs indicate text that is incorrect or no longer pertinent.

Underlining should be applied to text that is important.

Italics add emphasis and can also be used for asides or idiomatic phrases.

                      
<p class="light">This paragraph uses a light font-weight of 300.</p>
<p class="normal">This paragraph uses the default font-weight, which is 400.</p>
<p class="semibold">This paragraph is semi-bold, which means its font-weight is 500.</p>
<p class="bold">This paragraph is bolded using a font-weight of 600.</p>
<p class="strikethrough">Strikethroughs indicate text that is incorrect or no longer pertinent.</p>
<p class="underline">Underlining should be applied to text that is important.</p>
<p class="italics">Italics add emphasis and can also be used for asides or idiomatic phrases.</p>

ProgressUI comes with an advanced color palette, which can be found on the Colors documentation page.


Utility Classes

Three utility classes are available for each of these colors, and they can be used to change text and background colors for a given element:

  • .{color} - Sets background color and a contrasting text color (e.g .green, .blue-pale, .blue0)
  • .bg-{color} - Is an alias for the previous class type (e.g .bg-green, .bg-blue-pale, .bg-blue0)
  • .text-{color} - Sets only text color (e.g .text-green, .text-blue-pale, .text-blue0)

Color Weights

There are ten color weights for each color in the ProgressUI color palette.

  • {color}0 - background color for notes and alerts
  • {color}1
  • {color}2
  • {color}3 - borders
  • {color}4
  • {color}5 - "hover" states
  • {color}6 - base color
  • {color}7 - "pressed" states
  • {color}8 - text
  • {color}9

Color Tints

There are four color tints for each color in the ProgressUI color palette.

  • {color}-pale - background-color for notes and alerts
  • {color}-light - "hover" states
  • {color}-base - base color
  • {color}-dark - "pressed" states

In addition to the responsive grid pattern, which one can find on the Grid documentation page, ProgressUI also offers classes that allow for responsiveness for specific elements.

  • .hidden-lg - Hides elements at our $break-lg width (1365px)
  • .hidden-md - Hides elements at our $break-md width (1024px)
  • .hidden-sm - Hides elements at our $break-sm width (728px)
  • .hidden-xs - Hides elements at our $break-xs width (455px)

One can do the opposite and show a certain element at a specific screen with by using the .show-{screen-width} class.

In order to divide sections and panels we use the hr element that has its own styling as shown below.


                      
hr

We include utility classes for adding margins and padding to certain elements. In order to use them, add a class that is {margin or padding} and it will add that padding or margin to all parts of the element. You can add a direction (top, right, bottom, or left) to give that padding or margin at a specific location. You can also specify the size by adding md, lg, xl, or xxl. Automatically putting this class without a size will add a margin or padding sm.

For example .padding-top-lg adds a large padding to the top of the element.

You can also use .no-padding, .no-margin, and .margin-auto classes.

ProgressUI supports several ways for handling overflowing and wrapping text. You can use classes such as .break, .break-word, .pre-wrap, and .overflow-ellipsis to wrap and break text inside a container.

You can also use classes such as .pre and .no-break to allow no wrapping of text.

Break

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci felis, sollicitudin rhoncus felis at, pretium efficitur lorem.

Break-Word

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci felis, sollicitudin rhoncus felis at, pretium efficitur lorem.

Pre-Wrap

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci felis, sollicitudin rhoncus felis at, pretium efficitur lorem.

Overflow-Ellipsis

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci felis, sollicitudin rhoncus felis at, pretium efficitur lorem.

Pre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci felis, sollicitudin rhoncus felis at, pretium efficitur lorem.

No-Break

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci felis, sollicitudin rhoncus felis at, pretium efficitur lorem.

                      
<h3 class="center">Break</h3>
<p class="break">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci felis, sollicitudin rhoncus felis at, pretium efficitur lorem.</p>
<h3 class="center">Break-Word</h3>
<p class="break-word text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci felis, sollicitudin rhoncus felis at, pretium efficitur lorem.</p>
<h3 class="center">Pre-Wrap</h3>
<p class="pre-wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci felis, sollicitudin rhoncus felis at, pretium efficitur lorem.</p>
<h3 class="center">Overflow-Ellipsis</h3>
<p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci felis, sollicitudin rhoncus felis at, pretium efficitur lorem.</p>
<h3 class="center">pre</h3>
<p class="pre">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci felis, sollicitudin rhoncus felis at, pretium efficitur lorem.</p>
<h3 class="center">no-break</h3>
<p class="no-break">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci felis, sollicitudin rhoncus felis at, pretium efficitur lorem.</p>

Many elements in ProgressUI automatically come with borders where neccesary. However, you can add a class that is {.no-border} and it will remove all the borders on that element. You can add direction to target the top and bottom borders. You can also target the radius of the borders.

For example .no-border-radius-bottom removes the left and right radius of the bottom border.

Default Panel

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.

No Border Bottom

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.

No Border Top

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.

No Border

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.

                      
<article class="panel panel-default">
<section class="panel-content">
<p class="wide"> 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.</p>
</section>
</article>
<article class="panel panel-default no-border-radius-bottom">
<section class="panel-content">
<p class="wide"> 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.</p>
</section>
</article>
<article class="panel panel-default no-border-radius-top">
<section class="panel-content">
<p class="wide"> 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.</p>
</section>
</article>
<article class="panel panel-default no-border">
<section class="panel-content">
<p class="wide"> 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.</p>
</section>
</article>

Search Results

Powered by