Version 4.5.8 is out!

Hey folks!

I am happy to report that Bootstrap Studio 4.5.8 is now out! Here is what's new:

  • Improved application focus behavior. You can now navigate the application window with the keyboard and use shortcuts to Edit/Duplicate/Delete almost anything that is selectable. You can see our updated list of keyboard shortcuts here.
  • A new CSS cleanup tool was added. Right click the Styles group in the Design panel to scan your project for unused CSS blocks.
  • You can now add Bootstrap tooltips to any component from the Options panel.
  • Support for SRI and crossorigin attributes was added for linked CSS/JS files.
  • Bugfixes and small improvements that were suggested on the forum.

We will love to hear your feedback on the new features! As usual, if you notice any bugs, be sure to report them.

Aside from potential bugfix releases, 4.5.8 is the last addition to the 4.5.* series. Soon we'll update the roadmap with what we have planned next.

Thanks much for the update, most especially for the CSS cleaning helper!

Any chance that we can know what the "small improvements suggested on the forum" are? Only way to test them or see that they are changed is to know there is a change in something, especially if it was requested/reported.

Thanks @jo! The minor improvements are:

  • When minifying CSS, the styles.min.css file is inserted at the correct place (forum thread).
  • Incrementing/decrementing values with the scroll wheel in text boxes and the css editor.
  • Searching for components with alternative names - Bold/Strong, Italic/Em, Anchor/Link. Only these were added for now.
  • You can add a custom component by dragging it from the page and dropping it on the Components panel.
  • "Select All" checkbox was added to the "Copy to Multiple" dialog.
  • When searching CSS, keywords like "media" and "keyframes" are now matched.

Awesome thanks so much for that added info!

Got a few things on the Keybindings that either I am not sure how they work or they aren't very easy to get to work on Macs: 1. "Rename Focused Item" - Not sure what this is, but no matter what I did nothing happened. 2. This is just an addition that you may want to add the MMB to the "Add Component Label" Shortcuts. 3. "Focus Next/Previous Panel" - doesn't work for me at all, it only brings up the internal Mac keybindings that swaps the app you want focused. 4. Expand Option/Group - I'm not sure how this is supposed to work without clicking with the mouse in a section first. It seems that there's really no way to target anything specific because they don't select at all? Basically for this to work I have to click a section or item first. Then when I use the keybinding it will work for that section. I guess I'm not seeing the benefit to this or I'm missing something on how it is supposed to work?

That's all I got so far, haven't checked the other stuff out yet, but so far I'm liking what's been done, thanks much!

I've mixed feelings, cause I've expected a lil bit more to be honest. The most usefull feature for me here is the tooltip, because for some reasons it couldn't work for me, now it does, lol(and in custom code outside of BSS it was working, omegalul). Anyways, Thank You so much for keeping updates for the BSS. Also Could anybody tell me what "SRI" is? I will be honest that first time I'm hearing that "shortcut". I've tried to google it, but never heard anything like "SRI" in Front-End Dev lol. Anyways, Once again, Thank You for the update.

@DickyKreedz

Try Googling "SRI and crossorigin attributes"

Hi Martin,

Thanks for this update. The tooltip addin is really a simple addition, but a time saver !

I have noted that the CSS cleanup tools does not work correctly in certain circumstances. It does not seem to recognize CSS classes applied by scripts (whether Bootstrap's own, or custom ones.) I had altered the rule under the modal-open .modal class so that the opacity of the background color was darker than the standard bootstrap opacity, and the cleanup tool reported this as being unused CSS (ostensibly because it's not active unless the modal is open.) It also reported some CSS that I applied using script that recognized scroll position as being unused. So be careful using this tool.

Another thing I have noted. When looking in the Javascript folder in the design tab (lower right), the standard Javascript files no longer appear. When working in the program, if I view the generated source code from a page preview, the path for the standard jquery script is <script src="/js/jquery-3.4.1.min.js"></script>

However, once published to a server, the path changes to <script src="assets/js/jquery.min.js"></script>

This caused some confusion since I referenced the jquery-3.4.1.min.js file in my script while building and previewing the site, and everything worked fine. Then, when I uploaded it, it obviously stopped working since the path and file name was now wrong. I don't recall this being the case before the last update.

Is support for multiple monitors on its way?

Thanks for the feedback guys!

@Jo I can confirm the issue with the incorrect keybinding on mac os. We will fix it in the upcoming release. For the other things you've found I guess that a video demonstration would be a better way to demonstrate the shortcuts than a textual description. We'll look into it.

@Printninja

I have noted that the CSS cleanup tools does not work correctly in certain circumstances.

This is correct, the tool is limited in what it can do. It checks whether any elements match the selectors in your stylesheets. If none are found, it assumes the CSS isn't used. So caution is needed before removing code.

Another thing I have noted. When looking in the Javascript folder in the design tab (lower right), the standard Javascript files no longer appear.

Yes, until now we showed bootstrap.min.js and jquery.min.js in the JavaScript group as locked files. We had to remove them because they got in the way of keyboard navigation and made selections non intuitive. jQuery and Bootstrap's js are still included of course, they're just not shown in the Design panel.

When working in the program, if I view the generated source code from a page preview, the path for the standard jquery script is

<script src="/js/jquery-3.4.1.min.js"></script>

However, once published to a server, the path changes to

<script src="assets/js/jquery.min.js"></script>

This has always been like that. Normally it shouldn't make a difference. Do you include jQuery yourself in the head?

@digital

Is support for multiple monitors on its way?

