ABCD Design System & UI Kit

System Overview

The ABCD Design System provides a modular architecture for building consistent interfaces for library automation. This system relies on a set of styles that must be loaded in a specific order to ensure the correct CSS cascade.

Loading Architecture

To ensure components render correctly in the Central module or the Site (OPAC), CSS files must be loaded in the following priority order:

1. normalize.css: Resets browser styles to ensure consistency.
2. main.css: Defines global typography and base elements.
3. colors.css: Defines color variables and utility classes.
4. buttons.css: Styling for interactive elements.
5. spaces.css: Provides a robust set of utility classes to manage margin, padding, and element width directly in the HTML.
6. Specific Sheets: (e.g., dhtmlXGrid.css, progressbar.css, leaflet.css).

---

Color Palette

The system uses a set of CSS variables to maintain visual consistency. Below are the core colors defined in colors.css.

Primary

--abcd-primary
#0066FF

Success

--abcd-success
#198754

Info

--abcd-info
#00CCFF

Warning

--abcd-warning
#FFCC00

Danger

--abcd-danger
#CC3333

Dark

--abcd-dark
#212529

Light

--abcd-light
#F8F8F8

Base Palette

A wide range of colors available for custom elements or badges.

Steel Blue

--abcd-steel-blue
#4682b4

Blue

--abcd-blue
#0066FF

Indigo

--abcd-indigo
#6600FF

Purple

--abcd-purple
#6633CC

Pink

--abcd-pink
#CC3399

Red

--abcd-red
#CC3333

Orange

--abcd-orange
#FF6600

Yellow

--abcd-yellow
#FFCC00

Green

--abcd-green
#009966

Teal

--abcd-teal
#33CC99

Cyan

--abcd-cyan
#00CCFF

Gray Scale

Used for borders, backgrounds, and text.

White

--abcd-white
#ffffff

Gray 100

--abcd-gray-100
#F8F8F8

Gray 200

--abcd-gray-200
#DCDCDC

Gray 300

--abcd-gray-300
#D3D3D3

Gray 400

--abcd-gray-400
#C8C8C8

Gray 500

--abcd-gray-500
#BEBEBE

Gray 600

--abcd-gray-600
#A0A0A0

Gray (Base)

--abcd-gray
#666666

Gray 700

--abcd-gray-700
#495057

Gray 800

--abcd-gray-800
#333333

Gray 900

--abcd-gray-900
#212529

Contextual Text Utilities

Use these classes to apply semantic colors to text:

.color-primary - Used for links and main titles.

.color-success - Used for confirmation messages.

.color-danger - Used for critical errors.

.color-gray - Used for secondary captions.

---

Buttons & Interactivity

Buttons in ABCD are defined by the buttons.css file. The base class is .btn, which should be combined with variant and size modifiers.

Style Variants

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>

Buttons with Icons (FontAwesome)

ABCD heavily uses icons. Ensure FontAwesome is loaded in your header.

<button class="btn btn-primary">
    <i class="fa fa-save"></i> Save Record
</button>

<button class="btn btn-danger">
    <i class="fa fa-trash"></i> Delete
</button>

Sizes

<button class="btn btn-sm btn-primary">Small</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-lg btn-primary">Large</button>

---

Grid System

The ABCD layout is built on a flexible 12-column grid system defined in columns.css. This allows developers to create complex layouts by dividing the available width into 12 distinct units.

The logic is simple: The sum of the column classes in a row should always equal 12.

Basic Structure

• .row: The wrapper container that creates a horizontal group of columns. It handles clearing floats or setting up the flex container.
• .col-[1-12]: The element that holds the content. The number represents how many "units" of the 12 available it spans.

Visual Examples

Below are interactive visualizations of common layouts used in ABCD.

1. Equal Columns (50% / 50%) Useful for login screens or split dashboards.

.col-6

.col-6

<div class="row">
    <div class="col-6">Left Content</div>
    <div class="col-6">Right Content</div>
</div>

2. Sidebar Layout (25% / 75%) Standard layout for the Central Module (menus on the left, workspace on the right).

.col-3

.col-9

