@kung-fu/lcars
Version:
LCARS CSS framework and style guide
227 lines (170 loc) • 5.39 kB
Markdown
# LCARS CSS Framework
A complete CSS framework for creating LCARS (Library Computer Access/Retrieval System) styled interfaces inspired by Star Trek.
## Installation
### Via NPM
```bash
npm install @kung-fu/lcars
```
```html
<link rel="stylesheet" href="path/to/lcars.css">
```
### Basic Usage
```html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My LCARS Interface</title>
<link rel="stylesheet" href="lcars.css">
</head>
<body>
<div class="page-container">
<h1>LCARS Interface</h1>
<button class="lcars-button">Primary Button</button>
<button class="lcars-button lcars-button-blue">Secondary Button</button>
</div>
</body>
</html>
```
## Components
### Buttons
Standard LCARS buttons with various color schemes:
```html
<button class="lcars-button">PRIMARY</button>
<button class="lcars-button lcars-button-blue">SECONDARY</button>
<button class="lcars-button lcars-button-purple">TERTIARY</button>
<button class="lcars-button lcars-button-red">ALERT</button>
```
Button sizes:
```html
<button class="lcars-button lcars-button-small">SMALL</button>
<button class="lcars-button">STANDARD</button>
<button class="lcars-button lcars-button-large">LARGE</button>
<button class="lcars-button lcars-button-wide">FULL WIDTH</button>
```
### Elbow Elements
Iconic LCARS corner elements:
```html
<div class="lcars-elbow-left lcars-orange">
<div class="elbow-content">LEFT</div>
</div>
<div class="lcars-elbow-right lcars-blue">
<div class="elbow-content">RIGHT</div>
</div>
<div class="lcars-elbow-top lcars-purple">
<div class="elbow-content">TOP</div>
</div>
<div class="lcars-elbow-bottom lcars-red">
<div class="elbow-content">BOTTOM</div>
</div>
```
### Panels
Data display containers:
```html
<div class="lcars-panel">
<div class="lcars-panel-header">TACTICAL ANALYSIS</div>
<p>Panel content goes here...</p>
</div>
```
### Progress Bars
Status and progress indicators:
```html
<div class="lcars-progress">
<div class="lcars-progress-bar" style="width: 75%;">SHIELDS 75%</div>
</div>
<div class="lcars-progress">
<div class="lcars-progress-bar lcars-bg-red" style="width: 45%;">HULL INTEGRITY 45%</div>
</div>
```
### Terminal Display
Command-line interface styling:
```html
<div class="lcars-terminal">
<div class="lcars-terminal-line">LCARS TERMINAL INTERFACE v47.0.1</div>
<div class="lcars-terminal-line lcars-terminal-prompt">STATUS REPORT</div>
<div class="lcars-terminal-line">WARP CORE: ONLINE</div>
<div class="lcars-terminal-line">SHIELDS: 100%</div>
</div>
```
### Status Grid
Grid-based status monitoring:
```html
<div class="lcars-status-grid">
<div class="lcars-status-cell active">01</div>
<div class="lcars-status-cell warning">02</div>
<div class="lcars-status-cell error">03</div>
<div class="lcars-status-cell active">04</div>
</div>
```
### Audio Indicators
Animated audio level bars:
```html
<div class="lcars-audio-indicator">
<span>AUDIO LEVEL</span>
<div class="lcars-audio-bars">
<div class="lcars-audio-bar"></div>
<div class="lcars-audio-bar"></div>
<div class="lcars-audio-bar"></div>
<div class="lcars-audio-bar"></div>
<div class="lcars-audio-bar"></div>
</div>
</div>
```
### Alert States
Emergency alert animations:
```html
<button class="lcars-button lcars-alert-red">RED ALERT</button>
<button class="lcars-button lcars-alert-yellow">YELLOW ALERT</button>
```
### Layout Elements
Brackets and spacers:
```html
<div class="lcars-bracket">
<div class="lcars-bracket-left"></div>
<div class="lcars-bracket-content">GROUPED CONTENT</div>
<div class="lcars-bracket-right"></div>
</div>
<div class="lcars-spacer"></div>
<div class="lcars-bar">SYSTEM STATUS BAR</div>
```
### Grid System
Flexible layout utilities:
```html
<div class="lcars-grid">
<button class="lcars-button lcars-u-3">BUTTON 1</button>
<button class="lcars-button lcars-u-3">BUTTON 2</button>
</div>
```
Size classes: `lcars-u-1` through `lcars-u-6` (width), `lcars-h-1` through `lcars-h-3` (height)
### Color Classes
Apply LCARS colors to any element:
- `lcars-orange` (primary)
- `lcars-blue` (secondary)
- `lcars-purple` (tertiary)
- `lcars-red` (alerts)
- `lcars-yellow` (warnings)
- `lcars-green` (success)
## Browser Support
- Modern browsers with CSS Grid and Flexbox support
- CSS custom properties required
- No IE11 support (modern web standards only)
## Customization
The framework uses CSS custom properties for easy theming:
```css
:root {
--lcars-orange: #ff9900;
--lcars-blue: #0099ff;
/* Override colors as needed */
}
```
## Accessibility
- Ensure sufficient color contrast ratios
- Add proper ARIA labels to interactive elements
- Test with keyboard navigation
- Verify screen reader compatibility
## Legal Notice
Star Trek and LCARS are trademarks and copyrights of CBS Studios Inc. (now part of Paramount Global). This CSS framework is an independent implementation inspired by the LCARS interface design and is not affiliated with, endorsed by, or sponsored by CBS Studios Inc. or Paramount Global.
This framework is provided for educational and non-commercial use. Users should ensure compliance with applicable trademark and copyright laws.
## License
MIT License - see LICENSE file for details