Solbros UI - Documentation

# Installation

Include the CSS and JavaScript files in your HTML. The framework uses the Inter font family from Google Fonts for optimal typography.

HTML

<!-- Include Inter font -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<!-- Include Solbros UI CSS -->
<link rel="stylesheet" href="solbros-ui.css">

<!-- Include Solbros UI JavaScript (at end of body) -->
<script src="solbros-ui.js"></script>

💡

The JavaScript file auto-initializes when the DOM is ready. You can access all utilities via the global SolbrosUI object.

# Quick Start

Here's a minimal example to get you started with a basic page layout:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="solbros-ui.css">
</head>
<body>

  <!-- Header -->
  <header class="sb-header">
    <div class="sb-header-brand">
      <h1>My App</h1>
    </div>
    <nav class="sb-header-nav">
      <a href="#" class="sb-nav-link active">Dashboard</a>
      <a href="#" class="sb-nav-link">Settings</a>
    </nav>
  </header>

  <!-- Main Content -->
  <main class="sb-main">
    <div class="sb-container">
      <div class="sb-grid sb-grid-3">
        <div class="sb-card">
          <h3 class="sb-card-title">Card 1</h3>
          <p>Card content goes here.</p>
        </div>
        <div class="sb-card">
          <h3 class="sb-card-title">Card 2</h3>
          <p>Card content goes here.</p>
        </div>
        <div class="sb-card">
          <h3 class="sb-card-title">Card 3</h3>
          <p>Card content goes here.</p>
        </div>
      </div>
    </div>
  </main>

  <script src="solbros-ui.js"></script>
</body>
</html>

# Theming & Customization

Solbros UI uses CSS custom properties (variables) for all colors, spacing, and other design tokens. Override these in your own CSS to customize the look and feel.

CSS

/* Override default theme colors */
:root {
  /* Change primary color to blue */
  --sb-primary: #3b82f6;
  --sb-primary-dark: #2563eb;
  --sb-primary-light: #60a5fa;
  --sb-primary-rgb: 59, 130, 246;

  /* Adjust spacing */
  --sb-spacing-lg: 20px;
  --sb-spacing-xl: 28px;

  /* Change border radius */
  --sb-radius-md: 8px;
  --sb-radius-lg: 12px;
}

Available CSS Variables

Variable	Default	Description
--sb-primary	#e63946	Primary brand color
--sb-bg-dark	#1a1a2e	Main background color
--sb-text-primary	#ffffff	Primary text color
--sb-border-light	rgba(255,255,255,0.1)	Border color for cards, inputs
--sb-radius-md	10px	Default border radius
--sb-transition-smooth	0.3s cubic-bezier(...)	Smooth transition timing

# Container

Use containers to center and constrain content width. The .sb-main class provides padding for the main content area.

HTML

<!-- Centered container with max-width -->
<div class="sb-container">
  Content here (max-width: 1400px)
</div>

<!-- Full-width container -->
<div class="sb-container-fluid">
  Full width content
</div>

<!-- Main content area with padding -->
<main class="sb-main">
  <div class="sb-container">
    Page content
  </div>
</main>

# Grid System

A simple CSS Grid-based layout system. Grids are responsive and collapse to fewer columns on smaller screens.

HTML

<!-- 3-column grid -->
<div class="sb-grid sb-grid-3">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

<!-- Auto-fill grid (responsive) -->
<div class="sb-grid sb-grid-auto">
  <div>Auto-sized column</div>
  <div>Auto-sized column</div>
  <div>Auto-sized column</div>
</div>

Class	Columns	Description
.sb-grid-2	2	Two equal columns
.sb-grid-3	3	Three equal columns
.sb-grid-4	4	Four equal columns
.sb-grid-auto	auto	Auto-fill with min 300px

# Header

A sticky header component with branding, navigation, and action areas.

HTML

