A developer walks through CSS scripts that visualize drag and drop zones on CMS Hub pages. Use them to troubleshoot layouts, document structure, or design new pages without guessing where content actually lands.
Foreign. Hey there, developers and designers. I created a couple of scripts for you. They're both CSS based, and the first one is used to view the D and D structure of an existing page on your CMS Hub site. There are multiple ways that you could use this. I explain a few in the code up here, but I'm going to show you the fastest, easiest way to do it, which is this first one right here. So what you do is you first select all of the code and you copy it, and then you go into your CMS page and you inspect. And then what you quickly go and do is there's a little plus icon. This is used to add a new style. We're not actually going to use it for that function, at least not the way they intended. We're actually going to click Inspector stylesheet. All right, now that we've clicked that, we're actually going to paste what we just copied. And now you'll notice that the page is already styled up. What this is showing you is the D and D area layout for the entire page. So every D and D area gets highlighted like this. And so, as you can see, we have a section, we have column, we have row, and then we have our header module, and then another row, et cetera. And as you'll notice, for every single one of the items that shows up over here on this bar, these are all of our module and theme field types. For every single one, we put all of its containing elements, so every part of it into one section. So what this allows us to do is anytime we need to add a new modular theme field to this documentation, we can easily rearrange any of these sections all at once. We don't have to individually drag modules around, we don't have to recreate the sections, none of that. We, we can literally just drag and drop them as well as we can also just clone the section to get a new one that we can just fill in with the new content. So anyways, this code can be useful for troubleshooting your D and D areas to make sure that it does what you expect it to do. The other thing that it could be useful for is say someone is inheriting the website and you want to give them a quick rundown of how things are actually built out. That can be useful for that as well. So next, I want to quick show you a codepen I made, and you are welcome to use this as well. So this codepen, what it does is it shows you kind of a visualization of how drag and drop Areas work. So we have the section element, as you can see up here, and then we have a module and we have a bunch of different variations of things that you can actually do layout wise with each of the D and D elements. All that this is, though under the hood is just some HTML and css, but the, the part that you'll actually play with is just this HTML. So when you want to create your D and D area, you just use this DND area class and then you would place inside of it a DND section, because the immediate descendant of a D and D area must always be a D and D section. There are some other things that can be useful to pull from this. So if you didn't know, for example, something that people commonly mistake is say you put a D and D module immediately after a D and D module, what's going to happen? Is it going to show up like rows? No, it's actually going to show up as columns. Think of D and D modules as columns. So an example of this is right here. So if we look at the second example, we have a D and D module and then we have another D and D module. They are not separated by columns, but the D and D module itself is treated like a column. So when you add another D and D module, and actually let me just show you, if we were to add a third here, because why not? Let's save. All right, so as you can see, it would just place that third module there. So I went ahead and also created scenarios where things are not possible and made it so that if you try to do something in this HTML that wouldn't be possible in drag and drop areas, say putting a drag and drop area inside of a drag and drop area, it will highlight that in red. Another one is say you wanted to place a row as a direct descendant of your DND area. Not possible. Has to be a section. D and D section has to come immediately after D and D area. You can have multiple sections, but it must be a section as the direct descendant. And then a direct descendant of a section must always be a column or a module, because a D and D section is effectively a row. Uh, yeah. And you can place rows inside of columns and you can place columns inside of rows. So anyways, I hope that you find this useful. This could be great for if you want to create blog posts, you can use it to create these charts. You can also potentially use it for videos or use it for training somebody. So you could use it for client documentation to just explain. Okay, I intend for these modules to be used in layouts like this. It can also be helpful if you're just trying to scaffold out what your page should look like, structure wise. You can use it for that as well. Feel free to fork this code then. I hope these scripts are helpful. Share them with your designer and developer friends. Thank you for watching.
