Utilities - Flex UI Library

Utilities

CSS Classes

Utility classes to easily add some useful styles.

All that is required is to add the class to the HTML element. The SCSS blocks are included only for reference.

.u-clearfix

Ensure float styles are cleared going forward.

.u-clearfix {
  &:after {
    clear: both !important;
    content: "" !important;
    display: block !important;
  }
}

.u-highlight

Highlight text such as search terms, etc.

.u-highlight {
  background-color: $theme-color-highlight;
}

.u-flex-align-center

Align items vertically centered.

.u-flex-align-center {
  align-items: center;
  display: flex;
}

.u-flex-column

Arrange items in a column (instead of in a row which is the dfault).

.u-flex-align-center {
  display: flex;
  flex-direction: column;
}

.u-flex-space-around

Align items at left/right with space around them (including space at the beginning and end of the row).

.u-flex-space-between {
  align-items: center;
  display: flex;
  justify-content: space-around;
}

.u-flex-space-between

Align items at left/right with space between them.

.u-flex-space-between {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.u-hidden

Hide visually and hide from screen readers.

.u-hidden {
  display: none !important;
}

.u-hidden-visually

Hide visually but not from screen readers.

.u-hidden-visually {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

.u-temporary-offscreen

For temporary elements off screen.

.u-temporary-offscreen {
  position: absolute;
  left: -300000px;
  bottom: -300000px;
}

.u-overflow-ellipsis

Display an ellipsis when text is too long and overflows.

.u-overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.u-touch-momentum-scroll

Allow momentum scrolling on touch devices.

.u-touch-momentum-scroll {
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

JavaScript Functions

$.flexmlsUi.debounce()

  // Returns a function, that, as long as it continues to be invoked, will not
  // be triggered. The function will be called after it stops being called for
  // N milliseconds. If `immediate` is passed, trigger the function on the
  // leading edge, instead of the trailing.
  $.flexmlsUi.debounce = function (func, wait, immediate) {
    var timeout;
    return function() {
      var context = this, args = arguments;
      var later = function() {
        timeout = null;
        if (!immediate) { func.apply(context, args); }
      };
      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) { func.apply(context, args); }
    };
  };

$.flexmlsUi.isTouch()

Returns true if running on a touch device.

$.flexmlsUi.hasOverflow($element)

Returns true if scrolling is needed for the passed in $element.