Multiple element selection, changing tags, advanced css

I'm using your app for prototyping purposes and so far the experience is very good. The interface seems polished, and the performance so far is without hiccups. I would like to make some suggestions to streamline the workflow:

  • It would be great to be able to select multiple elements in the overview panel. This would for example make it easier to move elements en masse

  • An option to change tags. For example it would be convenient to be able to change a "div" to a "p" or vice versa.

  • Add advanced css options, such as "position", "z-index", 'flex" etc on the "look and feel" panel. I realise that it's not a simple task to consolidate all the possible attributes in a side panel, but for an experienced coder it's frustrating to jump between "point and click" and typing modes. As it stands now, I personally find it quicker to just type all my css than trying to remember what I can change from the panel and what I can't change.

  • When you add a component to your library and then you add it to a project, the associated css and js files are named after the component and a number is appended to the name. Could there be an option to keep the original names of these files? Conflicts with bexisting files could be resolved by asking the user what to do in such cases.

I agree +1 on all but the last part with the Library file names. I would prefer that they stay the way they are or ask us if we want them to be renamed on insertion. This helps so that there are no possibilities that a file will be overwritten accidentally or if there is one already there with that name it will usually create the same file with a number after it anyways, so it really wouldn't be any different on that aspect. Most of the time the contents of that file (if it was your personally saved component) all the classes and JS are already in your projects and aren't needed anyways.

The other reason I like how it exports now is that I can tell exactly what that CSS or JS file was created from. If you don't have it naming the files for what the component file name is, you could end up with a ton of CSS or JS files from various components and have no idea which is which. There are also some components that when deleted do NOT remove themselves from the CSS or JS and that helps the cleanup as well.

Just my opinion of course :)

I agree that on many occasions it is good practice to rename the files, but I still would like to have the option to preserve them. Let's say that you are using an external js library for a component. If you import that component in another document you "lose" the original name of the library's js. Certainly it's not a bug - I can see why this choice was made by the developers, so I'm just asking for an option. :)

Anyway, as I continue using BSS, I'm sure I'll come up with other suggestions.

Keep up the good work guys!

@psithu - Add advanced css options, such as “position”, “z-index”, ‘flex” etc on the “look and feel” panel. I realize that it’s not a simple task to consolidate all the possible attributes in a side panel, but for an experienced coder it’s frustrating to jump between “point and click” and typing modes. As it stands now, I personally find it quicker to just type all my css than trying to remember what I can change from the panel and what I can’t change.

100% agree, it was discussed / suggested previously regarding the CSS GUI, it could easily be expanded further to include other common CSS properties as you stated.

  • https://bootstrapstudio.io/forums/topic/css-gui-suggestion/ post-3125 & post-5306

100% agree

Selecting multiple files with ctrl and changing html tags from one to another are must to have in this app. Other suggestions are good too.

I agree! It works well for the normal work. I have some issues about importing a bunsh of photos. As i want to have a lot on my page, i wanted to organize them with folders. It's possible to make folders but it would be much less work, if i could import the photos with the folders - or if i could move a multiple selection into a folder with drag&drop. moving 30 photos into a folder by clicking every single one is quite a work.

@H.Alsen Although you can't drag and drop them as a bunch into specific folders, you "can" right click over the folders in BSS and choose import and navigate to the location of your images/css/js and highlight them all and click the ok (or whatever your button says on the image window) and it will import them all at once directly to that folder.

+1 for the ability to import using drag and drop directly to specific folders/locations for images/css/js so we don't have to manually relocate them. Kind of defeats the purpose of mass drag and drop if we still have to move them one by one to put them where they belong :P

Any progress/workaround for mass changing tags? I need to change a bunch of

<p> to <h6>

and really would like to avoid doing this by hand...