Some thoughts after using BSS for a few months

So I’ve been working with BSS for a few months now over three projects, and I’d like to share a few impressions and observations concerning the product.

First, and foremost: I like it. There are too few good WYSIWYG web page designers out there, and most of them are ridiculously expensive and/or tied to a particular service and/or use a framework like Angular which imho has become a ridiculously bloated, convoluted, script-obsessed mess. Bootstrap is a good framework, and BSS performs as advertised at a good price without forcing you into someone else’s idea of a development pipeline.

I have a few nitpicks. Cut/paste is erratic sometimes. I’d prefer the property lists be a bit better organized instead of, for example, an “Appearance” tab full of settings that affect positioning and an “Options” tab full of settings that affect appearance. Dropping a component at the end of a list frequently doesn’t put it under the parent I’d intended. Other, similar things that caused me to raise an eyebrow but ended up as part of the learning curve.

Unfortunately - and you probably saw this coming - I have one problem with BSS that isn’t a nitpick. It is, in fact, a serious shortcoming that makes BSS difficult, at times almost impossible, to use for serious design work: No template engine support. I don’t mean the “templates” shown when you start a new design, which are basically pre-fabbed web pages. I work mostly with flask and Django back-ends, which use jinja2 and Django’s very similar templating language, respectively. (In fact, I think Django can optionally use jinja2.) It is very difficult to use anything more than very basic templating in BSS. Expressions usually work inside text attributes and such. I can use custom code blocks for extending base templates and defining blocks and such.

For most anything involving dynamic data, however, persuading BSS to let me add template tags ranges anywhere from annoying to all-but-impossible. Example, one of many: I’m building a control panel that has to display a variable-length table of data. No big deal, right? Set up the table in BSS, drop a {% for x in y %} in the table body to load the rows, and that’s that. Except that the table body is locked so there’s no way to wrap the row in a for loop. I ended up having to convert the entire table to custom HTML, which means the designer ignores it and I have to edit look/feel manually (although, to be fair, BSS does a decent job of rendering elements in a custom block.) I have one page in that project that is at least 2/3 custom code blocks, and at that point why use BSS at all?

I’ve browsed this forum, and found posts as far back as 2018 begging the BSS people to add template engine support. What few replies I’ve seen have basically brushed off the posters; “we’re focusing our efforts elsewhere.” If any BSS developers are reading this, I submit to you that you are grossly underestimating the need for and demand for and usefulness of this feature. Without template engine support BSS is useful mainly for designing static web pages. The thing is, and my main point in posting here is, in 2022 A.D., how often do you create static pages?? In my case, and I suspect many, many others’, the answer is: Not very often. I have never, in 20-odd years of web development, created a site that was 100% static. Sure, I can bang out 404 error pages and “operation complete!” pages like blazes with BSS. The thing is, I can also customize simple generic pages by hand like blazes. Although it does help, I don’t need BSS for those. I need a designer that, at minimum, will let me insert tags where I need them - they don’t even have to render, just show me where they are and let me edit them - without hours of wrestling with custom HTML and supporting javascript. (I’m still looking for a way to set chart data on the fly. I know this is as much chart.js’s shortcoming as it is BSS’s, but charts are damn near useless if you can only set the data at design time.)

Anyway, please regard these last paragraphs as constructive criticism. I bought a lifetime license after using BSS for less than a week, and I intend to continue using it. I’ll tell you, though, that if an alternative comes along that works more like the way I work, even if its usability is slightly inferior, I’m going to take a long look at it. I’d rather not do that; I’d rather use a superior product that fully supports modern web platforms.

2 Likes

You might look at using Python Beautiful Soup Html Parser to modify anything in the Html pages on or after export and save however where ever too. Auto magically.

https://www.crummy.com/software/BeautifulSoup/bs4/doc/

2 Likes

@Rich.H

