CSS GUI -- Suggestion

Hello BSS Devs,

With the new sidebar input allowing Animation in 2.5.1, I was wondering if there is a chance in the future that CSS would be considered for visual input via a palette or via sidebar TAB in the app.

Let’s face it once you drag a container, row, column, etc., to scaffold a page the real magic is the CSS required to make a layout and page take shape. I think this type of input could directly benefit current users, as well as increase the apps user base by allowing this alternative input. I would guess CSS knowledge and input is what hinders most would be users of BSS, they can drag and drop components, but then what’s next for many. By allowing GUI, they could then see the corresponding code and learn as needed more easily. When I see people talking about BSS in various places many voice this concern as hinderance to them properly using the app.

So I have just been thinking upon it and curiously wondering. You could still have the direct input via the Styles window as well, just two approaches that work in conjunction with each other.

Here are a few quick examples of such input:

enter image description here

Do you ever foresee this becoming a mode of input within Bootstrap Studio?

;-) Thoughts?

+1, would love to see this added as well. CSS is fine for most of us, but I'm sure even those of us that know CSS fairly well would love to have this approach which would definitely speed things up for us. And I totally agree on this being a better learning curve for those that don't know CSS well. Experimentation is great with a GUI like this, where as the way BSS is right now, those that don't really know CSS wouldn't know where to start experimenting.

Thanks very much for your input @Jo, I am glad it appears to not be a frivolous idea / discussion and others have direct interest and input as well. ;-)

I agree, even if you do know CSS, this approach offers more rapid manipulation and testing. I think it could benefit everyone, from beginners to advanced users. Especially when coupled with live key input modifiers like: arrow up to increase, arrow down to decrease - things such as font size, padding, margins, etc., This allows for rapid modifications and testing coupled with direct input.

+1 for this as I think it could be a great addition when using BSS specific components that are locked down, but do see it being a struggle to control all variants when building our own components from scratch.

But the gui for padding, margin and container size would be a nice addition

Also spacing of the rh side would be extremely tight so would need a CSS panel to be toggled perhaps

Chris - thanks for your support, interest and input for this idea.

Also spacing of the rh side would be extremely tight so would need a CSS panel to be toggled perhaps

The "Options" area could be switched over to a tabbed area, much like the # 1 & # 3 example show above - via their top bars. Each Tab, still being scrollable & sub-collapsable, etc., as the Options area is now.

EDIT: Actually the Options, Design, CSS could be Tabs and each Tab could take up the entire vertical space of the right side bar. Just click a Tab to switch between each. That could be another possible option.

Yeah that's what I mean, when Default tab selected you get standard options and then if you click css it brings ups options like you suggested

Thank you for the great thread and illustrations!

This would be a great addition to the app, and we have also considered implementing this. It will make the Options panel more useful. Not to mention that it will help people experiment with their designs faster. There is only one issue that has stopped us from implementing it until now, and it is that it is not clear where the generated CSS would go. For example, if you select an element and use the Options panel to increase its top padding, where should the padding-top property be inserted? Some possibilities:

  • In the element's style attribute. This would be the easiest to implement and it is guaranteed to work (unless some CSS property with !important overrides this). But placing CSS in the style attribute is considered a very bad practice and we don't want to encourage it. This is likely the approach taken by the tools in the screenshots.
  • In a class name. But which one? And in which file? Maybe people should select the target class name from the UI, but if they choose the wrong class, they could be adding that padding to a lot of other elements which they didn't expect. It will also require that users first choose a class name from a dropdown before using the padding option.

Maybe the best approach would be a combination of the two. There could be a "Target" dropdown that defaults to the style attribute, but in addition contains all user-created class names that are set on the component. The padding-top property will be inserted in the CSS block that is chosen in "Target". It is up to the user to decide where these properties go.

Do you think this would work for you? Do you have any suggestions or ideas? Would love to hear your feedback on this.

Well in my opinion, even though this will make things easier, there is still the fact that you "should" some basic knowledge of CSS in order to use this app. I don't think, even with all this added functionality, that you will want to market this as a drag and drop completely and no coding necessary app, we can find those all over the place and I personally hope BSS doesn't go that route. I like having the advantage of being able to edit things within the app and not have to heavily hack or manipulate the app to be able to do so. Let the users worry about the risk they take on editing things.

So here's my suggestion. Since you should have some clue of what you're looking at in the code areas of BSS, and we already have the ability to see all the classes that are applied to a specific element, including custom code blocks (be it within the HTML or the CSS view panes), keep it simple, let us just click the class within the CSS that should be affected. If it messes things up, undo works just fine lol. Trial and error is how I first learned how to make a website at all, so this would be simple to use yet functional enough for everyone with high levels of experience down to those that just have basic knowledge.

The app should have some type of intuitiveness to it to know what classes are involved in a setting. What about having the app show us in the CSS window, only the classes involved in that setting for that particular element you have selected, just like it does now when you click an element it shows you only those classes involved in that element. This would just take it a step further and only show those classes/id's involved in the setting you are clicking on. This would involve making the settings selectable in some way so that the app would know which CSS to show, so maybe you:

