[FEATURE REQUEST] Load markup examples in iFrame to make them resizable and responsive

[dlewand691]

Instead of having to resize the whole browser window, I'd like to only resize my coded example. But simply making the div resizable doesn't make it responsive.

Putting the markup.html content into an iFrame and loading that allows the example to be responsive. It does require a 2nd html file to be the iFrame source and also that your server allow iFrames to load. The system currently does not pull the right html markup so that would need adjusting as well.

I have edited one section of my work-in-progress guide to show the example:

https://www.dannylewandowski.com/_cog-DEV/public/pattern-library/#group-grid-component-overview

The other sections below have the div set to resizable which you'll see does not recognize the responsive media queries.

[davidhund]

👍 This would also provide some encapsulation and solve the issue of CSS 'collision' between Astrum- and pattern styles (see #71).

[davidhund]

No thoughts on this?
At the moment this is the single issue preventing me from using Astrum in two projects.

PS: I just came across https://github.com/edenspiekermann/iframify which could make this a lot easier.

[RyanHavoc]

We're currently working on Astrum v2.0 and we're considering the best way to approach this.

[RyanHavoc]

@davidhund Could you provide some context as to what style collisions you're experiencing?

The issue with iFrames is, as @dlewand691 points out, unless they're 100% width of the page the project media queries won't work properly.

[davidhund]

@RyanHavoc Obviously content loaded on the page will inherit the global styles. So style collisions could be everywhere: patterns could be affected by Astrum styles (allthough not very likely since you 'namespace' all Astrum styles with ndpl-), or the Astrum UI could be affected by our projects' styles.

The latter is my problem at the moment: my projects' non-specific styles are affecting the Astrum UI. For example: this happens often with 'resets' i.e. Normalize.css but also with .e.g. the 'Lobotomized Owl Selector' * + * { margin-top: 1.5rem; } (There's a gap between the pattern container and the code container).

This is to be expected because my projects' styles are not 'encapsulated'.

The other issue is that Media Query behaviour is 'non-realistic' when the content is loaded directly in the Astrum UI. Sure: they 'work' but the components do not live in their intended context so they'll break.

Using iFrames, the MQ's respond to the width of the iFrame window (not the viewport). So while the pattern windows are not 100%. of the browser window, at least the patterns will behave according to their authored Media Queries.

You can do a simple test with non-iframed patterns in Astrum and see how they'll break:

@media (min-width: 1024px) { .my-pattern { width: 1024px; } }

This will break .my-pattern because the pattern is loaded in the Astrum UI (with sidebar and padding, etc). So the space available is never 1024px.

When my-pattern was loaded in an iFrame, this breakpoint would never have been active and another (more narrow) one would have triggered, if set.

If you'll look at almost all other pattern library generators you'll see they address style encapsulation and media-queries with iFrames (untill Shadow Dom etc. are better supported 😉

[RyanHavoc]

@dlewand691 @davidhund I've been exploring lots of option to prevent style conflicts and the compromises we'd have to make by using iFrames are too great in my opinion. Instead I've been working on a scoped CSS approach that sandboxes project styles to the sample container. This has been working well in testing and I've just pushed a pre-release for Astrum 2.0.0 if you'd like to give it a try yourselves. Details here: https://github.com/NoDivide/astrum/releases/tag/2.0.0-rc.0

[dlewand691]

Awesome! Glad you've found an approach to this. Would love to try it, how do I update to a pre-release?

[RyanHavoc]

@dlewand691 You'll need to pull down the release\2.0.0 branch locally and use npm link to tell your system to use you local instance rather that your npm global instance.

[dlewand691]

Holy ****! Thanks! That worked!