joernweissenborn / lcars

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

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!

lcars's Issues

How to change the header and footer?

I've managed to change the header orientation using a scaleY(-1) transform.

But really I'd like to be able to put a header in any place as a row. It seems to be 'stuck' to the top. The newer LCARS displays have the header and footer swapped (so their bars meet in the middle, like this screenshot below). How can I do this with CSS? It has a left column first, then a 'header', then footer and then another left column.

This is how the elements should be laid out in this case:

[  .gif  ][ u-1-4 ][u-1-3]		[u-1-3]
[button][button][button]		[button]
[button][button][button]		[button]
[button][button][button]		[elbow][bar][bar][bar][bar]
<ul></ul>   	 [u-1-7]		[elbow][bar][bar][bar][bar]
[space][button][button]		        [button]
[button][button][button]		[button]
[button][button][button]		[button]
[space][space] [button]		        [button]
[space][space] [u-1-2 ]		        [u-1-5]

Add link to repo from demo

Google took me to http://joernweissenborn.github.io/lcars/, but it doesn't have a link to https://github.com/joernweissenborn/lcars

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.

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.

change color of outer frames?

nm

Colors section missing some colors, duplicates of pale-canary and lilac

Under section "Colors" of the doc/demo index.html page:

1. there are duplicate sample cells for pale-canary and lilac
2. lcars-gray and white are not given a demo cell
3. red-alert red is not displayed, nor is it defined in the lcars_colors stylus source.

Questions about rows and columns

Hello,
I'm trying to build a design like in the picture.

How do I have to build the arrangement so that I have more columns and rows at the top. In my experiments they are always mixed up ...

Sorry for my english, i use google translated ...
Greetings Frank

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!

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.

using lcars with bootstrap

I am building a new UI to an application and I came across your lcars CSS. My question is can I use lcars with bootstrap CSS, or is lcars complete replacement.?

Define what is 'base' LCARS CSS and what belongs in external files.

LCARS evolved a little over time. It would be nice to decide how to divide the newer styles from the original. Personally, I think this project should include anything in LCARS from TNG Enterprise D.

But, it's possible this LCARS evolution took place between Season 1 and 7, so I will go through and screenshot. Just to be sure. Also, the bridge, sickbay and engineering changed. Cargo bay also has some funky looking controls. So maybe the joernweissenborn lcars core CSS should have a scope defined?

Anyway, just a suggestion. I'll have a more full presentation to make in time that might make these decisions easier to make (or dismiss) :)

full width?

nm

Rename `master` to `main`

You all know why. All live matters, even if silicon or just photon based.

@jrwarwick you are the maintainer, the main problem will be diverting ongoing PRs. That's why I leave it to you, you have better overview,

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.

Audio feature documentation should be expanded and more detailed

Existing Audio feature should have more detailed documentation in the index/doc including an example.

Create themes

As @tenleftfingers pointed out, there should be a way to theme stuff aka provide smaller colour palettes named after a popular tv series and movies.

what needs to happen:

• color palettes be defined
• appropriate lcars-COLONAME-SHIPNAME-bg classes need to be created

Compiled CSS contains a few unnecessarily long floating point representations of irrational numbers

A few calculated margins and font sizes end up in the compiled css with many digits of precision. Certainly finer than can even be displayed. Should probably just be rounded off in the Stylus source.

elements / buttons in thin/horizontal elbow-bars

I'd love to see elements/buttons in the thin/bottom horizontal elbow-bars. While @tenleftfingers seems to have directly formatted this in the screenshots they #15, the fork of @xenziffen seems to support this, natively (cf. screenshot in their post in #38 and their fork).

Right now, including elements makes them stand out to top or bottom, which is not always desirable.

lcars-title class should have character glyphs same height as parent bar element, visually

Currently, the lcars-title class (that is seen in the solid horizontal bar with embedded text) shows the text's character glyphs with a little bit of empty space above and below the top and bottom of the bar's height. Instead, the text should visually have characters exactly the same height as the parent bar element.

My first pass at this is to add these two rules to the lcars-title class:

line-height: 1.64rem;
font-size: 2.05rem;

But I fear there may be some more subtlety and complication to this. At least as far as being font-dependent. This may be an issue where some stylus mixins/functions/etc and good documentation along with decent defaults will be particularly valuable.

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?

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!

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?

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.

Audio module bugs

Console shows nominal error almost everytime page loads due to the "booted-up"/"ready" audio signal which wants to play before user has interacted with page, which is disallowed by browsers. Need to make a check and avoid triggering error.

Also ready signal is missing from doc and module audio element registration.

Sounds are a bit too loud, while we're fiddling about with this.

Applied example

I got distracted by another project called php-desktop that I hope to wrap all this in (if I ever finish), but here's an actual application that I use (and need) which uses this CSS LCARS library.

First, here is the splash screen. It just remains until most of the screen elements have loaded.

