Cork Utility Classes

Cork Admin extends Bootstrap's utility-first approach by introducing a set of custom utility classes to enhance control, flexibility, and consistency throughout your project. These classes are lightweight, reusable, and help you apply styles directly in your markup—speeding up development without compromising maintainability.

🎯 Font Weight Utilities (fw:100 - fw:900)

Cork offers an extended range of font-weight utility classes beyond Bootstrap's defaults. These classes allow developers to precisely control text thickness for headings, labels, and content blocks.

<h1 class="fw‐700">Bold Heading</h1>
 <p class="fw‐300">This is light‐weight paragraph text.</p>
 <span class="fw‐900">High‐emphasis label</span>

🎨 Color Utilities

Cork introduces an extended color scale for colors, offering 11 gradient levels ranging from the lightest tint to the deepest shade. This allows for subtle UI differentiation, status indicators, and theme-based color usage

Background Color Utilities (bg-*:50 - bg-*:1000)

Cork Admin provides a flexible and scalable approach to applying background colors using a custom color palette system. These utility classes allow developers to easily control the look and feel of components across the application—ranging from subtle light tones to bold, high-contrast shades.

Whether you're styling sections, cards, buttons, or alerts, Cork's background utility classes make it simple to apply consistent design tokens that match your brand identity.

🧩 How It Works

These colors are accessible through utility classes in the format:

bg‐{color}:{weight}

Where :

• {color} is the color name (e.g., primary, secondary, etc.)
• {weight} is the shade value (e.g., 100, 500, 1000, etc.)

<div class="bg‐primary:100">Light Background</div>
 <div class="bg‐primary:900 text‐white">Dark Background</div>

Text Color Utilities (text-*:50 - text-*:1000)

Cork Admin offers a robust set of text color utility classes that allow developers to effortlessly apply consistent and scalable typography colors throughout the application. These utilities are directly mapped to your project's custom color palette, ensuring design consistency and flexibility.

Whether you're designing a dashboard, form labels, alerts, or buttons—Cork’s text color classes help maintain visual clarity and branding.

🧩 How It Works

Each text color is defined based on your palette and can be applied using the format:

text‐{color}:{weight}

Where :

• {color} is the color name (e.g., primary, secondary, etc.)
• {weight} is the shade value (e.g., 100, 500, 1000, etc.)

<p class="text‐primary:100">This text uses a light primary color.</p>
 <p class="text‐secondary:600">This text uses a medium secondary color.</p>
 <p class="text‐success:900">This text uses a dark success color for contrast.</p>

Border Utilities

Cork Admin includes an extensive suite of border utility classes that allow you to define border styles, widths, radii, and colors with precision. These utilities follow a consistent naming convention and work seamlessly with your custom color palette.

Use these classes to style components such as cards, containers, buttons, tables, or alerts, giving you full control over the visual structure and layout aesthetics.

🎨 Border Color

Customize border color using your custom palette:

border‐{color}:{weight}

  border‐{direction}‐{color}:{weight}

Where :

• {color} is the color name (e.g., primary, secondary, etc.)
• {weight} is the shade value (e.g., 100, 500, 1000, etc.)
• {direction} is the direction value (e.g., top, left, bottom, right etc.)

<div class="border‐primary:300">All border border primary</div>
 <div class="border‐bottom‐danger:600">Border bottom danger</div>

Supported Sides:

📐 Border Width

Control the thickness of borders using :

border‐width:{number}

  border‐{direction}‐width:{number}

Where :

• {number} is the width value (acceptable value, 1 to 10)
• {direction} is the direction value (e.g., top, left, bottom, right etc.)

<div class="border‐width:3">All border border primary</div>
 <div class="border‐bottom‐width:6">Border bottom width</div>

Supported Sides:

✏️ Border Style Classes

Apply different border styles with the following classes:

border‐style:{name}

  border‐{direction}‐style:{name}

Where :

• {name} is the name value (e.g., hidden, solid, dashed, dotted, groove, outset)
• {direction} is the direction value (e.g., top, left, bottom, right)

<div class="border‐style:solid">All sides of the border is styled solid</div>
 <div class="border‐bottom‐style:dotted">Bottom side of the border is styled Dotted</div>

Supported Sides:

🟦 Border Radius Classes

Define how rounded your element corners appear:

border‐radius:{number}

  border‐{yaxis‐direction}‐{xaxis‐direction}‐radius:{number}

Where :

• {number} is the number value (acceptable value, 1 to 50)
• {yaxis-direction} is the direction value (e.g., top, bottom)
• {xaxis-direction} is the direction value (e.g., left, right)

<div class="border‐radius:20">All sides of the border is 20px rouded</div>
 <div class="border‐bottom‐right‐radius:30">Bottom right side of the border is 30px rounded</div>

Supported Sides: