Change layout for CSS examples about interactive-examples HOT 7 CLOSED

Notes from our in-person meeting:

We want the iframe to be inserted onto the page at different sizes depending on the available width on the page and based on the space necessary for the example. Unfortunately the iframe and the page it's on can't communicate about styling.

So we decided to use 3 different predefined widths, applied by passing a class into the macro when it is added to the page.

I would like us to add the class live to all the iframes and the modifier class live- for sizes.

<iframe class="live live-small" src="....

The classes and corresponding heights are:

I think the best way to decide how wide the space has to be before we flip to the side-by-side width is for @schalkneethling to look at the design and say what the minimum amount of necessary space is and then we can write the CSS declarations based on a combination of which columns the page has and how wide it is (this will get complicated).

from interactive-examples.

@stephaniehobson Did we want to default to small and so, we only need to set live-large when needed? or perhaps live-tall?

from interactive-examples.

Ok, so this is side by side at 210px

And this is side by side at 400px

from interactive-examples.

Another question here is whether:

1. We want to allow comment(I think they can be useful at times)
2. Limit these comments to only ever take up one line

Thoughts @stephaniehobson @wbamberg ?

from interactive-examples.

So, here is an example where there is more than 5 but, less than 10

from interactive-examples.

We want to allow comment(I think they can be useful at times)

I think they can be useful if used carefully and quite sparingly. I don't want them to be the documentation :).

Limit these comments to only ever take up one line

I think this is a good goal.

from interactive-examples.

Agreed, I added some comments to the README to reiterate this.

from interactive-examples.