We still have some work to do before working on this, but we're getting there.

@printninja

I have noted that the CSS cleanup tools does not work correctly in certain circumstances.

This is correct, the tool is limited in what it can do. It checks whether any elements match the selectors in your stylesheets. If none are found, it assumes the CSS isn’t used. So caution is needed before removing code

This is exactly what I was warning against being done. Although this will help with your basic CSS, due to the JS it will not be as helpful as it should be because it's going to show a lot of code that is "not" not being used. Not as helpful as it should be in my opinion. The JS "Should" be included in this cleanup if it's going to be reading it in the HTML. Especially for newbies that won't understand why something is showing up in their cleanup report, but they can't find it in their CSS. They won't realize that it's most likely in their JS files.

Que DEUS continue lhe abençoando grandiosamente, para que assim possa deixar seu legado cada dia maior!

@Jo

One thing that concerned me was that I altered a rule in a standard Bootstrap class that is not accessible through the program, but exists in bootstrap.css nonetheless... modal-open .modal because I wanted to make the opacity of the background darker when a modal window is opened, and the CSS cleanup tool marked this as unused. So it seems the tool only scans the users CSS files against the users project, and not the actual bootstrap.css, which is also discouraging.

@Martin

When I want to include a particular javascript on only one page of the site, I will often place it on the page using a custom code component, but then it becomes necessary to add the path for the jquery file before the script in order for it to work. But the path is different for the jquery library depending on whether you're previewing in a browser on your computer, or actually viewing the live site online, so it becomes necessary to know the two different paths so you can change the code when you finally publish the site.

I would very much like it if we had the option of adding code not just to the head, but before the HTML, after the HTML, inside the head, and inside the body. The former website builder I used before BSS, a program called Website Realizer, allowed you to do this.

I can concur that you need to put paths in differently when you use custom code. It has been that way as long as I've been using the program though, that's not anything that this update did at all.

As for the CSS cleanup, actually @printninja, although I would also think it should be addressing all of the css, I can imagine they figured that the editing of the original CSS files would mess up newbies so ... yeah the newbie card ... I'm pulling it ... lol. Since we don't really have access to it in the app, it makes sense that we wouldn't have access to editing it even via a cleanup list. Also I think it also falls into the category of it would mess up the updates. Since some updates do update the Bootstrap files ... that would mean it could potentially overwrite all of your hard work removing unused classes.

But ... having said all that, I think 2 major things should happen with this yet: 1. It should give us the ability to print the lists out (preferably one long list with just bolded, highlighted titles for each CSS page). This would give us a whole lot more versatility in double checking the classes since I'm pretty sure the Cleanup does per page correct? We need to have a way to be sure we aren't removing classes being used on another page. If it's doing the whole project and not per page then this wouldn't be quite as detrimental, but would still be a helpful thing to have the ability to print the lists.

2. Let us use the Cleanup feature on the list of unused Bootstrap CSS and allow us to make our own decision as to if we want to remove them. In my opinion, this app really does have way too many control features in it that are hindering the web designer/developer from using it to it's fullest. This is just adding to the list of already way to many controls. We're adults (well most of us are I'm sure) and capable of deciding for ourselves what we do and don't need for our sites and in this case, we are capable of deciding for ourselves if we want to remove unused Default Bootstrap CSS. . . . . . . . a. Why not give us the list, let us print it out and do what we will to our own CSS files. After all, it's not like it won't put it all back the next time we update a website so we aren't ever really losing it permanently. . . . . . . . b. No need to give us the ability to remove it within the app, just give us the ability to print the list so we can manually remove it from our own files on export. We can easily make a backup of our cleaned up CSS file and replace it each time we export a site so it's a win win, you don't need to worry about the newbies, because the app will regenerate the full Bootstrap CSS file each time it exports so they get it back if they screw it up.

Just my 10 cents on that subject - We need to be able to clean that up too, a half done feature isn't as useful as a complete one.

Personally, I'd love it if there was (even buried somewhere in a menu) a setting called "expert mode" that simply disabled all the restrictions, locked objects, and gave us full access to the HTML and CSS.

@Printninja ++

Just one thing : why the editor panel doesn't remember his position and size, and stay open ?? Everytime i'm opening Bootstrapstudio I've to reopen this panel...

@jo

Also I think it also falls into the category of it would mess up the updates. Since some updates do update the Bootstrap files … that would mean it could potentially overwrite all of your hard work removing unused classes.

This is exactly the reason we don't allow Bootstrap to be changed. We update the builtin Bootstrap framework periodically (as we'll do in our next update due to Bootstrap 4.4.0). Modifying Bootstrap would make such updates impossible, and will also break the CDN functionality.

For CSS Cleanup:

  • It runs on the entire project, not page per page. We will add a note in the Unused CSS dialog to make this clear.
  • As for the limitations, they are there because the app can't know in advance whether class names or elements won't be changed with JS. The cleanup shows the unused CSS at the moment it's run. The best we can do is to add a note mentioning the limitations, which we'll do in the next update.

@printninja

Personally, I’d love it if there was (even buried somewhere in a menu) a setting called “expert mode” that simply disabled all the restrictions, locked objects, and gave us full access to the HTML and CSS.

I'm afraid I can't see how this would work in practice. This amounts to having an entirely separate program, and switching between the two with a setting. Instead I think we should focus on making Bootstrap Studio the most powerful visual builder possible. People who need full HTML editing prefer code editors like Visual Studio Code and Sublime Text anyway. With the upcoming 5.0 update we will bridge the gap somewhat.