Layout exemplar documentation

[jonathanolson]

Noted in #1418:

I would love a section that shows an exemplar sim with real-world layout issues, and arrows/schematics/overlays that show which layouts are appropriate where.

It would be great to take some cases from a dynamic-layout sim, screenshot them + markup showing code snippets or what layout was used where.

[jonathanolson]

We should create a page for this, and DIRECTLY embed iframes with sandboxes that illustrate different concepts.

We should also take the demos from the sun demo and put them instead in this exemplar documentation.

I'll set up a documentation (html) page that we can use for this. Presumably in scenery-phet.

[jonathanolson]

This exemplar documentation could also document other things, like how to use common components.

[jonathanolson]

I'm running up against Chrome failing for trying to concurrently request too many resources (once I've upped the number of iframes):

Online, Firefox is suggested, or batching / lazy loading the iframes.

Alternatively, I think I'm going to take a stab at figuring out if we can build a package of scenery/scenery-phet/sun that has the required general components (scenery-phet is somewhat helpful for PhetFont).

Then we'd be able to use the approach used for the scenery documentation, and it would load faster.

[jonathanolson]

Additionally, packaging all of those together would be presumably useful for developers outside of PhET.

[jonathanolson]

https://phetsims.github.io/phet-lib/doc/layout-exemplars.html is up and running!

[marlitas]

We have converted all the sun demos over to the exemplar documentation. Next steps:

• Removing layout demo from Sun
• Finding more best practice exemplars from PhET sims
• Adding intro examples (using HBox, VBox, how padding is used, etc.)

[jonathanolson]

Reviewed with @marlitas, and it looks like the normal layout documentation (with adjusted layoutOptions) covers all of the basic examples. The "Removing layout demo from Sun" is done, and it sounds like it will be best to add case-by-case examples to here in the future. Closing!