How to change the header and footer? about lcars HOT 10 OPEN

Thank you alot! I did m job well apparently ;)

The buttons and things are actually really easy shapes. But IMHO the core experience of LCARS is exactly the alignment. So you can do that with plain CSS as well, but this library is mainly intended to handle the edge cases and give you designs out of box.

You should look at this btw if you haven't: http://www.lcars-terminal.de/tutorial/guideline.htm

The basic math of the look and feel I found in an article, which unfortunately have been taken down, probably by JJ Abrams....

from lcars.

Great link, thank you. I will read it all in detail. Pity about the other article :/ Glad you like the gif! I'm also staring at it, imagining all kinds of things that can be build with your libarary; RSS reader, e-mail client, wikipedia browser, google-translate interface, a music player ... :)

I'm attaching my code. It's messy because I don't know what I'm doing so lots of inline styling. The fundamental rule of consistent alignment, as you say, has been broken here. I've coded this for a 1600px wide window, although 1280px should adapt well, with some parts left out.

The archive contains your library, but only these files are unique:
./lcars/css/lcars.css (I made changes here - not a good idea, but I wasn't expecting to get results)
./lcars/css/test-animations.css (animations for the lists - all hard coded unfortunately)
./media_queries.css (I'm in the process of migrating some
LCARS-Iarla.zip
inline styling to here)
./scrúdú-lcars.php (the main file)

from lcars.

Hi, I see what you want to achieve.

The header and footer are actually just convenience classes for 'simple' UIs.

For your more complex case, I would rather directly start at the body and structure your interface with lcars-row and lcars-column. You can put the elbow anywhere, also outside footer. there is also no need to manually mirror it, since ou can just write lcars-elbow left-bottom.

I will make a more complete example later, but play with the pure lcars grid and the elbow class and its modifier.

I recommend browsing the stylus sources for the options you have for each class, e.g. for the elbow.

Hope this helps!

from lcars.

That is a big help, thank you. Once you explained the header and footer, I was able to arrange things differently. I'm a novice (don't understand the different displays/layouts of CSS), so my code is a bit crazy. I'm looking forward to seeing your more complex example to learn proper practise :)

It's incredible the way things align so well. Just like the real thing. You've made it easy to use. Well done!

from lcars.

By the why, your work looks beautiful, love staring at the gif :)

from lcars.

can you share the code of your example? I this I basically what I had in mind as example.

from lcars.

Thanks for breaking it down, @joernweissenborn!

@tenleftfingers Dang, I was hoping for a purely html* solution.

from lcars.

vGoldsmith, the PHP can be removed and change the file extension to html. Without the PHP, the two strings (small blue paragraph text up top) will need to be pasted in the Javascript section above for "txt1 =" and "txt2 ="

I'm happy to do it for you, but since my file looks really terrible on anything that isn't 1280 or 1600 wide, it might not be much use to you anyway.

from lcars.

from lcars.

I think I understand the layout a little better after reviewing tenleftfingers's project. @joernweissenborn thanks! This will be enough for me I believe but for the future I support #14 100%

from lcars.