I would rest my case on this one. I posted something similar and all i got was backlash from people who live in a frogs world. Anyway, suggest you try Pinegrow. I got that working well with my Codeigniter 4 and Laravel.They dont seem to grow out of the ego that they have the best product for the price. Nothing really fantastic or innovative has come so far. I dropped BSS sometime ago.

You want a good BS based product, then Pinegrow would be my suggestion.

1 Like

A good read on bsoup…[Python BeautifulSoup - parse HTML, XML documents in Python]

1 Like

Thank you for starting this discussion, @Rich.H! We appreciate the feedback.

These are valid criticisms. We will improve cut/paste in our next updates. The reason we have Appearance/Options tabs organized that way, is because we want to keep bootstrap framework options (in the Options tab) separate from CSS editing (Appearance tab). This leads to the situation where there are duplicate settings that conflict with one another. There is no easy solution for this, we have no control over the Bootstrap framework and at the same time have to make available all the options it offers.

I understand why you find it frustrating. A lot of people’s workflows don’t fit into the visual editing paradigm. Some have to work alongside developers, integrate frameworks, write PHP, Python etc. We are aware of this, but Bootstrap Studio’s focus is to be a visual editor first and foremost, and having arbitrary control over HTML will significantly compromise the visual editing aspect. No one needs a visual editor that isn’t good at visual editing.

There are many people who build static websites and find Bootstrap Studio useful. We are aware that many others will feel limited and prefer other software. This is ok, everyone can choose the tools that work best for them.

8 Likes

Okay, from my earlier reading I was expecting a reply similar to this. I’m not trying to tell you how to do your job - it’s your product, you have the right to include or not include whatever functionality you wish. Your reply, however, raises a couple of points that I feel are worth addressing. I’ll do that now, and then move on.

Why? The entire point of a tool like this is to abstract away such things. Ideally, a user should neither know or care that a setting is affecting HTML and/or CSS and/or the framework. That BSS is not doing this is a recipe for frustration. Example: I just opened a BSS project, selected a card body, and set “Color” in Options to “Success”. Text became green. I switched to the Appearance tab and hit the pink icon under Color. Nothing happened. (The underlying code did change in each case.) Now the Appearance color is showing --bs-pink, but the text is green. There is a little warning icon telling me the rule is overridden, but so what? It isn’t obvious as to which control set the overriding rule, and why should I care? I told it to go pink, and it didn’t. I now have what amounts to duplicated controls with inconsistent settings. BUT…reset everything, pick pink in Appearances, go to Options and select Color / Success, and I get green text. No change on the Appearances side, and no warnings. I know that BS is overriding CSS (even local styling, which is interesting,) but the bottom line here is that you have two styling control sets in completely different locations that do not play well together. With all due respect, this is poor design. It’s certain to confuse and frustrate users low on the learning curve, especially if they aren’t well-versed in the BS/CSS nuts and bolts. Perhaps you should consider moving those BS settings to the Appearance tab and, since this is pretty much the behavior anyway, place the CSS settings in a dropdown as a way to customize the BS “Default” settings. There will be some behavioral conflict. Fine - add some logic and resolve it, and the user still has the ability to deep-dive into the code if they don’t like your compromises. And then do the same with the other areas with overlapping / duplicate functionality.

