Make more complex example about lcars HOT 9 OPEN

Thanks for the love, I am on it.

What I want to know: what should a basic example should include?

It is clear that elbow and the grid has to be explained.

But there are always so many details to be solved and thought of.

I would really love get input from you guys out there.

Live long and prosper!

from lcars.

from lcars.

Two illustrations I'd like to see. Maybe seperate or maybe they can be done in one demo. Lots of comments in the code would help.

1. My main question is about how to lay things out (the grid, as you say). Avoiding the included header, footer (and maybe container classes) would be helpful in this instance, to see how the components behave in more varied scenarios. Any fundamental rules of layout that are worth mentioning would be helpful, for example; it seems that the top level (inside ) should be lcars-row and lcars-column elements, which will contain the components. The elbow could be an advanced illustration in this demonstration.

2. A demo of all the other / more exotic components compenents in action; I see lcars-element-addition and lcars-element-decorator but I can't figure out how to make them work.

Keep up the good work. I'm finding lots of fundamental flaws in my code and reworking it. Eventually I'll be in a position to make some nice applications with this libarary. I'm commited.

Qapla' ! :)

from lcars.

Everyone has made good suggestions here, and #13 and #19 inform the discussion further, I think. I propose:

First defining the standard basic/typical layouts, and then creating a templateX.html file for each. These should be clean and well commented inside to illustrate the way rows and columns work, and how to nest correctly, which CSS classes are too-specific to use in all situations, etc. The highlights of these source comments might be summarized and placed in the content of the project's main index.html/documentation page.

Lastly, build off of the work done in the standard templates to create the more complex example. Again, a little source embedded comments to show where you had to add some styling or where special considerations for order of nesting and so on.

For the initial basic standard template set, I refer to "The LCARS Frame" section of The LCARS Manifesto . I illustrate, and (add a fifth type) here:

 _   _________________   _
(_| |_________________| |_)

     Type 1 Template


 _   _________________   _
(_| |_________________| |_)



  _____________________   _
 /    _________________| |_)
/    /
|   |
|   |  Type 2 Template
|   |
|   |
|   |
 \   \_________________   _
  \____________________| |_)
  

  
 ___ 
|   |        Type 3 Template
\   \_______________________
 \__________________________|
  __________________________
 /    ______________________|
/    /
|   |
|   |  
|   |
|___|



 _____      _______________
|     \    /               |
|____  \  / _______________|
     \ | | /
     | | | | Type 4 Template
     | | | |  
     | | | |
     | | | |
     | | | |
 ____/ | |  \______________
|______/  \________________|
  


           _________________
          /                 |
         /   _______________|
         |  /
         | |  Type 5 Template 
         | |  
         | |
         | |
         | |
 _______/  |
|_________/ 

from lcars.

I have done some quick templates for types 1 and 2.
templates.zip
For the others, I think the file lcars.css would need to be modified.

from lcars.

Done template type 3

from lcars.

@physnoct I took a quick look at type1 and it looks really good to me. Very clean on the inside, scroll and resize behavior is what I would expect. Really nice. Tested on chrome on Windows.

I wonder what you and what @joernweissenborn think about possibly including so called "responsive" css class changes for the grid size. What I mean is: when screen is pretty big, maybe lcars-u-5 should be replaced with lcars-u-8 (automagically with javascript).

Perhaps, @physnoct, you would like to fork the repository and put your templates thus far into a Pull Request? I'd like to see type 3 as well.

from lcars.

Here is the type 3 template
type3.html.gz

from lcars.

@physnoct I just tried type 3 and it looks really nice overall, but I found that content I was putting into the main container is up underneath the header area. Maybe there is a class missing ? Or some kind of spacer needed?

from lcars.