@kung-fu/lcars

v0.0.1

Published

10 months ago

LCARS CSS framework and style guide

0High
0Medium
0Low

szul

x51

lcars star-trek ui css framework

LCARS CSS Framework

A complete CSS framework for creating LCARS (Library Computer Access/Retrieval System) styled interfaces inspired by Star Trek.

Installation

Via NPM

npm install @kung-fu/lcars

<link rel="stylesheet" href="path/to/lcars.css">

Basic Usage

<!DOCTYPE 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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

: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