Hello. I bought BSS a couple of days ago and i love it and i have a suggestion already

if it's possible, please do add a right click option in the Overview to mute/bypass things right now i have to delete something to be able to see the difference and it's kinda time consuming if there's a lot of code

i've made a quick example of what it could look like (the "span" tag in this case)


enter image description here

Athough you cannot do what you're asking for, you can set something to "Display: none" in the Options pane to have something not show in the Preview pane and browser previews. This way you won't lose something if you accidentally don't show the code and then start doing other things or close the app or whatever and now it's gone and you have to do it all again if you want it to show .... etc.

I use Labels to type "Hidden" into so I can see if something is hidden or not.

+++1 To the idea of having the ability to set something to "Display: none" in the Right click menu when in the Overview pane (only really need it there, don't think it is necessary in the preview window unless you want to add it for your own reasons. This would definitely save time in not having to always go to the other pane, make that setting, go back to the Overview pane and find what you just changed etc. Just would really be a nice time saver for sure!

I would also like to see a visual marker in the Overview tree for things set with "Display: none" so we can find them easier as well. Even if you don't add the above idea for the Display None setting, I'd still love to see a visual marker or coloring for things that are set to Display None so I can free up my Label settings for other things.

P.S. We don't need all kinds of settings for this for media queries etc. This would just be a great way for us to hide things easier and faster that are just fully hidden until it's turned off. Not meant to be any replacement for CSS settings at all for media queries.

This would speed up a couple things: 1. It would help for things like what the OP was asking for, a way to just make something disappear temporarily for testing. 2. A way to make things be hidden temporarily between seasons, sales, ads, or whatever a client needs that is repeated often enough to just leave it there and not bother with library items for.

I’d still love to see a visual marker or coloring for things that are set to Display None so I can free up my Label settings for other things.

+1 to this. I sometimes set up text blocks to wrap around images and due to the way the text flows and the image resizes, I often make duplicate text blocks in different places at different screen sizes, and use the display properties to hide and show as needed. Having a little visual indicator in the overview to show that a particular component's display is set to none (even if it's only at one screen size) would be very helpful.

Thanks for the suggestion! If we combine the ideas in thread, we can arrive at the following feature:

  • A new entry in the component context menu: Hide/Show.
  • When triggered, it will set display to none in the options panel. Components which have their own way of showing/hiding like Modal will use it instead.
  • When a component is hidden, an indicator will be shown in the overview panel.

The only thing that isn't clear is whether we should show the new indicator if the component is "partially" hidden (hidden only on a specific breakpoint). I fear that this could be confusing to people. It might be better to reserve the indicator for components that are "fully" hidden.

Well hmm good point on the partially hidden. Is it possible to color code this indicator? I dont' want to complicate it any more than necessary though either. Here's what I'm thinking.

If it's fully hidden, color the indicator X color. If it's partially hidden color the indicator Y color.

Since partially hidden would mean that we already set up media queries on our own for it (or a component we pulled from the online components did it for us) this would just tell us that there are media queries on that that particular component. We shouldn't need anything else in the Overview tree for this then.

If we change it to fully hidden it should override all media queries as well, but not remove them. I don't see anything else we would "need" for this. This would give us the ability to do what we need to hide/show items as well as indicate items for us that have media queries attached which would also be pretty helpful I think too.

I wouldn't reserve it only for components that are fully hidden. I rarely have components fully hidden for any length of time because if they don't need to be seen at any size, I simply delete them, or move them to the bottom so they are out of the way.

The usefulness of this feature, for me at least, would be knowing that certain components are hidden at certain screen sizes, because this is something I do regularly, especially with text blocks wrapping around images that don't flow the way I want at certain screen sizes. I can just hide a part of the text, and show the same part in a different spot at a particular screen size. But it's sometimes easy to lose track of these hidden blocks since there's no indication in the Overview that they are hidden.

Maybe in the overview panel, the text could be one color for components that are partially hidden, and another (or darker) color for fully hidden, this way it wouldn't be confused with the animation indicator?

Upon giving this more thought, I would say do not make an option to change the display value of components from anywhere but the options panel. Simply having a visual indicator in the Overview panel would be more in keeping with the program's overall UI.

Thanks for the input! I think the idea got derailed a bit - it started as a way to quickly show/hide elements, but progressed to a complex visibility indicator. It kind of makes sense to have such a feature, but it is likely impossible to make work correctly as there are many different ways to hide an element.

We won't be implementing this just yet, but this thread will remain open to continue the discussion.

I'm wondering what different ways you might be talking about? For the OP and myself which definitely agrees there should be something easier in a right click menu, it seems that it would be totally obvious to just set the display to none. Sweet and simple and with the ability to toggle it back off with the right click menu.

Basically just right click over the component in the Overview tree, choose "Hide" (This sets it toDisplay: None). Then when/if you want to reshow that item you right click on it, choose "Show" (This sets the display to whatever the previous setting of it was). Doesn't have to be any more complicated than that really.

I would think that would be pretty easy to do and I know it would save a whole lot of messing around clicking back and forth and scrolling and opening sections etc in the Options pane and then having to go back and find the component you were working on because it doesn't have any visuals to show what is currently selected in the Overview tree (hint hint lol).

Scratch that last part on my post about there not being visuals on what is selected in the Overview tree. Not sure what I was thinking there, but there are, so ignore that part, sorry bout that.

I envision something like this.

enter image description here

To start, I think a simple disable/enable feature when you right click on a block would be useful with it being greyed or striked out when disabled. Appreciate it isn't that simple though.

I think that coloring the whole text makes it hard to read. I'd like to see a colored circle in front of the text...

... possibly blue (or yellow) for partially hidden and red otherwise (fully hidden) .

Another option would be to change the highlight of the text background, but I like this less.

It's more work, but you could set a default and let us modify it to our individual preference in global settings.