Utils

The Catalyst UI library provides a comprehensive set of utility classes to help you rapidly build consistent interfaces without writing custom CSS.

These utility classes are designed to be composable and follow a consistent naming convention. Always check this page before adding generic styling to your project, as the utility set is regularly updated when developing new components.

Layout & Containers

These utility classes help with common layout patterns and container styling:

/* Flexible column container that fills available space */
.container-vh-dir-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Flexible row container that fills available space */
.container-vh-dir-row {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    position: relative;
}

Spacing: Margin & Padding

The library provides utility classes for adding margin or padding to any side of an element:

/* Margin utilities */
.m{side}-{space} {
    margin-{side}: {space}px !important;
}

/* Padding utilities */
.p{side}-{space} {
    padding-{side}: {space}px !important;
}

/* Auto margin utilities */
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }

Where:

  • {side} is the first letter of: top, bottom, left, or right (t, b, l, r)
  • {space} is one of the available spacing values in pixels

Example

/* Adds 10px padding to the bottom */
.pb-10 {
    padding-bottom: 10px !important;
}

/* Adds 20px margin to the left */
.ml-20 {
    margin-left: 20px !important;
}

/* Pushes an element to the right */
.ml-auto {
    margin-left: auto !important;
}

Available spacing values (in pixels):
0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100

Positioning

Control how elements are positioned within their parent containers:

/* Position an element absolutely within its closest positioned ancestor */
.position-absolute {
    position: absolute;
}

/* Position an element relatively to its normal position */
.position-relative {
    position: relative;
}

Overflow Control

Manage how content that overflows an element is handled:

/* Add scrollbars when content overflows */
.overflow-auto {
    overflow: auto;
}

/* Hide overflow content completely */
.overflow-hidden {
    overflow: hidden;
}

Sizing

Control the width and height of elements:

/* Full width */
.w-100 {
    width: 100%;
}

/* Half width */
.w-50 {
    width: 50%;
}

/* Full height */
.h-100 {
    height: 100%;
}

/* Half height */
.h-50 {
    height: 50%;
}

Button Styling

Utility classes for button styling and behavior:

/* Creates a transparent button with no borders or padding */
.button-transparent {
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Completely resets button styling to create a clean slate */
.reset-button {
    background: none repeat scroll 0 0 transparent;
    border-spacing: 0;
    border: medium none;
    font-weight: normal;
    line-height: normal;
    list-style: none outside none;
    outline: none;
    padding: 0;
    text-align: left;
    text-decoration: none;
    text-indent: 0;
    white-space: nowrap;
}

Text Styling

Utility classes for controlling text appearance and behavior:

/* Makes text bold */
.text-bold {
    font-weight: bold;
}

/* Makes text italic */
.text-italic {
    font-style: italic;
}

/* Adds underline to text */
.text-underline {
    text-decoration: underline;
}

/* Right-aligns text */
.text-right {
    text-align: right;
}

/* Centers text horizontally */
.text-center {
    text-align: center;
}

/* Truncates text with an ellipsis when it overflows */
.text-truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Prevents text from wrapping */
.nowrap {
    white-space: nowrap;
}

Related Components

These text utilities work well with components like CataUiInput, CataUiTable, and any component that displays text content.

Usage Examples

Here are some common combinations of utility classes:

Responsive Card Layout

<div class="container-vh-dir-col">
  <div class="position-relative w-100 pb-20">
    <h2 class="text-bold">Card Title</h2>
    <p class="text-truncate">This is some content that might be too long...</p>
    <div class="mt-10">
      <button class="button-transparent">Action</button>
    </div>
  </div>
</div>

Auto-layout with Spacing

<div class="container-vh-dir-row">
  <div class="w-50 p-20">Left Content</div>
  <div class="ml-auto pr-20">Right Content</div>
</div>