<header class="sb-header">
  <!-- Brand/Logo -->
  <div class="sb-header-brand">
    <img src="logo.svg" alt="Logo">
    <h1>App Name</h1>
  </div>

  <!-- Navigation -->
  <nav class="sb-header-nav">
    <a href="#" class="sb-nav-link active">Dashboard</a>
    <a href="#" class="sb-nav-link">Projects</a>
    <a href="#" class="sb-nav-link">Settings</a>
  </nav>

  <!-- Actions -->
  <div class="sb-header-actions">
    <span class="sb-user-info">John Doe</span>
    <button class="sb-btn sb-btn-logout">Logout</button>
  </div>
</header>

# Buttons

Buttons come in multiple variants and sizes. All buttons use the base .sb-btn class combined with a variant modifier.

Preview

HTML

<!-- Button variants -->
<button class="sb-btn sb-btn-primary">Primary</button>
<button class="sb-btn sb-btn-secondary">Secondary</button>
<button class="sb-btn sb-btn-ghost">Ghost</button>
<button class="sb-btn sb-btn-danger">Danger</button>
<button class="sb-btn sb-btn-success">Success</button>
<button class="sb-btn sb-btn-logout">Logout</button>

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

<!-- Icon button -->
<button class="sb-btn sb-btn-icon sb-btn-primary">+</button>

<!-- Disabled state -->
<button class="sb-btn sb-btn-primary" disabled>Disabled</button>

Class	Type	Description
.sb-btn	base	Base button class (required)
.sb-btn-primary	variant	Primary action button (red gradient)
.sb-btn-secondary	variant	Secondary action button
.sb-btn-ghost	variant	Transparent background button
.sb-btn-danger	variant	Destructive action button
.sb-btn-success	variant	Positive action button
.sb-btn-sm	size	Small button
.sb-btn-lg	size	Large button
.sb-btn-icon	modifier	Square icon-only button

# Cards

Cards are flexible content containers with optional header, body, and footer sections.

Preview

Card Title

Active

This is the card body content. You can put any content here.

1,234

Total Users

HTML

<!-- Standard card -->
<div class="sb-card">
  <div class="sb-card-header">
    <h3 class="sb-card-title">Card Title</h3>
    <span class="sb-badge sb-badge-success">Active</span>
  </div>
  <div class="sb-card-body">
    <p>Card content goes here.</p>
  </div>
  <div class="sb-card-footer">
    <button class="sb-btn sb-btn-sm sb-btn-primary">Action</button>
  </div>
</div>

<!-- Clickable card -->
<div class="sb-card sb-card-clickable">
  <h3 class="sb-card-title">Click me</h3>
</div>

<!-- Stat card -->
<div class="sb-card sb-stat-card">
  <div class="sb-stat-value">1,234</div>
  <div class="sb-stat-label">Total Users</div>
</div>

# Forms

Form components include inputs, textareas, selects, and checkboxes with consistent styling.

Preview

First Name

Last Name

Role

I agree to the terms

HTML

<!-- Text input -->
<div class="sb-form-group">
  <label class="sb-form-label">Email</label>
  <input type="email" class="sb-form-input" placeholder="you@example.com">
</div>

<!-- Required field -->
<div class="sb-form-group">
  <label class="sb-form-label required">Password</label>
  <input type="password" class="sb-form-input" required>
</div>

<!-- Select -->
<div class="sb-form-group">
  <label class="sb-form-label">Country</label>
  <select class="sb-form-select">
    <option>Select country...</option>
    <option>Germany</option>
    <option>Austria</option>
  </select>
</div>

<!-- Textarea -->
<div class="sb-form-group">
  <label class="sb-form-label">Message</label>
  <textarea class="sb-form-textarea" rows="4"></textarea>
</div>

<!-- Checkbox -->
<label class="sb-form-check">
  <input type="checkbox">
  <span>Remember me</span>
</label>

<!-- Two-column row -->
<div class="sb-form-row">
  <div class="sb-form-group">...</div>
  <div class="sb-form-group">...</div>
</div>

JavaScript Form Utilities

JavaScript

// Serialize form to object
const data = SolbrosUI.form.serialize('#my-form');
// { email: 'test@example.com', name: 'John' }

// Populate form with data
SolbrosUI.form.populate('#my-form', {
  email: 'test@example.com',
  name: 'John'
});

// Reset form
SolbrosUI.form.reset('#my-form');

# Modals

Modal dialogs for displaying content that requires user attention. Modals can be opened and closed programmatically via JavaScript.