<div class="row">
    <div class="col-3">Sidebar Menu</div>
    <div class="col-9">Main Workspace</div>
</div>

3. Three Columns (33.3% each) Often used in the OPAC footer or dashboard statistics.

.col-4

.col-4

.col-4

<div class="row">
    <div class="col-4">Stat 1</div>
    <div class="col-4">Stat 2</div>
    <div class="col-4">Stat 3</div>
</div>

4. Granular Control (Mixed Sizes) You can mix any combination as long as it sums to 12.

.col-2

.col-8

.col-2

<div class="row">
    <div class="col-2">Icon</div>
    <div class="col-8">Description Text</div>
    <div class="col-2">Actions</div>
</div>

Technical Implementation Details

Based on columns.css, the system applies the following rules:

1. Box Sizing: Elements are set to box-sizing: border-box, meaning padding and borders are included in the width calculation.
2. Gutters: Columns typically have a small padding (e.g., padding-left: 15px; padding-right: 15px;) to prevent content from touching.
3. Float/Flex: Depending on your specific ABCD version, columns.css uses float: left (legacy) or flex: 0 0 auto (modern). Always ensure your .row container properly clears floats or initiates the flex context.

Responsive Design

In newer versions of the ABCD Site (OPAC), these columns may stack vertically on mobile devices (width becomes 100%) automatically.

---

Spacing & Sizing Utilities

The spaces.css file provides a robust set of utility classes to manage margin, padding, and element width directly in the HTML.

Spacing Notation

The classes follow the format {property}{sides}-{size}.

Key	Represents	Description
Property	m	Margin (outer spacing)
	p	Padding (inner spacing)
Sides	t, b	Top, Bottom
	s, e	Start (Left), End (Right)
	x, y	Horizontal (Left+Right), Vertical (Top+Bottom)
	(blank)	All 4 sides
Size	0 - 5	From 0 to 3rem
	auto	Automatically calculated (margins only)

Spacing Scale

Visual representation of the padding levels available:

.p-0

.p-1

.p-2

.p-3

.p-4

.p-5

Common Use Cases:

• Centering: Use .mx-auto combined with a defined width to center blocks horizontally.
• Separation: Use .mb-3 (margin-bottom) to separate form elements or paragraphs.
• Gutters: Use .px-3 to add horizontal cushion inside containers.

<div class="p-4 mb-4 bg-light border">
    <h3 class="m-0 text-primary">Card Title</h3>
</div>

---

Width Utilities

Unlike standard libraries that use 25/50/75/100, ABCD uses a decile system (10% increments) defined in spaces.css.

.w-1

.w-3 (30%)

.w-5 (50%)

.w-10 (100%)

<input type="text" class="w-10" placeholder="Enter full search...">

<div class="d-flex">
    <div class="w-3">Sidebar (30%)</div>
    <div class="w-7">Main (70%)</div>
</div>

---

Components

Progress Bar

Essential for long-running ABCD tasks (indexing, ISO imports). The styles come from progressbar.css.

45%

<div class="progress-container">
    <div class="progress-bar" style="width: 45%;" aria-valuenow="45">45%</div>
</div>

Data Tables

Styling for record lists (dhtmlXGrid.css).

MFN	Title	Action
0001	Introduction to ABCD
0002	Advanced Cataloging

<table class="abcd-table table-striped">
    <thead>
        <tr>
            <th>MFN</th>
            <th>Title</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>0001</td>
            <td>Title Example</td>
            <td><button class="btn btn-sm btn-primary"><i class="fa fa-edit"></i></button></td>
        </tr>
    </tbody>
</table>

Maps

Used in modules requiring georeferencing. The map container must have an explicit height.

<div id="library-map" style="height: 400px;"></div>

---

Technical Notes

Relative Paths

When developing custom PHP scripts in the htdocs/central/your_module/ folder, remember to reference CSS files by backtracking directories correctly: <link rel="stylesheet" href="../../css/all.min.css">

Style Conflicts

Avoid using inline styles (style="..."). Whenever possible, use the classes defined in colors.css and spaces.css to ensure the ABCD theme remains maintainable in future updates.