Nobody is talking about having arbitrary control over HTML - I fully realize that would make visual editing next to impossible - and I still don’t think you really appreciate just how much of a problem - and how much of an opportunity - this is. You have a “Dashboard” template in BSS full of charts and lists and complex lists and tables, and I have to wonder why because much of the content is clearly intended to be dynamic. With reference to my example in OP, I’ll say it again: a table component that forces you to populate the table at design time is effectively useless. Same with the Chart component - do you really expect people to modify the page in BSS and export every time a chart value changes!? (At the very least, you could expose that chart.js object so we could modify it with javascript.) Same with a wide variety of other components that one could reasonably expect to be populated at load time. Yes, I could write a ton of javascript and a back-end API to populate my table, followed by several days of testing to make sure it all works across networks / browsers / etc. Or I could add exactly two jinja statements and a few expressions and let the engine do all the work. When you’re on deadline to bring a page live, that’s no choice at all.
The thing is, and I freely admit total ignorance re BSS internals so this is pure speculation, it doesn’t seem like engine support would be all that hard to implement. Define two new components; let’s call them TemplateExpression and TemplateStatement. Maybe a third, TemplateComment, if you have some spare time. Add global settings for the delimiters; I would usually set them to {{ }} and {% %}, respectively. One option to place editable text between the delimiters. Then modify the component tree management and renderer to treat them like HTML comments - put them in the exported code, but otherwise ignore them. Then open up the components so you can drop a TemplateExpression or TemplateStatement anywhere that doesn’t completely break a component - "<sec{{ someName }}tion>" obviously is out of the question, but '<div class="md-4 {{ myParameter }} bg-white">' or "<span>{{ someText }}</span>" is fine. Yes, the user might drop something in there via myParameter or someText that breaks the page. That’s the user’s problem, not yours. Meanwhile, your users can now do things like:

<table>
  <thead>...</thead>
  <tbody>
   {% for row in rowSet %}    <!-- TemplateStatement component -->
     <tr>...<td>{{ someData }}</td>...</tr>
   {% endfor %}     <!-- ditto -->
  </tbody>
</table>

Their table is populated with whatever number of rows needed at load time, and they can still adjust table styling, cell widths, colors, etc. in BSS. This would be so massively useful that I’d build these components myself if I had any idea how to make “native” components for BSS.

Anyway, that’s all I have to say on this topic. Do what you will.

2 Likes

@Rich.H I don’t understand your complaints here. It sounds to me that you are not familiar enough with Bootstrap maybe? I say this because the graphs and charts and dashboard templates are there because they are available on the Bootstrap website. No ulterior motives were involved in adding them.

As for the rest, it really does sound like you are wanting a fully visual editor that you don’t have to deal with any code on. That is not, and has not been the intention of this app. I feel you will always be frustrated and annoyed with BSS if that is the case.

I for one Do care what code is affecting what element and the error messages work fine for finding which code something is overwritten with. There is an exclamation point usually next to the end of a code block and if you mouse over it you will find a way to make it show the prominent code.

Anyway, sorry you’re not happy with how BSS works, but it’s awesome for me. :wink:

2 Likes

I have owned both BSS and Pinegrow from almost their earliest versions. Pinegrow has gotten progressively slower on my system as the software has added features and increased in complexity. To this day, the undo feature is still quirky and inconsistent.

But the big complaint about Pinegrow (which has come from many users) is that it’s UI is just not that “user-friendly.” Many of us in the forums complained about this for years. Some even went so far as to mock up more user-friendly UI examples in Photoshop. It always fell on deaf ears. The PG developers can be as egocentric as any software developers I’ve encountered when it comes to what they consider “user-friendly.”

Pinegrow is certainly a more powerful program, and can do things BSS cannot, but it’s also a lot more expensive. For me at least, I feel it’s far easier to quickly build a Bootstrap site in Bootstrap Studio.

1 Like

I create them all the time. Hundreds and hundreds of them.

If you cater to people who need dynamic sites, I can understand why you’d think there is no demand for static sites, but rest-assured, there is still a huge demand out there. I wouldn’t be in business if there weren’t.

6 Likes

I am developing an export script called BootstrapStudioToDjango. Perhaps :thinking: this can help you create “dynamic pages”. Eventually I want it to create a Django view function for each page that’s just boiler plate, that you can add code too. All together this would give one a BSS + Django LowCode environment with unlimited extensibility and custom code. So you design you’re site nav in pure BSS and then go in and seamlessly code the critical parts in Python :snake: that go on the server-side. So that when you place a Sign in button, it detects this upon BSS export and generates the standard code for logging in a user.

You can build up custom components in BSS using this system or copy one of the many in the standard component library. This autogeneration feature is currently where I’m at in the implementation. Find my project on GitHub at enjoysmath/BootstrapStudioToDjango.

1 Like