Library Component Functionality Question

Hi all,

I’m a new user of Bootstrap Studio. As the only designer on our team, we are hoping to use it as a bridge between design and development.

With that said, I’ve been testing out the “Add to Library” feature. If I make, say a button, using the bootstrap default button, change its color, save it to library, and use it across projects, it works as intended.

HOWEVER…after saving it to the library and I want to make changes to button, say change its background color again, the buttons DO NOT update their bg color in other projects.

If I edit the button’s CSS file in one of the projects, it also does not update the color. I have to update each manually.

I assume then that added to library elements are not dynamically changeable, meaning if I update the parent, the children don’t reflect this update? See the screenshare below. Thanks.

https://www.loom.com/share/df055b7e3d6749a582f1cebd94ed3333

It’s working as per design.

Adding your own components to library saves css/JavaScript files etc.

When you add these to a new project - the css amends you make will only be applied to the new design as they are independent.

Bootstrap Studio is not well suited for “collaboration” on website projects because it’s run locally, on the user’s machine. Probably the best you can do is buy multiple copies of BSS for each user, and save your .bsdesign file on a cloud-storage site (ex. Dropbox) that your whole team all can access, and then use some sort of scheduling app, or messenger app, to ensure that no two people attempt to work on the site at the same time. I do not know what would happen if two people were to open the same bsdesign file at the same time, do different changes, and then save. Presumably, the last person to save would be the way the file would be saved, but if two people were to try and save at once, it would probably corrupt the file. Also, the way some cloud storage works, it can cause some types of shared files to become corrupted because of differences in time zones. It’s basically playing with fire.

Even cloud-based website builders like Webflow do not allow true multi-user editing of a website by two people at once. There are very few programs that allow this, and they’re usually rather simple applications. Google Docs and Google Sheets are two examples.

When you do library items like this, check to see if the CSS is needed. I think in this case it is not and you can remove it before saving. Most likely you overwrote the default with that css and that’s why you needed to do it separately. Am guessing since I didn’t try it, but seems like that might be the issue there.

As for the centering (not sure if your circling the buttons is to show it’s not centered like the other one or not), you most likely would need to include the col/row/div or container etc. that has it set.

1 Like

Thanks for the info - I guess what I was envisioning was more of a “design system” functionality, sort of like Figma or Sketch, where if you make changes to the parent component, the children get updated along with it.

Thank you! I appreciate the reply. My team and I are working on building a design system and I was thinking that the components you’d add to a library acted as parent components. Then when you use them in a design, they become children tied to the parent so that you could update the component in one place and it would make the updates everywhere there were children. It seems bootstrap studio is more suited for one-off type projects vs. keeping components in sync across projects.

If you update a component within the same .bsdesign then it will work fine and will be synced up, the only problem is if you create a new project and copy into that new project.

You could also creating your own theme that could be installed on each design so you retain styling elements and your components should work if copied across between seperete projects (I’ve not ever done this but it’s just a theory)

I know what you mean about sketch as I also use sketch, it’s a great design/collaboration tool and see the benefits to it but feel BSS is a long way off from that.

When you do components that you have saved, they are not saved ( I don’t believe so anyways ) with the “linked” setting. You need to then copy that component and “Paste Linked” with them to the other pages. Then you will be able to update one and it will update the rest. I typically do this type of setup for my Header, Sidebar (if I use one) and footer areas. Sometimes a content area as well. Hope that helps :slight_smile:

Collaboration between remote users in different geographic places is something that has just started to take off (especially in this past year, as more and more companies have people working from home due to the pandemic.) This sort of model demands a secure, cloud-based, database driven infrastructure with significant redundancy. Def not cheap! We’ll be seeing more and more, but it will evolve slowly, with larger companies like Google, Adobe and Microsoft taking the lead.

What Bootstrap Studio does for $60 is already kind of mind-boggling, but I wouldn’t expect anything like what you’re describing to show up in this program anytime soon.

Even the big, expensive, cloud-based website builders like Wix, Webflow, Weebly, Squarespace, etc… have yet to manage multi-user, real-time collaboration, updates, and synchronization across platforms. Most of them don’t even have anything like the online component library feature that BSS has.

I think the option for team colloboration will be possible in the near future based on the announcement about Mail studio - as that program is built on the same framework as BSS and allows it.

Maybe Devs will perhaps release this feature as a subscription based option (purely speculation at this stage but I have asked the question)