1. Click the element that you want to edit (either in the Overview window or the HTML window) which then shows all the classes in the CSS window for that element. 2. Then click the setting in the Options pane that you want to edit in selected element. 3. This shows then only the classes involved in that setting in that element, and you then click the class you want to edit. 4. For those not super experienced that want to trial and error, just edit as above, if it's not the right one then undo it and click a different class or id, rinse and repeat.

This way you are only editing those classes or id's that are involved and nothing else. Anyone using BSS should already understand that they might be editing something that is on multiple pages. I don't know about anyone else, but I add special classes or id's to my elements if they are only going to be on a specific page and no where else. This helps so that if a class is used on multiple pages, those pages won't be affected by my changes. That to me is just "logical" and anyone using BSS should have that much logic so I personally don't think that issue should be anything that BSS should need to worry about. Once again, that should be on the shoulders of the users. Just my opinion of course. :P

What's nice about this is that the CSS window already shows us what file the code we're looking at is in, so if it's shown as a locked Bootstrap class/id, the app "should" automatically create a duplicate in our custom CSS file for us whenever we alter the new feature settings in the Options window. We may need to have a setting in the project area to designate our default "custom" css file so the app knows exactly which file to append the duplicated classes to.

This would also allow us to use the visual options to change things at any time by just clicking the class we want to change. Once implemented, the feature should show us the current settings for a class or element when selecting the element, or a class within the CSS pane. This will allow us to see what the settings currently are, and adjust them more easily. This might also combat the issue with the "Undo/Redo". Right if you have yourself in edit mode within a class (cursor flashing ready for input) it doesn't play nice, you have to always remember to click another line in the code. With these new added features an undo should work instantly without having to click outside of an attribute you were editing allowing for a much smoother Undo/Redo situation.

I don't know how else to do this and I'd love to hear other ideas too. I'm trying to figure out how some of the other builders do it where you don't have to select anything at all, it just seems to know where to put the settings. Many of the visual editors don't use a lot of inline code, it all goes to a CSS file, and you can usually create a custom CSS file for other things within the app if you need it as well. Some of them I've used give you the option to change the default settings, but when you do so it automatically creates a duplicate of that class in your custom file (similar to my suggestion in the above paragraph). That would probably help for those that don't understand how to edit the default code by copying the class or ID to a custom file. There's been a lot of people complained so far about not being able to edit the default Bootstrap code. Having the app automatically duplicate a class or id that hasn't already been done so to a custom CSS file when it's settings are edited in the new the options pain would be an awesome addition.

Ok I'm done writing my book now haha. One of these days I'll learn how to not be so long winded! :P

Thanks for responding @Martin,

It's good to hear this has been considered and agreed it could be a useful and great addition to the app, both for existing and new users.

As far as considerations on how it might work.

Here is my idea / thought:

Let the app gather all applied classes of the chosen selection, if only one class is applied then populate that as the chosen class with the option to allow the user to also make a + new class, then append that class to the item. If more than one assigned class is found, list them (dropdown) to allow the user to determine which one to add to, or again allow the user to + make and append to a new one. Ideally the current Styles window and this type of CSS GUI would reflect each others values for the chosen item as well.

I feel that may be a good approach.

// ------------------------

As for the above screenshots they are:

1.) Xpressive App

2.) Webflow

3.) Macaw App

I can't speak on webflow, but here is how Xpressive and Macaw do it.

#3 Above = Macaw: The Code-Savvy Web Design Tool (now abandoned, but Free download)

They allow you to assign an ID and class name, all attributes then get put into that. Not sure if its doing inline stying then cleaning up on publish or doing it in real time in app, I don't think you can view source in app?

It yields this:

enter image description here

// ------------------------

#1 Above = Xpressive - HTML & CSS Live Editor For Mac OSX $19 in Mac app store, well worth the cost for any Mac users here, buy it. ;-)

This app applies the attributes as inline styles, but allows you to then move them to a class. You can see a video here @3:30: Using Attribute Style Editor

Like this:

enter image description here

enter image description here

enter image description here

PS: Have you ever considered switching the forum to Discourse? Would be a great improvement also. ;-)


I totally missed your comment when I posted (even as big as it is) ;-)

  • you “should” some basic knowledge of CSS in order to use this app
  • no coding necessary app -- hope BSS doesn’t go that route

I agree on both accounts, I was not trying to suggest otherwise with making this thread.

However I think those that are not familiar with CSS completely would benefit from a CSS GUI. It would allow more users * easier entry into the app. So beginners would have more of a chance. It would allow them to visually see how the CSS input effects the page items, and thus it would help them to grow and learn inside the app. For users already familiar with CSS it would simply allow another form of input for common tasks for more rapid development.

I don't think it would change the scope of the app only enhance it. Likewise, I would assume more possible revenue (more users * ) for the developers would also mean more BSS advancements for all of us to benefit from.



