Need layout manager for web widgets.

[mercere99]

Options include:

• Building one from scratch, presumably where we have panels that auto-resize related to each other and manage the size of internal Widgets
• Integrate a JS layout manager package that is automatically included in any web application developed with Empirical, similar to JQuery.
• Use an external, optional, layout manager that doesn't get included if you don't use it, similar to D3.

[emilydolson]

I think I'm in favor of option 2. This is the most fiddly and obnoxious part of web development, and if we can just leverage work done by someone who already knows what they're doing rather than re-inventing the wheel that sounds like a good plan. It's also something that people would probably always want when they're laying out widgets on a webpage.

[mercere99]

I think that's the one I'm now leaning toward. Option 1 would, of course, be my choice if we had unlimited time, which we don't. Option 3 has some advantages in terms of minimizing dependencies, but option 2 allows us to count on the framework being there and thus simplify a lot more of the code.

So, the next question is, which layout manage should we use?

[amlalejini]

I generally advocate for Bootstrap. I've heard good things about bourbon.io's layout manager, Neat. I am aware of Foundation being popular; though, I've never actually looked much into it.

[mmore500]

We might use brace-initialized syntax to construct a layout object and throw this all inside of a "main" div:

title /* jumbotron, should accept raw html */,
subtitle /*jumbotron,  should accept raw html */,
{ /* rows */
  { /* columns */
    // for each col, need to know bootstrap width styling and whether column should [be sticky](https://alligator.io/css/position-sticky/)
    // we will want to include info on how bootstrap width styling works inside of our docs
     { /* cards  */
        // for each card, need to know title (optional), html ID
        // whether is: open, collapsable-open, or collapsable-closed
      }, ...
   }, ...
}

then, inside of cards we will want to easily make slickly styled...

• live data nuggets (title/live data side-by-side, click on it to show a description)
• control buttons
• collapsible subsections
• bootstrap unordered lists
• insertion of html from another file (https://www.jotform.com/blog/html5-imports-import-html-files-into-html-files-83467/)
  • we could curate a library of nice templates of references, acknowledgements, social media embeds, What Am I Looking At slideshow, etc.

[mmore500]

we might also want to somehow wrap or provide a factory for buttons, etc. that are automatically bootstrap styled

we should provide a html template that has all the bootstrap includes taken care of (I think our cookiecutter template might already do this)

we should clearly document how to customize bootstrap color schemes (maybe add this to the cookiecutter)