Would like some pointers on using BSS to create "clean & elegant code"

Being new to BSS, for example when selecting a background color in the dedicated Appearance > Background section, I would just choose a color visually, but this means I have about 100 random colors running around. I should have probably stuck solely with colors “in the theme” I’m starting to realize. But, also there are other ways in BSS to set the same background color. So that tells me I should read some of the documentation before re-designing my fancy navbar which took a long time to perfect.

So just looking for some general pointers / guidelines / pitfall suggestions before I begin the re-design process. Links to specific sections of the documentation would be nice. I will probably go through the whole doc though so that I don’t miss something important.

Another specific thing that I do which intuitively seems like a bad idea is I just drop in say a button group, and it has no margin around it naturally, so I add margin or padding to space things in its parent or itself. But would it be more appropriate to place my items in some sort of container that automatically already has the spacing done correctly sort of like how LaTeX automatically typesets your math?

We learn by playing around and getting a feel for how things work and look dependent on our actions.
I find making notes about what I’m doing and what I’m trying to achieve helps me see the way forward and know what and where to roll back to, if needed.

1 Like

Hello to all the developers.
Everyone has their own background and experience and will not necessarily have the same approach, which is perfectly normal.
Bootstrap Studio (BSS) is a fabulous tool that evolves regularly and takes user requests into account. (Several of my suggestions have been validated).
When you create a site with Bootstrap Studio, you create a BOOTSTRAP site.
I write BOOTSTRAP in capitals to emphasize that the basic rules are dictated by BOOTSTRAP and not by BSS.
BSS clarifies the use of Bootstrap and makes site creation as easy as possible with its well-designed interface.
To use BSS properly, it’s important to be familiar with how Bootstrap works, as documentation is abundant.

  1. Know how Bootstrap works in broad terms and don’t hesitate to reinforce your knowledge.
  2. Read the BSS documentation, which is very well organized.
  3. In BBS, prefer the Options tab, which uses standard Bootstrap classes and attributes.
  4. The Appearance tab adds styles to HTML lines, which is not the best solution for easy-to-maintain code. For testing purposes, however, it may come in handy.
  5. Preferably use Bootstrap’s standard classes and numerous utility classes before adding your own CSS code.
  6. When a project is opened by right-clicking on its tab, it can be easily duplicated.
  7. When you want to test new functionalities, modifications or other tests, it’s best to test them on the duplicated project.
  8. The duplicate project can be closed without being saved.
  9. This method allows you to evaluate modifications without cluttering up the original project with more or less controlled code.
  10. When tests are conclusive, simply transfer them to the main project. BSS allows components to be copied between two open projects :smile:.

I hope this answer helps you in your projects.

2 Likes

Very well thought out and written. I will definitely try that duplicate-test-copy-component workflow you suggest. I am halfway through the BSS documentation. It is indeed very nice documentation for my tastes.