142 lines
No EOL
3.7 KiB
Markdown
142 lines
No EOL
3.7 KiB
Markdown
# Blueprint Documentation
|
|
|
|
Blueprint is a modern, declarative UI framework for building beautiful web interfaces. It provides a simple, intuitive syntax for creating responsive, dark-themed web applications with consistent styling and behavior.
|
|
|
|
## Core Features
|
|
|
|
- **Declarative Syntax**: Write UI components using a clean, intuitive syntax
|
|
- **Dark Theme**: Beautiful dark theme with consistent styling
|
|
- **Responsive Design**: Built-in responsive design system
|
|
- **Component-Based**: Rich set of reusable components
|
|
- **Type-Safe**: Catch errors before they reach the browser
|
|
- **Custom Properties**: Direct control over styling when needed
|
|
- **Live Preview**: Changes appear instantly in your browser
|
|
|
|
## Documentation Structure
|
|
|
|
1. [Getting Started](getting-started.md)
|
|
- Installation
|
|
- Basic Usage
|
|
- Project Structure
|
|
- Property Types
|
|
- Page Configuration
|
|
- Error Handling
|
|
- Best Practices
|
|
|
|
2. [Components](components.md)
|
|
- Layout Components (Section, Grid, Horizontal, Vertical)
|
|
- Typography (Title, Text)
|
|
- Navigation (Navbar, Links)
|
|
- Form Elements (Input, Textarea, Select, Checkbox, Radio, Switch)
|
|
- Interactive Components (Button, Card, Badge, Alert, Tooltip)
|
|
- Container Components (List, Table, Progress, Slider)
|
|
|
|
3. [Styling](styling.md)
|
|
- Layout Properties
|
|
- Typography Properties
|
|
- Component Styles
|
|
- Interactive States
|
|
- Responsive Design
|
|
- Custom Properties
|
|
- Theme Variables
|
|
- Best Practices
|
|
|
|
4. [Examples](examples.md)
|
|
- Basic Examples
|
|
- Layout Examples
|
|
- Form Examples
|
|
- Navigation Examples
|
|
- Complete Page Examples
|
|
|
|
## Quick Start
|
|
|
|
```blueprint
|
|
page {
|
|
title { "My First Blueprint Page" }
|
|
description { "A simple Blueprint page example" }
|
|
meta-viewport { "width=device-width, initial-scale=1" }
|
|
}
|
|
|
|
navbar {
|
|
horizontal(spaced) {
|
|
text(bold) { "My App" }
|
|
links {
|
|
link(href:/) { "Home" }
|
|
link(href:/about) { "About" }
|
|
}
|
|
}
|
|
}
|
|
|
|
section(wide, centered) {
|
|
vertical(gap:2) {
|
|
title(huge) { "Welcome to Blueprint" }
|
|
text(subtle) { "Start building beautiful UIs with Blueprint" }
|
|
|
|
horizontal(centered, gap:2) {
|
|
button { "Get Started" }
|
|
button-light { "Learn More" }
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## Key Concepts
|
|
|
|
1. **Elements**
|
|
- Basic building blocks of Blueprint
|
|
- Each element maps to an HTML tag
|
|
- Elements can have properties and children
|
|
- Elements follow semantic naming
|
|
|
|
2. **Properties**
|
|
- Flag properties (e.g., `centered`, `bold`)
|
|
- Key-value properties (e.g., `type:email`)
|
|
- Numeric properties (e.g., `width:80`)
|
|
- Color properties (e.g., `color:#ff0000`)
|
|
|
|
3. **Styling**
|
|
- Consistent dark theme
|
|
- Built-in responsive design
|
|
- Direct style properties
|
|
- Theme variables
|
|
- Interactive states
|
|
|
|
4. **Components**
|
|
- Layout components
|
|
- Form elements
|
|
- Interactive components
|
|
- Container components
|
|
- Typography elements
|
|
|
|
## Best Practices
|
|
|
|
1. **Organization**
|
|
- Group related elements
|
|
- Use consistent spacing
|
|
- Keep files focused
|
|
- Split into components
|
|
|
|
2. **Styling**
|
|
- Use predefined properties
|
|
- Maintain consistency
|
|
- Leverage built-in features
|
|
- Custom styles sparingly
|
|
|
|
3. **Performance**
|
|
- Small, focused files
|
|
- Optimize assets
|
|
- Use responsive features
|
|
- Minimize custom styles
|
|
|
|
4. **Accessibility**
|
|
- Semantic elements
|
|
- Color contrast
|
|
- Focus states
|
|
- Screen reader support
|
|
|
|
## Need Help?
|
|
|
|
- Check the [examples](examples.md) for common patterns
|
|
- Read the [components guide](components.md) for detailed documentation
|
|
- Learn about styling in the [styling guide](styling.md)
|
|
- Start with the [getting started guide](getting-started.md) for basics |