How to use templates...?

Just building my first full site with BSS. Using BS5.

I’m fine with the core components of Clean Sky theme. However, I don’t need the extra js and whatever else is included for a couple of things, and some other things look locked down. So, I just want to start a blank project and copy and paste components as I need them (eg. navbar, footer, any section, contact form etc).

I want those components to come across looking and functioning the same, then I can make my alterations (color, font, etc).

However, so far I haven’t had success with this. I don’t understand why the CSS is not applied in the new design? The HTML can be copied over no problem, but it essentially without CSS. When I look at where the CSS comes from in Clean Sky, it is not some custom CSS file on a server somewhere. It is ‘Bootstrap’. If I am copying a component from a Bootstrap 5 design (Clean Sky) to another Bootstrap 5 design (my from-scratch version), then why does it not apply Bootstrap 5 CSS and look the same? It is completely broken, as if there is virtually no CSS.

Any guidance as to what I am doing wrong?

Help appreciated.

Clean Sky BS5:

Elements copied to a new BS5 design:

The Templates that come with Bootstrap Studio have modified bootstrap.min.css files. That is why you can copy the component from a template to a blank design, but it will paste without all the custom styling.

I guess if you really wanted to, you could export the template, go into the Assets>CSS folder and then import the template’s CSS files into your new blank design. But there still might be some things missing, like attributes, keys, class names, IDs, images, etc… I’m not really sure because I’ve never done something like this (nor would I.) I build all my websites from scratch, using my own custom components that I’ve created over the years.

Basically, if you want to use a template as a starting point, then just use it, and delete what you don’t need. If certain things can’t be deleted, it’s because they need to remain in order for that particular template to look the way it does.

I don’t mean to sound discouraging, but if you want to build customized websites with BSS, then you better start learning to write CSS. The templates that come with BSS are fairly simple, and could be easily reproduced if you know what to look for, and have a good working knowledge of CSS.

Thanks PN. I see.

I know CSS no problem, I just don’t yet have my own library of pre-made elements yet for BSS and I was hoping to whip something up in a day. Been using BSS for single page elements only so far.

Anyway, the templates are good for reverse engineering.

Thanks.

I don’t think it’s the CSS that’s the issue here though, it’s the CDN’s that are being used to pull the Bootstrap files with. That’s why you don’t see the CSS and JS, etc. in the project files when you’re working on it, because the projects all use CDN’s to pull files in for it, then on export it’s basically writing those files on the fly for us as the files PN was mentioning that are minified.

I might could help you with the Clean Sky design unlocked and the Material one also that were created for me by one of the users here. I want to say either Kuli or PN, but … (don’t shoot me guys lol, I’m old, I’m allowed! :stuck_out_tongue: ).

I wanted to link you to the post as it had more information in it on how to actually do this, but I can’t find it (20 min searching for a post is crazy to not find something like that). Anyways I’ll upload it in a second and leave it there for a week or so for you to download.

The 2 templates are 2 of the included ones that were manipulated to unlock them. The manipulation sounded pretty easy to do, but I can’t remember how it was done. (I’m old I said! quit laughing!) :stuck_out_tongue:

Haha I’m going to bed, I’m obviously way overtired already lol. Hope those help ya.

Clean Sky and Material Portfolio Templates Unlocked

Awesome! That helps heaps. Thanks again.