Potentially wasted screen real estate

The new V4.2.0 UI is a great improvement, but it leaves the possibility to squander a portion of the screen. If you don't need (or want) to have side-by-side view of the project's HTML and Styles & Design elements (as I often don't), then there are great, gooey gobs of wasted space. To illustrate:

  1. Grab the right edge of the left-hand sidebar (Studio/Online and Overview) and slide it to the left as far as you can until just the three icons appear.
  2. Now slide the left boundary of the right-hand sidebar (Look&Feel/Options/Animations and Design) and slide it to the right as far as you can until just the four icons appear.
  3. Grab the Styles tab (and tabs for any open Design elements -- CSS, JS) and slide left so that they're next to the HTML tab.
  4. Grab the boundary between the area below the HTML & Styles tabs and the empty space where the Styles tab started out and slide it right as far as you can.
  5. Bingo -- you now have an big empty chunk of screen. On my system, that barren area is roughly 25% of the screen width -- and I still need to scroll right/left to see the full width of some of my HTML.

I realize that there will still be a need for a slice of space on the right so that you can slide tabs back to the right for a side-by-side view. But the minimum width of that empty right-hand pane could be quite narrow -- perhaps the same as the "icon only" width of the sidebars. Hopefully, the minimum horizontal size of the left/right sections is a single arbitrary width (or percentage) aimed at providing a reasonable, comfortable view of the Styles, and can be reduced with a simple "fix" that would allow the user to decide what is reasonable and comfortable for their wants & needs.

FWIW, Tony Benedetti

Thank you for the suggestion! There is a lot of potential for improving the UI further. Something that we are considering is the ability to make tabs movable, so that you can drag any tab to one of the three panel containers (left, right and bottom).

This will take quite a bit of work but I think it will give the greatest amount of flexibility. One big problem that we need to solve is that editor tabs are design-specific. So, for example, if you place JS editors all around the UI and then switch to a different design, those tabs will disappear. Then, on the new design, you may rearrange the other tabs (which are not design-specific), and when you switch back to the first design it is not clear what state the UI should be in.

Would love to hear your thoughts on this!

Wow ... dragging tabs from panel container to panel container is very ambitious but would undoubtedly help the design community. But for my use, all I'm currently suggesting is to reduce the minimum width of the right & left sections of the bottom panel container. Hopefully, that would just be adjusting variables in an upcoming V2.4.x release.

I'm basically using BootstrapStudio as my testbed and I do all my JS & CSS/SCSS coding over in VS Code which provides me a very rich editor. I spend most of my time in VS Code and then switch over to BSS to test the underlying Javascript. What would really help me in that regard, would be "reimport" functionality in BSS. (See my suggestion of 2018-02-16).

Of course, if you are looking for other well-thought-out (he says with a smile) suggestions/ideas, take a look at each of my earlier postings to the "Ideas" forum. One of those UI improvement ideas that is near and dear to my heart is "Right mouse button menu". The BSS-produced HTML for my one-page project is around 900 lines long and the <div>s are nested sometimes as deep as 15 levels down. Being able to fold/unfold (rather than scrolling endlessly) the Overview and HTML displays would be a enormous boost. And certainly being able to use Copy/Cut/Paste from the mouse instead of the keyboard would be great!

I'm a programmer and not a designer. I'm using BSS to prepare a very elaborate form to gather up all the intricacies of ISO 8601 & EDTF. When I'm done, I hope to find some kind-hearted designer to clean up (or replace!) my ham-fisted design. My aim is to transmogrify (i.e., transform in a surprising or magical manner) the fifty controls on the form into a predictable, sortable, machinable format for a datetime interval. The current fifty controls are likely to double (or quintuple. or ...) as I add "Durations", "Repeat Rules for Recurring Time Intervals", and support for inclusion of many of the 84 various calendar systems I've identified so far. When I'm done, I hope to deliver a function library to the programming community that will allow them to develop their own forms to convert from one of the ~84 calendars to another ("proleptic Gregorian" to "Thai solar", "Old Icelandic" to "Hebrew", "Julian" to "French Republican", etc. etc. ...).

Thanks, Tony Benedetti