Export labels as comments [added in 4.3.7]

It would be a cool feature (toggleable) to have the labels exported as well - Kinda like this:

Code with labels: BSS with labels

Current generated HTML from BSS: Current generated HTML from BSS

Suggested output HTML from BSS Suggested output HTML from BSS

When Minifying it should of course not have the comments, but non-minified would have.

Regards, Michael

Interesting concept, but I would love to see them add comments in as a normal thing we can just add rather than needing to use the Labels. The labels would be ok I guess, but for me I use labels to identify things in the Overview tree which may not always translate to what I'd like to see as comments. Still it could lead to an interesting way of doing comments.

I create our entire CMS system in Bootstrap Studio, and we then have developers that cut'n'paste my layout into our C# project (they are not designers, and have little knowledge of UX).

By having these labels as comments, it would be easier for them to know what design elements are related to each other.

But I'll give you a +1 for the general comments instead of Custom HTML to add in-code comments.

  • Michael

Yeah I know what you mean for sure, and definitely I can see the use of what you're talking about. I for one have been waiting for comments to be available to use since the day I started using the app, but haven't seen them yet in almost 2 years :( . I do hope they do get around to something for this soon. I just am hoping that even if they do give us the ability you're asking for (not totally against it, just would like to see it as a choice), that they also give us the ability to add them as needed so we don't have to revamp all our websites on my end that have been using the Label's as a reference point within the app to keep track of what is what. That would be a lot of unnecessary comments for me lol.

Here's hoping that we get them one way or the other!

I agree - It should be a project specific toggle on when to export it along the files.

+1 for this Ideas. Could be really useful when you need to post edit/change code generated by bootstrap studio

This would be very handy, please implement it!

This is a great idea! We can add a toggle in the Export Design Dialog where you can choose to export labels.

@jo, could you share your ideas on adding comments? How would it work? Maybe we could add an option in the context menu for inserting a comment line above/below the tag on right click over a component in the HTML panel.

For HTML that would be perfect Gabriela! That's usually where most people need them. Helps to note where something starts/stops to navigate the HTML better as well as documentation for multiple people working on things or handing a project over to it's owner who will be doing the updates at that point.

We do need them for both HTML and CSS though. I can't understand why we haven't already had comments added to the CSS. I'm not sure how hard that would be, but it seems that since we can add most other things in CSS that we need and it's already a text based setup, it doesn't seem like it should be all that difficult to add the ability to put comments in.

For CSS we would need 2 ways. One way would be the ability to literally add a stray comment anywhere. Some people (like me) like to add comments after an attribute value to document what needs to be changed for certain things, especially if more than one person is involved. Comments have been and always will be our main way to add notes to our work to document things for ourselves and others.

The other way that CSS needs this is the ability to add a comment as a separate entity outside of an actual class or ID, similar to the above or below setup for the HTML. In other words, click the little blue line "between" 2 classes as if you were going to add a new class, but instead add a comment. This helps for organization of CSS and once again for documentation.

Thanks for the feedback! I think that CSS block comments would be a welcome addition. We'll try to add this in the upcoming release, alongside the export label feature. Inline CSS comments are problematic, though, as they would make the editor difficult to use. If we manage to find an intuitive way to do it, we will add it to our roadmap.

Hi Gabriela, and thanks for your interest on this idea ! The right-click implementation looks good for my use too !

Moreover, this can be also useful if we can export comments without the HTML tags, so this function can be use for comments (by default), but, for each comment, if we can uncheck a checkbox "include HTML comment tags" when needed, then we can use this function for templating (as some ideas suggested for Bootstrap Studio are about Jinja templating, and i'm using Bootstrap Studio for that too) : enter image description here

As you see, this is not really different. we can really use that without breaking the rendering in developpement and export them when needed. What do you think ?

Thanks for the ideas! We've implemented adding labels as Start/End comments in 4.3.7. To enable it, switch it on in Settings > Export.

@Larsene adding template tags is an interesting idea. But I think the best way to do it is by dropping Custom Code component wherever you need them, and writing your template logic there.