And here is the VIDEO section. It's purpose is to upload videos from the command line and show the results, but for now the example showing ping and other commands running in real-time is most of the job done.

The ARCHIVE section checks that the mp3 and image for the podcast episode are present. It downloads our shownotes from Google Sheets too. These three elements form one huge command to upload them to where each show is archived. After a nice animation plays out, the EXECUTE button appears :) Pressing this uploads the episode, which will be formatted nicely for anyone visiting with their browser.

Here's a close up of the buttons, which are functional.

Pressing a button causes the text to briefly highlight. This can be done via touch screen, mouse or keyboard shortcut.

Some of the display area is used for diagnostic purposes. The button here shows whatever key is being press.

The button beneath it shows "true" if CTRL key is being pressed, otherwise, false. This means you can use keyboard shortcuts now if you don't have a touchscreen.

One section ("TEST") I use to show a screenshot of how this display looks in TNG. The colors in this CSS theme are very accurate and elements are easy to lay out if you know a bit about HTML and CSS (it took me a little longer and my code is not well organised).

Another section is a reference with joernweissenborn's LCARS demo. This provides quick access to the class names and what to expect from them.

In this shot, the 1600+ is the screen resolution, which tells me which media rules were chosen. The number counting up is the seconds since the last text animation which is useful for checking if animations

happen when they should.

It's early days, but sincere thanks to joernweissenborn for helping me make my ugly uploader look cool. I used to not like using it but now I love it :) I hope to make a lot of additions and improvements over time. I just need to think about what to do with the buttons on the left, since my CSS rules hide them on smaller screen resolutions.

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

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

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.

Create release

It would be nice if user could just download a zip with css instead of cloning the entire repo.

Make more complex example

The current demo only shows how to use the convenience lcars-app-container, which is a rather conservative form for app. Most users wish to create more fancy UIs for which the lcars-app-container is unsuited.

Inspired by #13, thanks to @tenleftfingers

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.

Example Horizontal Bars are using old attributes. Not rendering.

In the "Elbows" section, the example attempts to show horizontal bars. It is using invalid classes so the bars and end caps are not rendered.

brackets to support text content

I'd love to see brackets of all kinds support text content like elements do. While left and right brackets obviously can only support one or two letters (probably numbers?), the top and button brackets can support text according to their width. The content of hollow brackets should appear white, by default, to be readable on black backgrounds, obviously. :-)

Link to demo is broken

"Here is a demo showing how to use all these things together."
The demo-link points to an invalid URL.

Support for Special Elements with complex geometry

Some elements with complex geometry will be difficult to achieve with "pure" CSS, yet are really iconic in the LCARS/okudagram style. For instance, the classic circular X/Y control found on many consoles including the helm.
I have found that although less well widely known, the SVG support in browsers is really pretty good these days. This may be a nice way to meet this need, and it can be done in a very modular/optional way.

Gulpfile configured for older version

The current gulpfile.js file is written for Gulp v3 while Gulp v4 is available. The package manager reminds me there is an update, and in my environment I end up switching between gulp3 and gulp4.

Moving to the new version of Gulp requires designating the default tasks with serial or parallel for calling the list of tasks. And providing a callback parameter done that can be called at the end of each task.

I'll create a branch with those changes so we can discuss updating.

Need good default styling for html tables

Need simple sane defaults so tables look a little more LCARS-ish.

Create LCARS CSS from Star Trek Nemesis [In progress] [Replica]

Some screens were clearly shown in Nemesis. I'm working on creating them, although my CSS might need supervision :)

I've already linked preliminary HTML/CSS in issue #18, but here is a screenshot of progress. Any help appreciated.

