CSS Utility Classes in Service Portal

css-utility-classes-in-sp

Included with Service Portal are a variety of different CSS utility classes loosely based on some of Bootstraps utility classes.

For many of the classes below, you will see a format similar to: “m-t-lg”, this stands for “margin top large”. As I’m sure you can guess, there is also a classes for bottom, left, right, small (sm), medium (md), etc. and all the various combinations thereof.  This allows you to easily add consistent margins, padding, colors, etc. without creating custom styles within the widget.

Here is a list we’ve compiled of some of the most common utility classes:

Padding: wrapper, wrapper-xs, wrapper-sm, wrapper-md, wrapper-lg, wrapper-xl
Horizontal Padding: padder, padder-xs, padder-md, padder-lg, padder-xl
Vertical Padding: padder-v, padder-v-md, padder-v-lg, padder-v-xl
Top Padding: padder-t, padding-top-s, padding-top-m, padding-top-lg, padder-t-lg, padder-t-xl
Right Padding: pad-right
Bottom Padding: padder-b-none, padder-b, padder-b-md, padder-b-lg, padder-b-xl
Left Padding: N/A
Top Margin: m-t, m-t-none, m-t-xxs, m-t-xs, m-t-sm, m-t-lg, m-t-xl, m-t-n-xs, m-t-n-lg
Right Margin: m-r, m-r-none, m-r-xs, m-r-sm, m-r-lg, m-r-n
Bottom Margin: m-b, m-b-none, m-b-xs, m-b-sm, m-b-lg, m-b-xl, m-b-n
Left Margin: m-l, m-l-none, m-l-xs, m-l-sm, m-l-lg, m-l-n
Text Color: text-muted, text-primary, text-success, text-info, text-warning, text-danger
Background Color: bg-primary, bg-success, bg-info, bg-warning, bg-danger
Float Elements pull-left – Floats an element to the left
pull-right – Floats an element to the right
Clearing Floats clearfix – Clears floats
Display & Margin center-block – Sets an element to display:block with margin-right:auto and margin-left:auto
Visibility show – Forces an element to be shown (display:block)
hidden – Forces an element to be hidden (display:none)
invisible – Forces an element to be invisible (visibility:hidden). Will take up space on page even though it is invisible
sr-only – Hides an element to all devices except screen readers
sr-only-focusable – Combine with “sr-only” to show the element again when it is focused (e.g. by a keyboard-only user)
text-hide – Helps replace an element’s text content with a background image
close – Indicates a close icon
caret – Indicates dropdown functionality (will reverse automatically in dropup menus)
Hide visible-xs, visible-sm, visible-md, visible-lg
Show hidden-xs, hidden-sm, hidden-md, hidden-lg

For more details on CSS in Service Portal, you can check out the unofficial documentation on Github: https://github.com/service-portal/documentation/blob/master/documentation/css.md#page

4 comments

  1. Hey Nathan –

    I’ve had issues using some of these classes in Service Portal. Examples would be ALL of the padding classes (i.e. p-t-sm), and the medium margin classes (i.e. m-t-md).

    Do you know which ones we should expect to run into issues?

  2. Brian, you are correct. It looks like many of the original utility classes were removed at some point. My bad for not double checking. I’ve updated the document using the actual utility stylesheet in Istanbul.

  3. Hi Nathan,
    I need to know how to make something visible in tablet view and not in mobile view. Because when we use hidden-xs it hides in both mobile and tablet view. which class should we need to use?

Leave a Reply

Your email address will not be published. Required fields are marked *