Component Width Resizer Widget

kss-node / kss-node

The Node.js implementation of KSS: a methodology for documenting CSS and generating style guides

http://kss-node.github.io/kss-node/

Other

1.51k stars 280 forks source link

Component Width Resizer Widget #504

Open RobLoach opened 6 years ago

RobLoach commented 6 years ago

allow resizing the widget on screen so that you don't have to resize the window. screenshot at 2018-08-27 15-24-11

ryuran commented 6 years ago

@RobLoach by “widget” you mean demo rendering area (content on “Example” block on your screenshot) ?

RobLoach commented 6 years ago

Yes, that :wink:

ryuran commented 6 years ago

I’m ok with that.

Some other things can be improve for demo area, it could be:

resizable
isolated from KSS css and js
responding to mediaquery

I have only one solution to that: iframe

This script seems to do the job : https://github.com/edenspiekermann/iframify But too many iframes in a page is greedy in performance.

kyleoliveiro commented 6 years ago

You could use a custom element with Shadow DOM, as an alternative to iframes.

charlieartist commented 5 years ago

Please correct me if this is totally off-base, but are you looking for functionality similar to what Shopify Polaris uses in their demos?

RobLoach commented 5 years ago

That'd be cool!

charlieartist commented 5 years ago

@RobLoach Yes—it would be a very nice IXD/UX addition to the stack. Right now, I've done a fair bit of customization to a KSS-Node install, but mostly through CSS with some minor Twig.

Elements such as this add real polish to a guide, besides being an interactive demo. And, it's another affordance to invite visitors to test responsiveness.