Note: As much as possible, the appearance should be identical to the original and not just a tribute which is 'similar' (but please ignore inconsistencies for now, it's experimental). Animations may be implemented once the layout is exact. I have a smaller screen myself (1600x) which makes this a little challenging.

Documentation - Areas for improvement

Just finished building a simple site with LCARS Framework, and it came out pretty alright, but I had some problems/questions that probably could've been dealt with via better documentation:

Layout - Visual Examples of Various Alignments
Some row/column alignments are easy to understand, others aren't (left-menu, right-menu), which makes it harder to figure out if appropriate solutions already exist in code.

Centering Content in Demo Page Menu
When using the sideways U menu shape, like on the demo page, content in the main viewport horizontally centers based on the total browser viewport. Not sure what the solution to this is, since it's never addressed anywhere. (Using rows with Fill class?)

lcars-u-#.5 Behavior
I wound up using widths like 7.5 and observed some odd scaling behaviors, so it'd nice to have some info on what is expected and isn't. It seems like it expands the width of the column in a way that causes margins to shrink? May also break width on

More Code Samples Needed
One of the big strengths of Bootstrap as a framework is the fact that there's actual code samples for the things its showing off, which makes it easier to learn the framework. Also helps troubleshooting by providing reference code and intended behavior in an easy to find package.

Placeholder audio filename input_neg_ack is incorrect

lcars/lcars/js/lcars_audio.js

Line 36 in bf41d19

audNak = new Audio("audio/input_neg_ack." + audioType);

audio/input_neg_ack should be audio/input_nak

Automatic audio wireup selector makes omissions, demo/doc page example missing button class

The automatic wire-up javascript is missing some lcars-elements. selector expressions need expansion.
This might be something to revisit more. Should the expression be really general? or should it be anchored to a few key container element types? Or something in between?

Also note: the example "SP FN" button is missing the button CSS class assignment.

Typeface/font that is more LCARSish

While the current text font is sans serif and pretty clean, I think it is not narrow enough, and some of more recognizable glyphs (like S and C and R and 9) just don't quite feel LCARSish. I recommend a search on the Open font library first. There are also a few nice commercial fonts that are specifically emulating LCARS, but I imagine we would not be allowed to redistribute.
Also recommend a few fall back options when/if the a CDN source is selected, and maybe a note on how to switch from local to CDN and back.

Hyperlink Anchor tags need styling

Hyperlinks should have new default styling. Recommend including the pseudo classes

• :active
• :link
• :visited
• :active

Input

Hello,

Has anyone thought about how to use "inputs" in Lcar style?

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

Elbow component needs margins to match other elements

I've come across this issue while using lcars-columns to lay out components. (lcars-column makes the ideal layout tool for responsive design since columns can be turned off. So when I create lcars-rows, I create them within an lcars-column).

Also, there is naturally a gap between the object in the adjacent/next column, which doesn't suit this element. Here's what I've done (I'm sure there is a better solution, but I wanted to try):

<div class="lcars-elbow-top-col-container">
			<div class="lcars-elbow left-top  lcars-dodger-blue-alt-bg" ></div>
</div>
<div class="lcars-elbow-bottom-col-container">
			<div class="lcars-elbow left-bottom  lcars-dodger-blue-alt-bg" style="margin-bottom:0px" ></div>
			<div style="height:.25rem;background-color:#36f;width:7.5rem;" ></div>
</div>

CSS
.lcars-elbow-top-col-container{ margin-bottom:.25rem;} .lcars-elbow-bottom-col-container{ margin-top:.25rem;margin-bottom:0px;}

I also made 2x lcars-elbow-extend element (top and bottom). Seen in Nemesis but also TNG Season 1.

The elements which extend these I have seen in Nemesis and I created as lcars-elbow-align (align because it doesn't extend, there is a gap).

I'll attach my HTML + CSS.
lcars-dev.zip

At the moment I'm going through all TNG TV epiodes and Movies and making screenshots for reference so at least we have info on which elements were original and which came later. It might help identify new components or decide which elements should be defered only for specific style-sheets. Just an idea.

Clipping on header too low

In the simple side-bracket case, as demonstrated in the index.html sample/doc, the entire height of the header is a "clipping" zone for the main content:

If we want content to be able to scroll up past the bottom of the curve, but still also get clipped out above the bracket, more markup will be needed.

This can be achieved with one additional div in the header plus two or three style rules:

Diff summary:

diff --git a/lcars/css/lcars.css b/lcars/css/lcars.css
index 991b6e9..0ca6f24 100644
--- a/lcars/css/lcars.css
+++ b/lcars/css/lcars.css
@@ -339,7 +339,7 @@ h6 {
 }
 .lcars-app-container #header {
   position: fixed;
-  background-color: #000;
+  background-color: #0000; /* Transparency for more usable main content */
   width: calc(100% - 1rem);
   top: 0;
   left: 0.5rem;
@@ -347,6 +347,13 @@ h6 {
   margin-bottom: 0.25rem;
   z-index: 1;
 }
+.lcars-app-container #blackdrop {
+  position:absolute;
+  clear:both;
+  left:0;top:0;
+  height:2.5rem; width:100%;
+  background-color:#000;
+}
 .lcars-app-container #footer {
   position: fixed;
   background-color: #000;
diff --git a/lcars/index.html b/lcars/index.html
index a5617b3..d8ead7f 100644
--- a/lcars/index.html
+++ b/lcars/index.html
@@ -24,6 +24,8 @@
                <!-- HEADER ==================================================== -->

                <div id="header" class="lcars-row header">
+                       <!-- BLACKDROP -->
+                       <div id="blackdrop"></div>

                        <!-- ELBOW -->

Branch with this in place: https://github.com/jrwarwick/lcars/tree/expand-content-space

What do you fellows think?
Also, once again, I did this directly in CSS, I am not quite sure how to translate this into proper stylus notation.

Simplify Audio section documentation

Audio doc section contains unnecessary and kind of confusing information and "theory". KISS principle. /Maybe/ stow that other stuff off into a supplemental design/concept page, but definitely it has to be removed from the main page.