Proposed general layout rules for examples.

[James-Green]

In evaluating the various layouts for examples, I am seeing a few things being tried:

• In Designing, I see some examples going full width, some a percentage, and others fixed right now...
• In Writing, they are mostly pairs and trios that go 100% until they have to stack.
• In Developing they are mostly 100% except for the label example (stays 556px until squished) and the sneaker that stops growing to 100% after it's about 1000px wide.

I suggest that we categorize examples into sizes and keep them all consistent. These suggestions are already more or less used in there in places, I just want to call them out as global rules and modify any examples not following the rules...
For example

• "small" examples would always be 350px wide until stacking is forced or if possible given the content, until squished - following breakpoint rules as currently implemented.
• "medium" examples would be 550px wide following same rules
• as of now, I believe there is only one example that would at a minimum be large at 750px until wrapped or squished- that's the responsive design one.

[iadawn]

Just to note, the styling rules at present include a single column layout and a two column layout. The two columns are specified in percent rather than px because the container page does not have any min or max widths.

There are some instances (e.g. identify interactive elements), where the percentages of the two columns are messed with a little bit to give a bit of a better balance. There are also some instances (e.g. identify feedback) where the width of a single column does not extend to the full page as it would introduce a lot of empty space on the right.

I will review all this again, but just wanted to note the current state.

[James-Green]

Don't spend too much time on it. I think the enhanced consistency would be nice but I think I was responding to a survey question asking about ideas for improving example layout - I probably wouldn't have come up with this issue without prompting.

[iadawn]

There are XX example layouts:

• Two column: each column is 49% wide with a 1em gap between them. In small viewports they stack vertically rather than horizontally and are full width.
• Coding example: a rendered column (40% width) and code column (60% width) with no gap between them. In small viewports they stack veritcally and are full width.
• Narrow single column: width is set at 35em. In small viewports it changes to full width.
• Full width single column: width is always full width

Exceptions:

• Interactive elements: This is two column, but the widths are not even. There is more content in the left hand column and three stacked panels in the right. Making this two columns of equal size would make it look a bit peculiar. Have changed this to ensure that overall it is 35em wide to match similar non-full width examples.