Programming placeholders support for Python / PHP etc.

Ideas
1

As I use Bootstrap Studio to fast prototyping frontend missing for me is easy way to add my code inside design. For example

<div>
<p> It is time {{ date }} </p>
</div>

By programming placeholder I mean: 1. passing variables with some schema. Fx.

echo $date;

Now it can be cumbersom and complicated. I export desing and after change I have to manually replace text and change code each time. Idea is not add PHP /

  1. add custom not HTML code in design fx. from Jinja template language like style:

    <title>{% block title %}{% endblock %}</title>

How it can work?

Special items or not bootstrap for programmers: 1. to place text replacement. It will be awasome if I can visually select text and after generating get instead code which I pass: in Windows I have two options: a) view text: [ User ] b) programming value: [ echo $userName; ]

This tiny functionality will boost performance when coding and use it inside any framework. So when I design I have normal workflow. When I check inside box or add special items I have text replace by any code which I choose. It can be for example pass item like it is today by drag and drop and right mouse click on selected text to "Add programming replacement". In field it automaticly load selected text value and in second add code replace when export. Using PHP or Python frameworks like Django is huge deal. It is new territory for coders.

  1. It is harder, but I think possible too - code replacement. I select design, get pregenerated code for selection. I can edit to add fx. loop in my favorite language. When I save it will replace default generated code by my choose. Fx. I use editor to add two rows in bootstrap Table and then select specified code and create loop with one row. When I change visual row I get info about update my code.
2

Really interesting. Already asked here and there :

https://bootstrapstudio.io/forums/topic/component-which-supports-html-editing/

https://bootstrapstudio.io/forums/topic/flask-bootstrap/

https://bootstrapstudio.io/forums/topic/export-labels-as-comments/

Hope this will one day implemented, as i'm using BSS mainly to fast design jinja templates.

3

i’m using BSS mainly to fast design jinja templates

I use Jinja templates too. I think about the same contex. As I see some suggestion was implemented so why not this as is simple and very constructive addition.

4

I don't exactly understand what you are asking. It is possible to edit the code to make it custom. And you can use it with any component. For example:

  1. Create a basic BS layout with Row > Column > Card. Let's say you want to template the title of the card, eg <h4 class="card-title">{{ user.userName }}</h4>
  2. In the Overview pane, right click the corresponding Heading element and select "Convert to HTML"
  3. Now the Heading changed to Custom Code.
  4. Right click the "Custom Code" entry and select Edit from the popup.
  5. Now you can add various template syntax to it, like {% for user in users %}

And you can do this with a simple div or any other elements.

5
  • 1 for andee idea.

I am looking forward the implementation. In a way export scripts are fine but it need to be tweaked every use case...