Preview

HTML

<!-- Modal structure -->
<div class="sb-modal-overlay" id="my-modal">
  <div class="sb-modal">
    <div class="sb-modal-header">
      <h3 class="sb-modal-title">Modal Title</h3>
      <button class="sb-modal-close" onclick="SolbrosUI.modal.close()">×</button>
    </div>
    <div class="sb-modal-body">
      <p>Modal content goes here.</p>
    </div>
    <div class="sb-modal-footer">
      <button class="sb-btn sb-btn-secondary" onclick="SolbrosUI.modal.close()">Cancel</button>
      <button class="sb-btn sb-btn-primary">Save</button>
    </div>
  </div>
</div>

<!-- Modal sizes: add to .sb-modal -->
<div class="sb-modal sb-modal-sm">...</div>  <!-- 400px -->
<div class="sb-modal sb-modal-lg">...</div>  <!-- 800px -->
<div class="sb-modal sb-modal-xl">...</div>  <!-- 1000px -->

JavaScript Modal API

JavaScript

// Open modal by selector
SolbrosUI.modal.open('#my-modal');

// Close current modal
SolbrosUI.modal.close();

// Confirm dialog (returns Promise)
const confirmed = await SolbrosUI.modal.confirm({
  title: 'Delete Item',
  message: 'Are you sure you want to delete this item?',
  confirmText: 'Delete',
  cancelText: 'Cancel',
  dangerous: true  // Red confirm button
});

if (confirmed) {
  // User clicked confirm
}

# Tables

Data tables with styled headers, hover effects, and bordered cells.

HTML

<div class="sb-table-wrapper">
  <table class="sb-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th class="text-right">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>john@example.com</td>
        <td class="text-right">
          <span class="sb-badge sb-badge-success">Active</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

# Badges

Small status indicators and labels.

Preview

Primary Success Warning Danger Info Neutral

HTML

<span class="sb-badge sb-badge-primary">Primary</span>
<span class="sb-badge sb-badge-success">Success</span>
<span class="sb-badge sb-badge-warning">Warning</span>
<span class="sb-badge sb-badge-danger">Danger</span>
<span class="sb-badge sb-badge-info">Info</span>
<span class="sb-badge sb-badge-neutral">Neutral</span>

# Avatars

User avatars with initials. Available in multiple sizes and can be grouped.

Preview

SM

MD

LG

XL

JD

AB

+3

HTML

<!-- Avatar sizes -->
<div class="sb-avatar sb-avatar-sm">SM</div>
<div class="sb-avatar">JD</div>
<div class="sb-avatar sb-avatar-lg">LG</div>
<div class="sb-avatar sb-avatar-xl">XL</div>

<!-- Avatar group (stacked) -->
<div class="sb-avatar-group">
  <div class="sb-avatar">JD</div>
  <div class="sb-avatar">AB</div>
  <div class="sb-avatar">+5</div>
</div>

JavaScript Helper

JavaScript

// Get initials from full name
SolbrosUI.getInitials('John Doe');      // "JD"
SolbrosUI.getInitials('Alice Bob Charles'); // "AB" (max 2 chars)

# Progress Bars

Visual progress indicators with color variants for different states.

Preview

HTML

<!-- Default (green) -->
<div class="sb-progress">
  <div class="sb-progress-bar" style="width: 60%"></div>
</div>

<!-- Warning (yellow) -->
<div class="sb-progress">
  <div class="sb-progress-bar warning" style="width: 80%"></div>
</div>

<!-- Danger (red) -->
<div class="sb-progress">
  <div class="sb-progress-bar danger" style="width: 95%"></div>
</div>

<!-- Primary (red) -->
<div class="sb-progress">
  <div class="sb-progress-bar primary" style="width: 50%"></div>
</div>

<!-- Slim variant -->
<div class="sb-progress sb-progress-slim">
  <div class="sb-progress-bar" style="width: 70%"></div>
</div>

# Toast Notifications

Temporary notification messages that appear at the bottom-right of the screen. Toasts are created and managed via JavaScript.

Preview

JavaScript

// Show success toast
SolbrosUI.toast.success('Changes saved successfully!');