Another aspect that may be nice in addition to what I suggested above (idea / thought), would be to allow users to copy / paste CSS snippets to append to items.

Like an input area where you could paste in:

.someclass {
    blah: blah;
.someclass2 {
    blah2: blah2;
    yada: yada;

Unless this already exists and I am missing the general concept / method in the Styles window?

No worries BSS, I actually agree with all you said and think the GUI for CSS would be an awesome addition. Hopefully you didn't get the idea that I was posting the opposite. :)

For the CSS snippets, are you talking about keeping a snippets listing type thing or are you meaning to paste CSS? Pasting CSS is already possible completely within the CSS file (your custom file of course) and you can copy a line(s) and append it to the end of a class, or copy a bunch of classes/id's from an external source and paste them. I guess I'm not sure what you mean if it's not that.

Thank you for the input, @Jo! You are right that we shouldn't worry too much for people breaking their pages. This is part of the learning process and a lot of beginners would find it educational. We will keep the app target at professionals so Bootstrap Studio will become even more powerful with time. We will just ease the learning curve for novice users by giving them friendly tools like the ones we are discussing, so they can experiment and learn.

@BSS_User, these are great examples! The feature for moving styles to new classes would be a nice addition to the context menu for the HTML tab. It appears that both Macaw and Xpressive lack a CSS editing interface and rely on their visual UIs for styling. In Bootstrap Studio we have this, so we can expose only the most common settings in the visual UI, like margins, paddings, backgrounds, colors and fonts.


It appears that both Macaw and Xpressive lack a CSS editing interface and rely on their visual UIs for styling.

With Macaw I believe you are right. But with Xpressive you have pretty full control via the GUI, directly in the sources, etc., it offers various approaches for accomplishing many things. It works directly with your native source files, so you have access and control of everything (in regards to the apps workflow).


I was speaking of pasting into say a "textarea" via the CSS GUI. So you paste in a CSS snippet and it automatically gets appended to the targeted item and the location / stylesheet you choose, as I tried to explain above in my idea / thought. Which to my knowledge can't be done directly via the Style window now in one easy step, or can it? Maybe I am still still missing something obvious. ;-)


expose only the most common settings in the visual UI, like margins, paddings, backgrounds, colors and fonts

What about other common things via the CSS UI such as: size, position, display, z-index, opacity, overflow, border. They would be nice as well and offer a great way to leverage those into your designs via the GUI.

I guess I'm not seeing the full picture of why it would be necessary as it's so easy right now to append, add, remove, edit etc. the CSS files. Adding and appending is as easy as just copying the information you want to put there and pasting it into the location you want it. We get the nice little blue line that lights up between Classes to enable us to add new ones by either just typing them in after you click the blue line, or pasting it in after clicking the blue line. This puts it where you want it exactly.

You can also very easily append an existing CSS class/id by just clicking the end of the last line to create a new line and paste.

I guess I see it as simple enough to not need added routes to do it, or as I said I'm not seeing the big picture of how it would make it a whole lot easier. I see it this way.

If I have to click the CSS file open that I want to use, the only saving's I can see is the ability to have it put it into a specific area. Maybe this would be helpful if we ever get the ability to add comments to our CSS files, with comments we could then specify a specific tag to tell it that it's a section, then we could use a dropdown in the GUI to tell it exactly what section to go in. Without that ability it would have to know exactly where to put it in the file in some way. Other than that it takes a few clicks to do it either way so I think I'm totally missing the point lol.

But ... truly, if I am missing the point here don't take this as a negative, am just not understanding what the advantage is so by all means carry on and I'll keep reading till I understand it lol. That's what makes this app, it's forums, and it's devs a cut above the rest, they are listening and not just to one person, but to all of us. :)

+1000 from me for the CSS GUI

@Jo with a css gui i think noob users like me will blind prefer BSS so for devs is more sales and that means more profit :)

I loved the ui of macaw and other examples BSS_user posted and i think if bss add something like this it will be much more.

Another example with even friendlier ui is yellow pencil for wordpress i find it good too

Greets! (And sorry for my not so good english)

@Jo ,

But … truly, if I am missing the point here don’t take this as a negative, am just not understanding what the advantage is so by all means carry on and I’ll keep reading till I understand it lol.

;-) I likewise keep reading your posts, but I guess I too am confused. But one thing is for sure that hopefully we can (all) agree on is that a CSS GUI would be a welcome and useful feature in Bootstrap Studio for its users.


Hi @martin

Nice job, I don't think I ever posted to congratulate on the new CSS GUI "Look and Feel" since it was released. Do you foresee extending it further at some point to work with a more extensive set of properties? In that regard, another recent good example is the CSS Visual Editor coming in Pinegrow 3, which will allow visually targeting a pretty full range of CSS properties.

I was just curious if you see Bootstrap Studio extending it's CSS GUI "Look and Feel" further for more properties as well?