Small-screen examples at all screen sizes

[niqjohnson]

In finalizing the tables page, I've hit a problem of how to show small-screen examples even at large screen sizes (see the "Small screen variations" section of http://niqjohnson.github.io/design-manual/ui-toolkit/tables-draft.html for an example).

Basically, I want to show what a table will look like on a phone-sized screen even if you're looking at the design manual page on your desktop. I can think of four ways to do this, but I'm not sure which is best for both my specific case and the design manual as a whole:

• Don't do anything special. If you want to see what the element looks like on a small screen, shrink your window!
• Use an image that shows the element on a small screen. That seems to be working on other pages, but it's not very effective for showing something interactive like a scrolling table. Also, we'd need new images as we update the elements.
• Duplicate the small-screen CSS into a .force-small-screen variant. That's what I did in the example above, but it's a lot of duplicate styles.
• Show the example in an iframesized to the width of a small screen. No duplication of CSS needed here, but we'd need to create separate pages for each small-screen example, right? Also I only kind of understand the intricacies of iframe, so I'm not even 100% sure this one makes sense.

Thoughts?

[Scotchester]

That's a great question, @niqjohnson!

I think I'd be interested in seeing if you could get an iframe to work. Media queries are supposed to work within iframes, so I think it's just a question of whether or not Jekyll would barf on the iframe.

I think I'd suggest creating a new folder within /ui-toolkit for responsive examples and putting your example HTML in there.

Check it out and let us know how it goes!

[caheberer]

@Scotchester could you move this to the cf backlog? To be considered when adding the component to the Manual.

[jimmynotjim]

@caheberer there's no component to add here, cf-tables already exists. I think @Scotchester was recommending a responsive specific examples page within the Design Manual.

[caheberer]

Right @jimmynotjim, I should have said "a component" instead of "the component". It sounds like there needs to be a way to add small screen examples on a large screen page.

Which is why I thought your backlog might be a better place as a reminder for devs that need to replace any interim image placed by designers on the DM of future components/pages that have small screen examples...

[jimmynotjim]

Since it's specific to the DM codebase, it should stay here. I'll plan on exploring the options when I update the homepage in #275. Might have a chance today but no promises.

[niqjohnson]

I did a little work on showing the small-screen styles in an iframe when I was working on the tables page, but dropped it for images since we needed to get the page out the door.

The iframes worked pretty well in my quick tests—the biggest hassle was organizing all the individual pages for each small-screen style you wanted to iframe. If we still want to go that route, let me know if there's anything I can help with.