blueprint/docs/components.md

Blueprint Components

Blueprint provides a rich set of components for building modern web interfaces. Each component is designed to be responsive, accessible, and consistent with the dark theme.

Layout Components

Section

Container for page sections:

section(wide, centered) {
    // Content
}

Properties:

• wide: Full width with max-width constraint (1200px)
• centered: Center content horizontally and vertically
• alternate: Alternate background color
• padding: Custom padding in pixels
• margin: Custom margin in pixels

Grid

Responsive grid layout:

grid(columns:3) {
    // Grid items
}

Properties:

• columns: Number of columns (default: auto-fit)
• responsive: Enable responsive behavior
• gap: Custom gap size between items
• width: Custom width in percentage

Horizontal

Horizontal flex container:

horizontal(centered, spaced) {
    // Horizontal items
}

Properties:

• centered: Center items vertically
• spaced: Space between items
• gap: Custom gap size
• width: Custom width in percentage
• responsive: Wrap items on small screens

Vertical

Vertical flex container:

vertical(centered) {
    // Vertical items
}

Properties:

• centered: Center items horizontally
• spaced: Space between items
• gap: Custom gap size
• width: Custom width in percentage

Typography

Title

Page or section titles:

title(huge) { "Main Title" }
title(large) { "Section Title" }

Properties:

• huge: Very large size (4rem)
• large: Large size (2rem)
• bold: Bold weight
• centered: Center align
• color: Custom text color

Text

Regular text content:

text(large) { "Large text" }
text(subtle) { "Subtle text" }

Properties:

• large: Larger size
• small: Smaller size (0.875rem)
• subtle: Muted color
• bold: Bold weight
• color: Custom text color

Navigation

Navbar

Fixed navigation bar:

navbar {
    horizontal {
        text(bold) { "Brand" }
        links {
            link(href:home) { "Home" }
            link(href:about) { "About" }
        }
    }
}

Properties:

• sticky: Fixed to top
• transparent: Transparent background
• backgroundColor: Custom background color

Links

Navigation link group:

links {
    link(href:page1) { "Link 1" }
    link(href:page2) { "Link 2" }
}

Properties:

• spaced: Add spacing between links
• vertical: Vertical orientation
• gap: Custom gap size

Link

Individual link:

link(href:page, text:"Click here") { }
link(href:https://example.com) { "External Link" }

Properties:

• href: Target URL or page
• text: Link text (optional)
• external: Open in new tab (automatic for http/https URLs)
• color: Custom text color

Interactive Components

Button

Various button styles:

button { "Primary" }
button-secondary { "Secondary" }
button-light { "Light" }
button-compact { "Compact" }

Properties:

• disabled: Disabled state
• width: Custom width in percentage
• backgroundColor: Custom background color
• color: Custom text color

Card

Content container with hover effect:

card {
    title { "Card Title" }
    text { "Card content" }
    button { "Action" }
}

Properties:

• raised: Add shadow and hover effect
• width: Custom width in percentage
• padding: Custom padding in pixels
• backgroundColor: Custom background color

Badge

Status indicators:

badge { "New" }
badge(color:blue) { "Status" }

Properties:

• color: Custom badge color
• backgroundColor: Custom background color
• width: Custom width in percentage

Alert

Notification messages:

alert(type:info) { "Information message" }

Properties:

• type: info, success, warning, error
• backgroundColor: Custom background color
• color: Custom text color
• width: Custom width in percentage

Tooltip

Hover tooltips:

tooltip(text:"More info") {
    text { "Hover me" }
}

Properties:

• text: Tooltip text
• position: top, right, bottom, left
• backgroundColor: Custom background color
• color: Custom text color

Form Elements

Input

Text input field:

input(placeholder:"Type here") { }

Properties:

• placeholder: Placeholder text
• type: Input type (text, email, password, etc.)
• required: Required field
• disabled: Disabled state
• width: Custom width in percentage

Textarea

Multi-line text input:

textarea(placeholder:"Enter message") { }

Properties:

• placeholder: Placeholder text
• rows: Number of visible rows
• required: Required field
• width: Custom width in percentage

Select

Dropdown selection:

select {
    option { "Option 1" }
    option { "Option 2" }
}

Properties:

• placeholder: Placeholder text
• required: Required field
• disabled: Disabled state
• width: Custom width in percentage

Checkbox

Checkbox input:

horizontal {
    checkbox { }
    text { "Accept terms" }
}

Properties:

• checked: Default checked state
• required: Required field
• disabled: Disabled state
• width: Custom width in percentage

Radio

Radio button input:

vertical {
    horizontal {
        radio(name:"choice") { }
        text { "Option 1" }
    }
    horizontal {
        radio(name:"choice") { }
        text { "Option 2" }
    }
}

Properties:

• name: Group name
• checked: Default checked state
• disabled: Disabled state
• width: Custom width in percentage

Switch

Toggle switch:

horizontal {
    switch { }
    text { "Enable feature" }
}

Properties:

• checked: Default checked state
• disabled: Disabled state
• width: Custom width in percentage

Container Components

List

Ordered or unordered lists:

list {
    text { "Item 1" }
    text { "Item 2" }
}

Properties:

• ordered: Use ordered list
• bullet: Show bullets
• spaced: Add spacing
• width: Custom width in percentage

Table

Data tables:

table {
    row {
        cell { "Header 1" }
        cell { "Header 2" }
    }
    row {
        cell { "Data 1" }
        cell { "Data 2" }
    }
}

Properties:

• striped: Alternate row colors
• bordered: Add borders
• compact: Reduced padding
• width: Custom width in percentage

Progress

Progress indicators:

progress(value:75, max:100) { }

Properties:

• value: Current value
• max: Maximum value
• indeterminate: Loading state
• width: Custom width in percentage

Slider

Range input:

slider(min:0, max:100, value:50) { }

Properties:

• min: Minimum value
• max: Maximum value
• step: Step increment
• disabled: Disabled state
• width: Custom width in percentage

Media

Images and videos with responsive behavior:

media(src:/path/to/image.jpg) { "Image description" }
media(src:https://example.com/video.mp4, type:video) { "Video description" }

Properties:

• src: URL or path to the media file (required)
• type: Media type (img or video, defaults to img)
• width: Custom width in percentage
• height: Custom height in percentage
• padding: Custom padding in pixels
• margin: Custom margin in pixels

The media component automatically:

• Scales images/videos responsively (max-width: 100%)
• Maintains aspect ratio (height: auto)
• Adds rounded corners
• Includes a subtle hover effect
• Uses the content as alt text for images
• Adds video controls when type is video