// Show error toast
SolbrosUI.toast.error('Something went wrong!');

// Show warning toast
SolbrosUI.toast.warning('Please check your input');

// Show info toast
SolbrosUI.toast.info('New updates available');

// Custom duration (5 seconds)
SolbrosUI.toast.success('Message', 5000);

// Generic method
SolbrosUI.toast.show('Message', 'success', 3000);

# Tabs

Tabbed navigation for switching between content panels.

HTML

<!-- Tab buttons -->
<div class="sb-tabs" id="my-tabs">
  <button class="sb-tab active" data-tab="overview">Overview</button>
  <button class="sb-tab" data-tab="details">Details</button>
  <button class="sb-tab" data-tab="settings">Settings</button>
</div>

<!-- Tab content panels -->
<div data-tab-content="overview">Overview content</div>
<div data-tab-content="details" class="sb-hidden">Details content</div>
<div data-tab-content="settings" class="sb-hidden">Settings content</div>

<script>
  // Initialize tabs
  SolbrosUI.tabs.init('#my-tabs');

  // With callback
  SolbrosUI.tabs.init('#my-tabs', (tabId) => {
    console.log('Switched to:', tabId);
  });
</script>

# Dropdowns

Dropdown menus that open on click. Dropdowns are automatically initialized when the page loads.

Preview

HTML

<div class="sb-dropdown">
  <!-- Trigger button (must have data-dropdown attribute) -->
  <button class="sb-btn sb-btn-secondary" data-dropdown>
    Options ▾
  </button>

  <!-- Dropdown menu -->
  <div class="sb-dropdown-menu">
    <button class="sb-dropdown-item">Edit</button>
    <button class="sb-dropdown-item">Duplicate</button>
    <div class="sb-dropdown-divider"></div>
    <button class="sb-dropdown-item" style="color: var(--sb-danger-light)">Delete</button>
  </div>
</div>

# Kanban Board

A drag-and-drop kanban board for task management. Tasks can be dragged between columns.

HTML

<div class="sb-kanban" id="my-kanban">
  <!-- Column -->
  <div class="sb-kanban-column">
    <div class="sb-kanban-column-header">
      <span class="sb-kanban-column-title">
        To Do <span class="sb-kanban-task-count">2</span>
      </span>
    </div>

    <div class="sb-kanban-column-tasks" data-column-id="todo">
      <!-- Task card -->
      <div class="sb-kanban-task" draggable="true" data-id="1">
        <div class="sb-kanban-task-title">Design homepage</div>
        <div class="sb-kanban-task-meta">
          <div class="sb-avatar sb-avatar-sm">JD</div>
          <span>2 comments</span>
        </div>
      </div>
    </div>

    <button class="sb-kanban-add-task">+ Add task</button>
  </div>

  <!-- More columns... -->
</div>

JavaScript Drag & Drop

JavaScript

// Initialize drag and drop
SolbrosUI.dragDrop.init('#my-kanban', {
  // Optional: custom selectors
  itemSelector: '.sb-kanban-task',
  columnSelector: '.sb-kanban-column-tasks',

  // Callback when item is dropped
  onDrop(data) {
    console.log('Item ID:', data.itemId);
    console.log('New column:', data.columnId);
    console.log('New index:', data.newIndex);

    // Call your API to persist the change
    updateTaskPosition(data.itemId, data.columnId, data.newIndex);
  }
});

# Empty States

Placeholder content for empty lists or sections.

HTML

<div class="sb-empty-state">
  <div class="sb-empty-state-icon">📁</div>
  <h3 class="sb-empty-state-title">No projects found</h3>
  <p class="sb-empty-state-text">
    Create your first project to get started.
  </p>
  <button class="sb-btn sb-btn-primary sb-mt-lg">Create Project</button>
</div>

# Loading States

Spinners and loading overlays for indicating loading states.

Preview

HTML

<!-- Inline spinners -->
<div class="sb-spinner sb-spinner-sm"></div>
<div class="sb-spinner"></div>
<div class="sb-spinner sb-spinner-lg"></div>

JavaScript

// Show loading overlay
SolbrosUI.loading.show('Loading data...');

