search

alxpez / vuegg

dnd visual editor - mockups and code in one go!
https://vuegg.github.io
MIT License
2.34k stars 393 forks source link

[Feat] Implement grid system for positioning/sizing components #3

Open coderofsalvation opened 6 years ago

coderofsalvation commented 6 years ago

Hi Alex,

First of all: i like what you did with vuegg. I was thinking about the responsiveness buttons in the bottomright corner. Google sites has some kind of grid-system going on. Have you thought about css3 grids?

alxpez commented 6 years ago

Thanks Leon!

Grid and media queries are the next thing I want to implement in vuegg... as soon as I get some spare time (any help is welcome as well).

I have in mind to include grid behaviour as an extra feature, having the option to choose how you want to place/size your elements, although very likely grid may become the standard once in place.

Also I would like to include some functionality for displaying (or not) elements, based on the viewport (hence the media queries).

Off the top of my head, I foresee some refactoring around the editor and preview sections, these will probably need to be wrapped a iframe in order to apply a specific viewport to trigger media queries.

Thanks for pointing this out, Leon. I gave some thought to this feature, but I haven't dived deep into it yet, so my assumptions may be wrong (or even better, there may be a more elegant ways to achieve it). Either way this may open a good opportunity for discussion.

Let me know your thoughts

coderofsalvation commented 6 years ago

Thanks Alex for your thoughts. I would be very happy to think along with you concerning grid. Honestly, I've only played with cssgrids a bit, so my knowledge is basic. However, i feel that it completely disrupts the way responsive webdevelopment was before.

I could imagine displaying the same mobile/tablet/desktop-previewbuttons in editor-mode, that would basically represent the media-queries. The iframe seems like a perfect way to simulate a browser. Most times i tried to fake browser behaviour in a div, resulted in many workarounds (parsing Githubissues.

  • Githubissues is a development platform for aggregating issues.