[Feat] Implement grid system for positioning/sizing components

[coderofsalvation]

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]

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]

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 <script>-tags et). Here's a cssgrid image, which i still find very useful as cheatsheet: Above you can see a grid, which can be switched easily from mobile/tablet/desktop by modifying 'grid-template-columns' + 'grid-template-rows' using mediaqueries. I could imagine the user choosing 'left','centered' or 'right'-aligned layout in a dropdown, which would modify 'grid-template-areas' accordingly. Would be great if we don't have to let the user worry about class- or area-names. I guess the best way is to play a bit with it. How about starting a grid on codepen, to experiment with it with vuegg in mind.

…

On Sat, Mar 3, 2018 at 11:26 PM, Alex Perez ***@***.***> wrote: 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 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#3 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAK_ZHtah2st_k7vreVZ9QWybxQozD_Rks5taxh-gaJpZM4Sa4C1> .

-- /WEBSITE 2wa.isvery.ninja /MOBILE +31 6 13499604 /LOCATION Netherlands, Drachten. Hongarije, Budapest. /COMPANYNR. 08124656 /TAGS Rapid Prototyping of ideas/concepts using JavaScript, Node.js, OpenSource. Growth-hacking partnerships, lead scraping partnerships.

[alxpez]

I could imagine displaying the same mobile/tablet/desktop-previewbuttons in
editor-mode, that would basically represent the media-queries.

I see what you mean (and what your first request was), I didn't got you before.
I think that would be a possible solution, but a temporal one... from the UI perspective I need to find a logical place to locate that viewport-button bar (I think it would interfere with the edition, in terms of visual clarity).

However, I think the problem of detecting the breakpoints/viewports will persist... but as you say, best way to find out is experimenting. Most likely I will implement the grid/viewport functionality and the options to select mobile/table/web at the same time (I feel they need each other)

[coderofsalvation]

True that. To be honest, i'm also not sure whether css3 grids are the best fundament for user-driven drag/drop/resize-actions on elements. The biggest challenge I see is that a responsive layout consists of these strategies: - optional elements (which hide depending on the viewport) - fluid elements (which scale, like width:55%; height:10vh; max-height:200px; max-width:300px; ) - a combination of both (2 columns, where on mobile the second disappears, and triggers a width:100% on the 1st) - a combination of left,centered and right-layout, because of extra left/right space on desktop. Whenever i think about userdriven resizing of elements in combination with the above, my brain starts to hurt :) To keep it really simple, i would suggest to just first focus on a centered layout, and go from there. ``` <div class="background"></div> <!-- .background{ width:100%; height:100vh; z-index:-1; } <div class="page"></div> <!-- .page{ width:100%; height:100vh; min-width:300px; max-width:1200px; } ``` On mobile and tablet, we could just hide the background-div using mediaqueries. Each element in the editor, could have a checkbox 'hide on mobile', 'hide on tablet' and so on. Concerning the background-div..i have no idea if you would want to make that editable using dragdrop elements. Dragging an element to the bottom seems easy, but 'sticking' it there in preview/live mode is not :/ // end of braindump WDYT?

…

On Mon, Mar 5, 2018 at 6:53 AM, Alex Perez ***@***.***> wrote: I could imagine displaying the same mobile/tablet/desktop-previewbuttons in editor-mode, that would basically represent the media-queries. I see what you mean (and what your first request was), I didn't got you before. I think that would be a possible solution, but a temporal one... from the UI perspective I need to find a logical place to locate that viewport-button bar (I think it would interfere with the edition, in terms of visual clarity). However, I think the problem of detecting the breakpoints/viewports will persist... but as you say, best way to find out is experimenting. Most likely I will implement the grid/viewport functionality and the options to select mobile/table/web at the same time (I feel they need each other) — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#3 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAK_ZP5a1Y75zMkMvH7RR3VT_U3OohdPks5tbNLMgaJpZM4Sa4C1> .

-- /WEBSITE 2wa.isvery.ninja /MOBILE +31 6 13499604 /LOCATION Netherlands, Drachten. Hongarije, Budapest. /COMPANYNR. 08124656 /TAGS Rapid Prototyping of ideas/concepts using JavaScript, Node.js, OpenSource. Growth-hacking partnerships, lead scraping partnerships.

[coderofsalvation]

vue-grid-layout seems interesting too: https://jbaysolutions.github.io/vue-grid-layout/examples/01-basic.html

[alxpez]

Yes, I actually looked around different approaches when I was building the base a vuegg, this one was one of them, but I ended up choosing vue-draggable-resizable to start with. I did some bug fixes and added some new features for this library (like element recursion), but eventually my needs where pretty specific and I ended up implementing the move-resize functionality from scratch.

I'm unsure on how easily this behaviour could be integrated with the current code base, is worth looking at the complexity at task. From my point of view, I had in mind a simpler way to implement grid behaviour, by just giving control in the properties (instead of in both, properties and editor). Visually I was thinking something similar to the grid inspector on firefox.

With this approach I'm hoping to ease the complexity on the integration with current functionalities, while keeping it simple for a first attempt on the grid feature.

[coderofsalvation]

I see. I'm actually amazed about the layers of complexity of this problem, an nd i can see how much thought you've already put into it :) At first hand, it just looks like: dragging some controls in a grid -> zip output. However, when diving further into the problem, many layers of complexity arise. grid inspector-ish sounds great

…

On Thu, Mar 8, 2018 at 11:24 PM, Alex Perez ***@***.***> wrote: Yes, I actually looked around different approaches when I was building the base a vuegg, this one was one of them, but I ended up choosing vue-draggable-resizable <https://github.com/mauricius/vue-draggable-resizable> to start with. I did some bug fixes and added some new features for this library (like element recursion), but eventually my needs where pretty specific and I ended up implementing the move-resize functionality from scratch. I'm unsure on how easily this behaviour could be integrated with the current code base, is worth looking at the complexity at task. From my point of view, I had in mind a simpler way to implement grid behaviour, by just giving control in the properties (instead of in both, properties and editor). *Visually* I was thinking something similar to the grid inspector on firefox <https://hacks.mozilla.org/2017/06/new-css-grid-layout-panel-in-firefox-nightly/> . With this approach I'm hoping to ease the complexity on the integration with current functionalities, while keeping it simple for a first attempt on the grid feature. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#3 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAK_ZLhWpYK8JtwK2HLqyToQUMqapmCIks5tca-OgaJpZM4Sa4C1> .

-- /WEBSITE 2wa.isvery.ninja /MOBILE +31 6 13499604 /LOCATION Netherlands, Drachten. Hongarije, Budapest. /COMPANYNR. 08124656 /TAGS Rapid Prototyping of ideas/concepts using JavaScript, Node.js, OpenSource. Growth-hacking partnerships, lead scraping partnerships.