// Hide loading overlay
SolbrosUI.loading.hide();

// Example: Show during API call
async function fetchData() {
  SolbrosUI.loading.show('Loading...');
  try {
    const data = await SolbrosUI.http.get('/api/data');
    return data;
  } finally {
    SolbrosUI.loading.hide();
  }
}

# `SolbrosUI.toast`

API for displaying toast notifications.

Method	Parameters	Description
success(message, duration?)	string, number	Show success toast
error(message, duration?)	string, number	Show error toast
warning(message, duration?)	string, number	Show warning toast
info(message, duration?)	string, number	Show info toast
show(message, type, duration)	string, string, number	Generic toast method

# `SolbrosUI.modal`

API for managing modal dialogs.

Method	Parameters	Description
open(selector)	string \| Element	Open a modal by selector or element
close(selector?)	string \| Element	Close modal (optional selector)
confirm(options)	object	Show confirm dialog, returns Promise<boolean>

Confirm Options

Option	Type	Description
title	string	Dialog title
message	string	Dialog message
confirmText	string	Confirm button text (default: "Confirm")
cancelText	string	Cancel button text (default: "Cancel")
dangerous	boolean	Use danger button style (default: false)

# `SolbrosUI.http`

A simple HTTP client wrapper around fetch with JSON support and cookie credentials.

JavaScript

// Configure base URL (optional)
SolbrosUI.http.configure({
  baseUrl: 'https://api.example.com',
  headers: {
    'Authorization': 'Bearer token'
  }
});

// GET request
const users = await SolbrosUI.http.get('/users');

// POST request
const newUser = await SolbrosUI.http.post('/users', {
  name: 'John Doe',
  email: 'john@example.com'
});

// PUT request
await SolbrosUI.http.put('/users/1', { name: 'Jane Doe' });

// DELETE request
await SolbrosUI.http.delete('/users/1');

// Error handling
try {
  await SolbrosUI.http.get('/protected');
} catch (error) {
  if (error.status === 401) {
    SolbrosUI.toast.error('Please log in');
  }
}

# Utility Functions

Helper functions for common tasks.

JavaScript

// Escape HTML (prevent XSS)
SolbrosUI.escapeHtml('<script>alert("xss")</script>');
// "&lt;script&gt;alert("xss")&lt;/script&gt;"

// Get initials from name
SolbrosUI.getInitials('John Doe');  // "JD"

// Format time from minutes
SolbrosUI.formatHours(125);  // "2h 5m"
SolbrosUI.formatHours(60);   // "1h"
SolbrosUI.formatHours(45);   // "45m"

// Format currency
SolbrosUI.formatCurrency(1500);           // "1.500 €"
SolbrosUI.formatCurrency(1500, 'USD', 'en-US');  // "$1,500"

// Format date
SolbrosUI.formatDate('2024-01-15');  // "15.01.2024"

// Format relative time
SolbrosUI.formatRelativeTime(new Date());  // "Just now"

// Debounce function
const search = SolbrosUI.debounce((query) => {
  // Called 300ms after last invocation
  fetchResults(query);
}, 300);

// Generate random ID
SolbrosUI.generateId();     // "a1b2c3d4"
SolbrosUI.generateId(12);  // "a1b2c3d4e5f6"

// Local storage with JSON
SolbrosUI.storage.set('user', { name: 'John' });
SolbrosUI.storage.get('user');  // { name: 'John' }
SolbrosUI.storage.remove('user');

# Installation

# Quick Start

# Theming & Customization

Available CSS Variables

# Container

# Grid System

# Header

# Buttons

# Cards

Card Title

# Forms

JavaScript Form Utilities

# Modals

JavaScript Modal API

# Tables

# Badges

# Avatars

JavaScript Helper

# Progress Bars

# Toast Notifications

# Tabs

# Dropdowns

# Kanban Board

JavaScript Drag & Drop

# Empty States

# Loading States

# SolbrosUI.toast

# SolbrosUI.modal

Confirm Options

# SolbrosUI.http

# Utility Functions

Example Modal

# `SolbrosUI.toast`

# `SolbrosUI.modal`

# `SolbrosUI.http`