release
This commit is contained in:
commit
47f67eea8c
43 changed files with 5819 additions and 0 deletions
365
docs/components.md
Normal file
365
docs/components.md
Normal file
|
|
@ -0,0 +1,365 @@
|
|||
# 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:
|
||||
```blueprint
|
||||
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:
|
||||
```blueprint
|
||||
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:
|
||||
```blueprint
|
||||
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:
|
||||
```blueprint
|
||||
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:
|
||||
```blueprint
|
||||
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:
|
||||
```blueprint
|
||||
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:
|
||||
```blueprint
|
||||
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:
|
||||
```blueprint
|
||||
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:
|
||||
```blueprint
|
||||
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:
|
||||
```blueprint
|
||||
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:
|
||||
```blueprint
|
||||
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:
|
||||
```blueprint
|
||||
badge { "New" }
|
||||
badge(color:blue) { "Status" }
|
||||
```
|
||||
Properties:
|
||||
- `color`: Custom badge color
|
||||
- `backgroundColor`: Custom background color
|
||||
- `width`: Custom width in percentage
|
||||
|
||||
### Alert
|
||||
Notification messages:
|
||||
```blueprint
|
||||
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:
|
||||
```blueprint
|
||||
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:
|
||||
```blueprint
|
||||
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:
|
||||
```blueprint
|
||||
textarea(placeholder:"Enter message") { }
|
||||
```
|
||||
Properties:
|
||||
- `placeholder`: Placeholder text
|
||||
- `rows`: Number of visible rows
|
||||
- `required`: Required field
|
||||
- `width`: Custom width in percentage
|
||||
|
||||
### Select
|
||||
Dropdown selection:
|
||||
```blueprint
|
||||
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:
|
||||
```blueprint
|
||||
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:
|
||||
```blueprint
|
||||
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:
|
||||
```blueprint
|
||||
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:
|
||||
```blueprint
|
||||
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:
|
||||
```blueprint
|
||||
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:
|
||||
```blueprint
|
||||
progress(value:75, max:100) { }
|
||||
```
|
||||
Properties:
|
||||
- `value`: Current value
|
||||
- `max`: Maximum value
|
||||
- `indeterminate`: Loading state
|
||||
- `width`: Custom width in percentage
|
||||
|
||||
### Slider
|
||||
Range input:
|
||||
```blueprint
|
||||
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:
|
||||
```blueprint
|
||||
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
|
||||
Loading…
Add table
Add a link
Reference in a new issue