@withstudiocms/lcars-stylus

v1.1.0

Published

a month ago

LCARS inspired design system built with Stylus

Downloads

0High
0Medium
0Low

adammatthiesen

stylus css ui lcars lcars-style lcars-interface design-system withastro astro-component

LCARS Design system for Stylus

LCARS is a purely CSS and HTML framework (Served as .styl Stylus files), similar to Bootstrap, Foundation, Topcoat, Brick, or Pure to create user interfaces similar to a certain popular sci-fi franchise. There are a few requirements in terms of HTML element nesting and corresponding CSS classes that are necessary for the styling to apply correctly, please checkout our example theme for details about how to implement this.

Requirements

Stylus - Learn more Here
LCARS GTJ3 font - Available Here

Usage

Basic Usage in Astro

Ensure Stylus is installed

npm install stylus

Font Setup with Astro Fonts

In your Astro config file ensure you download the font above, and add it using the following example:

import { defineConfig, fontProviders } from 'astro/config';

// https://astro.build/config
export default defineConfig({
    fonts: [{
        // https://gtjlcars.de/LCARSindex/LCARSFONTS.htm
        provider: fontProviders.local(),
        name: "LCARSGTJ3",
        cssVariable: "--font-lcarsgtj3",
        weights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
        display: 'swap',
        options: {
            variants: [{
                src: ['./src/assets/fonts/LCARSGTJ3.woff2'],
                weight: "100 900",
                style: 'normal',
                display: 'swap'
            }]
        }
    }]
});

If you are not using Astro, the important thing here is to ensure the font is loaded, and available to the application as the --font-lcarsgtj3 css variable.

Add to your Layout

In your Layout.astro

---
import "@withstudiocms/lcars-stylus"; 
// OR
import "@withstudiocms/lcars-stylus/index.styl";

import { Font } from "astro:assets";
---
<html>
    <head>
        <!-- Head content here -->
        <Font cssVariable="--font-lcarsgtj3" preload />
    </head>
    <body>
        <!-- Body content here -->
    </body>
</html>

Astro Components

These components will be available as part of the @withstudiocms/lcars-stylus/astro/... exports

components/
- Bar.astro - Used to fill spaces and to create top or bottom horizontal bars.
- BarTitle.astro - Used to add a title to a bar.
- Bracket.astro - Decorative Brackets. Use to group elements.
- Column.astro - Creates a column layout.
- DataTable.astro - Simple, two-dimensional tabularly structured data display.
- Divider.astro - Create a divider on the page.
- Elbow.astro - The iconic LCARS frame elbow.
- LElement.astro - Elements (Known as LElements short for "LCARS Element") are the basic blocks of LCARS. They can be used as buttons and indicators. Use the grid classes to set the size. The html "div" is typically the preferred tag to assign the lcars-element tag to.
- Row.astro - Creates a row layout.
- TextBox.astro - A display-only text box with pre-defined font sizes. Use to fit headers and indicators, but not for large texts. Also not for text inputs.
layouts/
- Basic.astro - The Basic/Classic single frame LCARS Layout for Astro.
- Voyager.astro - A Voyager era inspired LCARS layout for Astro.
utility/
- LCARSAudio.astro - UI Audio controller
- LCARSColorFix.astro - UI Dark/light text color fixer, Makes text color white or black depending on background color.
- LCARSLoading.astro - A simple loading screen that can be displayed on top as an overlay during transitions, or while waiting for something.

Checkout the Example project for usage examples

Checkout the main Example theme built with Astro for how to work with this project.

Astro-LCARS theme

Licensing

MIT Licensed 2026-Present - withstudiocms

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme