CSS Framework to style web pages like the fictional computer operating system of a popular sci-fi franchise.

  • By Jörn Weißenborn
  • Last update: Dec 29, 2022
  • Comments: 17

LCARS (Library Computer Access Retrieval System)

LCARS is a purely client-side CSS and HTML framework, similar to Bootstrap, Foundation, Topcoat, Brick, or Pure.

Its purpose is to create websites inspired by the user interface design of a certain popular sci-fi franchise.

LCARS is written in Stylus. To make use of this package, you will not need the Stylus source, nor most of the metadata and configuration files. That is because each distribution also contains the compiled CSS, which is the heart of the project. However, if you wish to develop and submit Pull Requests, then you will need to modify the Stylus files and be able to compile them.

There are also a few requirements in terms of HTML elements, nesting, and corresponding CSS classes that are necessary for the styling to apply correctly. Looking directly at the source of the index.html demonstration/documentation page should prove instructive.

Demo and Documentation

See

Super Quick Start Guide

(these commands should run in a typical UNIX or linux shell as well as Windows PowerShell):

mkdir your_new_project_name
cd your_new_project_name
mkdir css

curl --location --output lcars_master.zip https://github.com/joernweissenborn/lcars/archive/master.zip
# Although curl is available on Windows, if you don't have it, you can do this download with powershell's Invoke-WebRequest command instead:
# Invoke-WebRequest https://github.com/joernweissenborn/lcars/archive/master.zip -OutFile lcars_master.zip

unzip lcars_master.zip
cd ./lcars-master/lcars
cp index.html ../../your_new_lcars_screen.html
cp css/lcars.css ../../css/
cd ../../

Next, just load up your_new_lcars_screen.html in a web browser and edit with a plain old text editor. Just pull out all the stuff you don't need and customize the text you want.

This gives you the minimum (just two files, and only about 70KB!) and won't include extensions like sound or javascript behaviors or extra complex SVG elements. And you can now safely delete lcars-master/ and lcars_master.zip if you don't want any of those extensions and want to clean up your project directory a little. This should be pretty easy to just drop into any other web project you already have built, too; just insert an html link element to lcars.css in your project's html files. Also you should be aware of how CSS works in terms of how and when styling override occurs.

Now you can boldly go out and develop some new web pages never seen before.

Problems or Feature Requests

Please file an issue, I am happy to help!

Contributing

Pull requests are very welcome, but please relate it to an issue.

Note for users of the original version

The library has been completly rewritten, dropping things like dividers and menu. If you want to use the old version, checkout the legacy release.

Thanks

Thanks to @garrett- for initial development! Thanks to @jrwarwick for audio and SVG support! Thanks to @xenziffen for various fixes and CSS enhancements!

Github

https://github.com/joernweissenborn/lcars

Comments(17)

  • 1

    Documentation request: How do I incorporate this project?

    First off, thanks for this repo! I look forward to being able to use it.

    I assumed I could npm install this into my project and import it, is that the case? If so, what's the syntax to import it?

    If not, what's the suggested method of implementing this project into a site?

  • 2

    Feature/svg widget

    SVG linked and inline as an optional special Element for complex geometric Elements, such as the classic circular XY directional control. I know this digresses some from this being a "CSS framework", so if you don't want it in here, no hard feelings.

  • 3

    doubled color class selector, like important

    #34 The goal of this branch is to increase lcars color selector specificity.

    Reading a bit more, it is recommended that the selector simply repeat the same class name. That means it will match "twice as much" as any other color rule with only one class name or any element types.

    I recommend we try this to see if it can be accepted into the project.

  • 4

    Replacement or notes on replacement sound effects that are more authentic

    Previously, audio support was added and some totally inauthentic cheesy place holder sounds effects were included. I have gotten permission from The current owner of STdimension to use the collection of sfx, including renaming files, and distributing. He noted that it would be advisable to review liability, and to include disclaimer and attribution to CBS/Paramount if we do it. I'm in favor of this; it's not commerical, very minor sample and precedent exists for reuse.

    If we don't do this, I could instead provide simple instructions, maybe even a script to "upgrade" the sounds to the authentic editions.

    What do you think?

  • 5

    Some quasi-buttons do not exhibit the color change behavior when active

    Let "quasi-button" mean a div with the button class. The intended behavior is for the button to change color (by receiving the :active pseudo-class) when clicked. I observe some lcars-elements with button class do and some do not change color on click. Particularly, those that are in a bar and/or header.

    Upon closer examination, it looks like some elements background color are marked !important, which is overriding the :active rules.

    Experimentally, it seems like one solution is to add the !important specifier to the rule for .lcars-element.button:active (found at line 644 of css/lcars.css). This, of course, ought to be translated into the base Stylus notation if accepted as a solution.

  • 6

    Simple request

    I've stumble on your lcars repository because I was searching for some sort of Web LCARS codes. I know there are plenty sources available but NOT many are worth the effort to be used nowadays. Many of them were made using Flash or old HTML coding. The only I have found so far that is great is Aricwithana/LCARS-SDK but it is a bit complex to use and for more advanced programming. Plus, the owner put some restrictions on its usage.

    Then I found your repository code, that it a good start to what I intend to achieve but with a little twist of what I found and know on LCARS specs and functionnality. My goal is to create a beautifull, adaptive and Responsive framework (for pc, tablet, phone, etc.) like a Bootstrap style that would be easy to use with only coding with HTML5, CSS & JS.

    I was wondering if I could borrow your source and revamp it/redo it to what I'm trying to start?

    Thanks in advance.

  • 7

    Creating a menu?

    This could just be my lack of css knowledge, but do you have any examples of using the button elements along the left side menu bar?

    Also, I've been using your lcars css template for my golang apps and this weekend started turning it into a go library incorporating it into the usual web framework I use. I hope you don't mind: www.github.com/picardrulez/lcars

  • 8

    New Owner

    You stated that the package would need a new owner. I wanted to write my own LCARS CSS and would be interested at just continue your work.

    I haven't worked with Stylus so far, but I am willing to learn. I will see if can setup everything tomorrow. If you could drop a few hints about the structure it would be helpful!

  • 9

    Call for collaborators

    Hi everybody, I can really use some hands to maintain this in the future, so I am looking for people helping me to keep this project alive and usable.

    There is alot of things to do (most importantly fix and extend documentation/examples), answer questions and so on, which I unfortunately don't have much time for. At least not not as much as I want. So if somebody has time to help, just reply to this issue!

  • 10

    Thank you.

    Not an issue, but a thanks for making this. I was able to add some basic animation to make important buttons pulseate and animate list items. Just the beginning of a small personal project https://www.youtube.com/watch?v=FW3wi8TL8_s&feature=youtu.be

  • 11

    Short filenames

    I'm using LCARS on an embedded platform (ESP32-CAM). The embedded website files are on a SD cards but the firmware uses common DOS 8.3 filenames. LCARS works on it when using DOS filenames.

  • 12

    Getting LCARS to work with React

    Following up on #57:

    Just in case anyone else comes across this wondering how to incorporate this into React.

    Yes, it is possible. After cleaning up the HTML from the demo page, I've now got it rendering successfully. Haven't gotten lcarsAudio integrated yet, but I'll try that later.

    For now, this is how you can get it to work:

    npm install -S git+https://github.com/joernweissenborn/lcars#main
    

    or

    npx yarn add git+https://github.com/joernweissenborn/lcars#main
    

    Then include the CSS in your "Main.js" or index.js:

    import 'LCARS/lcars/css/lcars.devel.css'
    

    I'm hoping to make some components on top of this, so it can be used more easily in React applications.

    Also, this is no action needed. Just figured that I'd share this so it's documented for the benefit of others.

  • 13

    Is it possible to have a tutorial to realize something like www.thelcars.com template?

    Hi, very interesting project. Thanks.

    I am a little dumb in managing CSS, etc... do you know if it is possible to have a tutorial to realize something like www.thelcars.com template? Or at least very similar to this image

    Regards

  • 14

    Expand contributing section of readme

    I miss information on how to effectively contribute to the project. This is something that could be in the README.md within the Contributing section. Especially information what exact software is needed to bake stylus code into CSS would be highly appreciated.

  • 15

    Add/red alert css

    Simple approach: a single extra special CSS class that is applied to the body tag (and just as easily removed). Pure CSS, though it could be coordinated with some js audio module calls. Resolves #67.

  • 16

    Simple Red Alert effect

    It would be nice to have a simple way of activating a Red Alert condition that overrides some styling (mostly color) to emulate the well known Red Alert effect.

  • 17

    Demo/doc left-hand side-bar navigation has too many buttons

    With the adding of sections, the left-hand side bar now overflows on the bottom on not-too modestly sized screens (a laptop, in my case). Even though it reduces the flavor, I think we need to lose the "TOP" button and the "SRC" button. Or possibly if someone is feeling ambitious, move them to the bottom horizontal footer frame bar.