Solbros UI Framework

A dark-themed CSS/JS component library for modern web applications

Colors

Design tokens and color palette

Primary Colors

Primary
#e63946
Primary Dark
#d62839
Primary Light
#ff6b6b

Semantic Colors

Success
#10b981
Warning
#f59e0b
Danger
#ef4444
Info
#60a5fa

Background Colors

Darkest
#0f172a
Dark
#1a1a2e
Light
#1e293b
Lighter
#334155
--sb-primary, --sb-success, --sb-warning, --sb-danger, --sb-info

Typography

Font sizes, weights, and text utilities

Heading 1 (36px)

Heading 2 (28px)

Heading 3 (24px)

Heading 4 (20px)

Heading 5 (18px)
Heading 6 (16px)

Body text with primary, secondary, muted, success, warning, and danger variants.

<h1> to <h6> | .text-primary, .text-muted, .text-success, etc.

Buttons

Button variants and sizes

Variants

Sizes

States

.sb-btn + .sb-btn-primary | .sb-btn-secondary | .sb-btn-sm | .sb-btn-lg | .sb-btn-icon

Forms

Form inputs, selects, and layouts

.sb-form-group, .sb-form-label, .sb-form-input, .sb-form-select, .sb-form-textarea, .sb-form-row

Cards

Content containers and stat cards

Card Title

Active

This is a basic card component with header, body, and footer sections.

Clickable Card

Hover over this card to see the interaction effect.

1,234
Total Users
.sb-card, .sb-card-header, .sb-card-body, .sb-card-footer, .sb-card-clickable, .sb-stat-card

Badges

Status indicators and labels

Primary Success Warning Danger Info Neutral
.sb-badge + .sb-badge-primary | .sb-badge-success | .sb-badge-warning | .sb-badge-danger

Progress Bars

Visual progress indicators

Default (75%)

Warning (85%)

Danger (95%)

Primary (50%)

Slim (60%)

.sb-progress > .sb-progress-bar | .warning | .danger | .primary | .sb-progress-slim

Avatars

User profile images and initials

Sizes

SM
MD
LG
XL

Avatar Group

JD
AB
MK
+5
.sb-avatar | .sb-avatar-sm | .sb-avatar-lg | .sb-avatar-xl | .sb-avatar-group

Tables

Data tables with hover effects

Name Email Role Status
John Doe john@example.com Admin Active
Jane Smith jane@example.com Manager Active
Bob Wilson bob@example.com User Inactive
.sb-table-wrapper > .sb-table > thead, tbody, th, td

Modals

Dialog windows and overlays

Modal Title

This is a modal dialog. You can put any content here.

SolbrosUI.modal.open('#id'), SolbrosUI.modal.close(), SolbrosUI.modal.confirm({ title, message })

Toast Notifications

Temporary notification messages

SolbrosUI.toast.success(message), .error(), .warning(), .info()

Tabs

Tabbed navigation

This is the Overview tab content.

This is the Details tab content.

This is the Settings tab content.

.sb-tabs > .sb-tab + [data-tab] | Content: [data-tab-content]

Kanban Board

Drag and drop task board

To Do 2
Design new landing page
JD
2 comments
Update documentation
AB
In Progress 1
Implement auth flow
MK
5 comments
Done 1
Setup CI/CD pipeline
JD
.sb-kanban > .sb-kanban-column > .sb-kanban-task (draggable)
JS: SolbrosUI.dragDrop.init('#demo-kanban', { onDrop: callback })

Empty States

Placeholder for empty content

📁

No projects found

Create your first project to get started with task management.

.sb-empty-state > .sb-empty-state-icon, .sb-empty-state-title, .sb-empty-state-text

Loading States

Spinners and loading overlays

Spinners

Loading Overlay

.sb-spinner | .sb-spinner-sm | .sb-spinner-lg
JS: SolbrosUI.loading.show('message'), SolbrosUI.loading.hide()

Utility Classes

Helper classes for common styles

Spacing

Margin: .sb-m-0, .sb-mt-sm, .sb-mt-md, .sb-mt-lg, .sb-mt-xl, .sb-mb-*
Padding: .sb-p-0, .sb-p-sm, .sb-p-md, .sb-p-lg, .sb-p-xl

Flexbox

.sb-flex, .sb-flex-col, .sb-flex-wrap
.sb-items-center, .sb-items-start, .sb-items-end
.sb-justify-center, .sb-justify-between, .sb-justify-end
.sb-gap-sm, .sb-gap-md, .sb-gap-lg, .sb-gap-xl

Grid

.sb-grid, .sb-grid-2, .sb-grid-3, .sb-grid-4, .sb-grid-auto

Display

.sb-hidden, .sb-block, .sb-inline, .sb-inline-block

Animations

.sb-animate-fade-in, .sb-animate-slide-up, .sb-animate-slide-down, .sb-animate-pulse

JavaScript Utilities

Helper functions included in solbros-ui.js

// Escape HTML (XSS prevention) SolbrosUI.escapeHtml('<script>alert("xss")</script>') // Get initials from name SolbrosUI.getInitials('John Doe') // "JD" // Format time from minutes SolbrosUI.formatHours(125) // "2h 5m" // Format currency SolbrosUI.formatCurrency(1500) // "1.500 €" // Format date SolbrosUI.formatDate('2024-01-15') // "15.01.2024" // Format relative time SolbrosUI.formatRelativeTime(new Date()) // "Just now" // Debounce function const debouncedFn = SolbrosUI.debounce(fn, 300) // Generate random ID SolbrosUI.generateId() // "a1b2c3d4" // HTTP client SolbrosUI.http.configure({ baseUrl: '/api' }) SolbrosUI.http.get('/users') SolbrosUI.http.post('/users', { name: 'John' }) // Local storage (with JSON) SolbrosUI.storage.set('user', { name: 'John' }) SolbrosUI.storage.get('user') // { name: 'John' } // Form utilities SolbrosUI.form.serialize('#my-form') SolbrosUI.form.populate('#my-form', { name: 'John' }) SolbrosUI.form.reset('#my-form')