Fork me on GitHub

hello friends, I am not sure if it’s the right channel but anyway > do you have any idea how can I simulate different device viewport with fulcro (local css) & devcard


If someone does that I would be glad to read from you 🙂

Drew Verlee12:06:56

Has anyone written about using Fulcro with Datomic Ions? I feel like there should be nothing special in composing them (which is awesome) but having not gone to production with either, its only theoretical guess.

Daniel Hines02:06:28

You're right, it seems wonderfully straightforward in concept; but I'm curious as to others thoughts as well.

Chris Swanson13:06:18

@baptiste-from-paris I don't know of a way built-in to Fulcro, but I'm just learning so maybe there's a way. Is chrome's "device mode" not adequate? That's what I'm using to test responsive layouts in my Fulcro app


I was more thinking of a devcard SPA where you can simulate device width all at once but with your computer screen (while working) without reseting everything

Chris Swanson14:06:27

oh i see, that would be nice. seems like it would be hard to make sure it was "simulating" correctly without having the browser involved somehow

Chris Swanson14:06:20

fwiw, using device mode i am able to change the simulated viewport size without resetting my app


yes i know, but I had in mind a view with all the viewport size for a given UX component


I have to work on this


it should be faisable


@baptiste-from-paris I use an iframe (React lets you render into one without loading the js into the iframe itself)


The elements namespace in fulcro has it coded up


let me see if I can point you to an example


This is a macro I wrote for wrapping bootstrap examples in the book:


then, if you use defcard-fulcro instead of defcard you can embed an entire app


I use it all the time, actually. Works really well, except for a somewhat limited use-case: If you use an external js lib that tries to use the js/document (for things like events to close full-screen modals) then things don’t always work right…but for pure Fulcro stuff it works very well.


The iframe thing is just a rendering artifact for the most part, so other than the event thing it is just a rendering container that obeys the size you give it, isolates CSS, and can have more than one on a page.


Here’s an example use of that macro from the fulcro bootstrap docs:


If you were to drop that component in a defcard-fulcro, it would behave as a free-standing, CSS separated, fully-functional app.


@tony.kay thanks a lot for your time and this great response


I thought about iframe but did not want to go that way ^^


I am going to rgtry