Docs: Guide to Creating Responsive Builder's

[Oudwins]

Hey! Took me a little longer than I wanted but I have written the first part of the guide that we talked about. I plan on getting to the second part sometime this week and will update PR when its done. For now, since the first part is done (and its somewhat stand alone) I thought I would open this in case there are any changes that need to be made.

The goals for this PR are:

1. To answer one of the most common questions around craftjs "How do I make a responsive builder?" in a way that not only gives the answer but also explains a little of why things work the way they do (First part of the guide, rough draft done)
2. To provide a few examples, ideas & options for handling styles when creating a responsive builder (second part of the guide, still TODO)

Why make the PR if its still not complete? First part is ready for feedback & I wanted to get this out as soon as possible since its a question that has come up a lot, until this is merge we can probably point people to this PR instead of answering the question again.

What is still TODO?

• Write up for the second part of the guide on different approaches for handling responsive styles
• Some clean up on the nextjs example site (I deleted a lot of stuff but there is probably stuff that still needs to be deleted)
• Update the example/responsive/readme.md (just saw its still the copied text)

[changeset-bot]

⚠️ No Changeset found

Latest commit: 3c0319d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
craftjs	✅ Ready (Inspect)	Visit Preview	💬 1 unresolved	Mar 24, 2024 7:59pm

[prevwong]

Wow this is a nice addition, thanks a lot! ❤️

Could you run yarn lint --fix on your branch, would like to check out the deployment preview!

[Oudwins]

Omg yes. I was wondering why the deployment didn't work. I got a little busy but I'll fix this today and get to the second part of the guide sometime this week!

[Oudwins]

Alright @prevwong, done. Also I added a few more improvements to the text. Let me know if there is anything you think I should add/rewrite to improve the guide. Otherwise I am still missing the part on styles but that should be it.

TODO:

• Write part 2 of the guide to different approaches to handle responsive styles

[Oudwins]

Oh, I am not sure if the example should also be added here

[prevwong]

Just had a chance to briefly checkout the guide. Here're my thoughts:-

1. The guide should be as framework agnostic as possible since all the previous guides are as well. So info relating to resolving SSR issues with Next.js should be omitted or at most just leave a small comment inside a blockquote with an external link for more info
2. The part about cloning stylesheets from the iframe gets really confusing and I am not sure if anyone would be able to easily understand it.

---

Okay, so when it comes to implementing responsive designs with Craft, the idea is to just use an iframe to wrap the editor contents. This poses some issues as mentioned in the guide, the biggest one being CSS. This is a really complex issue as it largely depends on how the developer implements styling in their editor.

If they're using a CSS-in-JS solution like styled-components, where all User Components are styled with styled-components, in which case - the stylesheet for those components are generated on runtime and is injected into the parent document rather than inside inside the iframe. The solution here is to clone the stylesheet parent element into the iframe (as mentioned in your guide as well). Personally, this was the solution I did myself in some other projects, and it's the easiest way to go about it.

If the developer is using tailwind, then they could also do the same trick as above or they could just inject Tailwind's Play CDN inside the iframe, and the CDN is responsible for catching all tailwind classes used inside the iframe and it dynamically injects tailwind classes into the iframe. This is the approach I used in https://reka.js.org

With all of that said, this is more of a general problem with CSS and iframes; rather than a Craft.js one. For example, this entire guide could be written without involving Craft at all. Perhaps, a better way to go about writing this guide is to simply discuss these approaches and maybe just share a simple React example (without Craft)

[Oudwins]

Hey!

Thanks for the feedback. I think you are totally correct. Here is what I have done:

1. For this I removed the nextjs centric perspective but left a small note about how you should ensure that the editor is a client only component if using SSR framework
2. I have removed all the code, better explained the issue and possible solutions. I would love to provide a link to the issue with the code snippet for cloning the stylesheets in next, but I can't find it :( so I just left that out.

Two things I would love your opinion on:

1. I am wondering if you think there is value in providing the full code at the end. Mostly because I always gave only snippets. But I am leaning towards no because we can always point them to look at the code in the example
2. For the second part (which I haven't had the chance to get to yet, sorry). How do you think we should approach it? I was thinking of discussing it a little bit then giving a simple example for a few of the popular CSS solutions. Specifically: plain css, tailwind, styled components. Keeping it quite high level ideally.

[ylnsnv]

Hi! First of all, props for the great addition!
Second, I think you might have here a mistake ... you should be able you should see...

[ylnsnv]

I hope I'm not disturbing with this comment, I just read your stuff and found out this tiny bungling :)

[Oudwins]

You are totally right. My bad. Will fix this & push the 2nd part of the guide once I have finished my exams in 2 weeks. Thanks for catching it!

[nikitakofman]

The way I did the responsive, is making the Root node (the "page") a simulation of a "real" page, and all its children the contents of the page. I made a context provider that calculates the width of the Root node (viewportWidth) , so when i "resize" through the mobile , dekstop, tablet icons its squeezing the root node and all their children are squeezed consequently. Then when I make layouts or sections, I use the viewportWidth to simulate the responsive (if viewportWidth < 400px, flexDirection = "Column" etc...)

This works in editor while making changes and also when I load in the iframe, the same logic is applying.