App CSS without main bootstrap css

Hi,

It would help me a lot if the export made a css file that had the specific css changes in it rather than the whole bootstrap file. That way I can CDN bootstrap in and just load the customised CSS as necessary. Maybe it already does this but when I ask it to use CDN in the export bootstrap css is exported also with all the custom code weaved into it. Which is making it a protracted process for me to create static landing pages.

The program does not “weave” any of your custom CSS into the exported bootstrap.min.css file. That file is never changed by the program. It’s simply overridden on the website by the CSS that comes after it. I cannot speak for what happens when you use the program’s built-in hosting, because I have my own web server where I host my sites, but when you export your BSS website project, it creates a folder called assets, with subfolders. The bootstrap subfolder contains the stock bootstrap.min.css. Another subfolder called css contains all your custom css files. The CSS files in this folder will take precedence over the stock bootstrap.min.css (and I believe this is the case whether you use the CDN bootstrap CSS, or the one generated by the program.)

If you are hosting your own sites, you have full control/freedom to modify/replace/delete any of the exported CSS files to your liking. If you want a version of bootstrap.min.css that doesn’t contain a particular part of the Bootstrap Framework, you can create a custom version here
https://getbootstrap.com/docs/3.4/customize/
And then replace the file that Bootstrap Studio generates and puts in the assets > bootstrap > css folder.

If you look at the source code of any page generated by BSS, you will see that the first linked CSS file is bootstrap.min.css. All your custom CSS comes after it, so if you wanted to, you could download bootstrap.min.css, import into BSS using the CSS import feature, and then edit it however you like using BSS’s editor, or a third party editor like Notepad++. You can also choose the include order of your custom CSS files by going to the Design panel (lower right) and right-clicking on “Styles” and select “include order” from the dropdown menu, to determine which of your custom files has the “final say” as it were.

Explain please why the CDN of bootstrap.min.css 4.6.0 does not produce the same layout as the one used exported from BSS?

How it looks with the BSS bootstrap 4.6.0 file

@printninja

Just so you know it project with locked theme doesn’t use CDN for the Bootstrap.min.css even if you choose use CDN for library in the export settings. That’s why your two sites looks the same

1 Like

both of your links are using the local bootstrap.min.css. So yes they are identical.

The only difference noted by my Compare Side-By-Side package installed in Sublime text is that the CDN version does not have */*# sourceMappingURL=bootstrap.min.css.map / added on the last line.

Both are identical.

Okay, I did not realize that. I should have looked at the page source before posting. I’ve deleted my post and will redo the experiment with one of my own sites right now.

Yes that is a nice site whether it is using the CDN or the exported default bootstrap.min.css. Again, no difference

Yes they looks the same, but the version with no CDN is exported with BSS 5.5.0 using bootstrap 4.5.3 and the one with CDN is exported with BSS 5.5.2 using bootstrap 4.6
It’s a nice site, happy clients I suppose

Ah yes, I did not do my homework. Kuligaposten is correct.

When comparing 4.5.3 to 4.6 I get:

16 intra-line modifications
93 lines removed. 51 lines added
144 line differences total

I would take a guess at the original posters problem is that (1) some of the bootstrap builders that are online fail to complete the 2 step process of creating a correct bootstrap file by omitting the 2nd step of running the css through autoprefixer or (2) someone forgot to add reboot in to normalize the bootstrap file when it was compiled locally ?

Gahh!

  1. Thank you for the compliments @kuligaposten @twinstream. Yes, the client is very happy.

  2. I guess I goofed again. I loaded the .bsdesign file from the last time I saved it (which was 5.5.0), and exported without making any changes, so I guess it exported the older bootstrap.min.css. The CDN version was exported with the use CDN option selected.

I will do this once more but first I’ll save the site in the current version (5.5.4) to force the exported site to use the latest bootstrap.min.css and we’ll see what happens.

Confirmed

(only last line /*# sourceMappingURL=bootstrap.min.css.map */ added) to non-CDN

If nobody else can confirm the OP’s issue as being due to the a difference between the BSS generated bootstrap.min.css and using the Bootstrap CDN by tomorrow, I’m going to delete my example files.

I’m curious as to why the OP @rcraig12 has not responded? The site I posted seems to prove there’s no issue between the two versions of the bootstrap.min.css file.

Can you post links to your site so we can try and determine if this is a genuine bug, or just a coding issue? If not, then I’d consider this issue solved, at least as far as it being a bug in the program as the cause.

I think OP using a template with the custom classes in the bootstrap.min.css and use that as theme in his design. Then if he use CDN for Bootstrap he will miss all the custom classes when he publish or export the design.

@printninja Your site is the same no matter if it is bootstrap 4.5.3 or 4.6 local or on CDN because you have all the classes in your export

That’s been the point I’ve been trying to make since the start. It’s not the bootstrap.min.css file causing his layout issues, it’s something in his custom classes. Yes I am using custom classes, but only a few of them are overriding a few classes in the bootstrap.min.css file. I’m don’t add custom classes directly into bootstrap.min.css. If that’s how the devs do it to create the BSS templates included with the program (which I’d considered a poor way to code), then of course that’s going to cause an issue if the OP is switching from their customized CSS to the stock CDN CSS. I’ve been told (and read) many times, that it’s bad practice to alter the bootstrap.min.css file.

Also, if the problem in the OP’s post was something to do with a difference between the program’s generated bootstrap.min.css, and the one the CDN delivers, I would think that it would affect not only his website, but any BSS user whose using one or the other. So far, I don’t see anyone else reporting this as an issue.

I’ve spent as much time as I can afford testing to try and reproduce the problem with my own sites. I can’t. So unless the OP wants to posts his site online, or provides his .bsdesign file for someone to look at, I don’t see what more we can do? Can’t diagnose a layout issue from jpg images.

OK just catching up. So here is the process. Create a new project and use the landing page template. Export it using CDN’s instead of local files. Change the bootstrap.min.css from:

assets/bootstrap/css/bootstrap.min.css

to:

https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css

The bootstrap version 4.6.1 is what shows in the local file. The CDN on the bootstrap official website only has 4.6.0 as far as I can tell (which is what I have used as the replacement). In any case the result is that the page is no longer displaying properly.

I have made no changes other than that. So there has to be something different about the local file.

To be clear. I have made no changes to it design wise other than to make the page use the CDN for bootstrap. This is the reasoning behind the OP. If there are changes to a standard bootstrap file then they should be in a separate file.

PS My silence has been because of being unwell :slight_smile:

If you are able to consistently reproduce the problem, then you may have found a bug in the software, and therefore you need to post this in the Bug Reports category, or better still, report it directly via this link…

You’re posting a problem you’ve found with the program in the Ideas category, which is typically for posting suggestions for improvements or additions to the program, and there’s less of a chance it’s going to be seen and addressed by the developers. If you post/report it as a bug, then it will get attention more quickly.

The landing page template has a locked theme to it with custom css in the bootstrap.min.css and BSS don’t export that page using CDN for the bootstrap.min.css because of that. If you change your exported html file to use another css file, then it will not look the same, It is not a bug

1 Like

OK happy to do that. Although its not a bug. As a bug means broken and the software isn’t broken. It is more an idea. Because separating customisation away from the default CSS framework adds complication in using the templates.

If you want to use the landing page with CDN , first preview the page in your browser inspect the bootstrap.min.css and copy all css classes from line 10270 to your cutom css file.
Then make a new blank design and paste the css and copy the infex.html from landingpage design to the blank design and you can export it using CDN for bootstrap