Now ... Don't shoot me, I know I am usually the advocate for keeping things in a coding atmosphere lol. It's just that this would make things so much easier if we could add things like Shadow to create the raised effect right in the Look & Feel pane rather than having to always add it in the CSS code directly. Would love to see the ability to do various text effects this way.
I often add to my projects a small CSS with 'special effects' I often use, like dropcaps. So for me, it's easier to add the CSS (not bootstrap!) class test-shadow in the CSS pane. A better -full screen- detachable CSS editor with emmet support is all we need. Not a cluttered options pane where you have to look and click around all the time.
We will have to agree to disagree on this I think marrco. :)
I think everything that can be adjusted by units should have a visual tool associated with it, even if we're not going to add the values as inline CSS. Just being able to drag the mouse and see border thicknesses/radiuses change, or drop shadow distances, or blur amounts change, makes the design processes much pleasant. Having to go in and type out text-shadow: 1px 1px 3px #ff0000; and then realize you'd like to tweak that shadow over a little more, but you're not quite sure how much more, so you have to manually keep changing the pixel values until you get it "just right" is a tedious PITA.
Also, it wouldn't clutter up the interface if the devs made it so that only options applicable to the selected object show up in the Look & Feel panel, but that would probably entail a huge rewrite of the UI. In other words, when you click on an image, there's really no need for the Font options to be visible, so they should just disappear, but since you can apply a border to an image, those options would appear.
+1
@Printninja that adds an issue. There are quite a few bootstrap classes, with common defaults ( px-md-5 mt-1 etc) so the point and click interface should also offer those, first. So drag the mouse to change the border switching from suggesting bootstrap classes to size in em/rem/vw/px ?
Dragging the mouse to set border widths makes more sense in non-responsive design imho. Bootstrap will soon default to responsive font sizes (for some elements) so I'm not sure that pixel-based layout makes sense anymore.
Thank you for the suggestion @jo! There is a Shadow setting in the Options > Decorations group, but this is limited to the built-in Bootstrap shadows. We can build a visual widget for controlling shadows. The complex part there is that there can be multiple shadows applied, but I think this can be solved. We'll look into adding this in the next releases.
Are there any other CSS rules you guys would like to be supported in the Look & Feel panel?
@marrco we've considered adding settings for the spacing utilities, but there is a large number of them and they can optionally be limited to a breakpoint. Any type of visual widget we could think of turned too complicated and more inefficient than writing the CSS classes by hand. Changing the dimensions between px/em/rem/vw is a great suggestion, I have added it to our todo.
@Martin Angelov
Are there any other CSS rules you guys would like to be supported in the Look & Feel panel?
Borders Opacity Text Shadow Box Shadow Transform
Other nice things... a gradient generator for background colors. Add text indent to the font options. And I know this is a Bootstrap limitation, but we should be able to set text to justified at each breakpoint.
What @Printninja said pretty much covers it for me too.
For the borders/shadows/background, what if you were to expand what you have by giving the Borders a dropdown option similar to the setup for Columns where you would then be able to check the side(s) you "do" want to have borders (which would auto turn off "all sides"). Then just add another box for each of the choices and give us the ability to put our own color numbers in it along with a color picker? Another box for choosing the size for Borders would just be a fill in box or you could add an arrow up/down thing, but I prefer to at least be able to type in/paste what I want. I'm not great with shadow stuff (love to use it though lol), but I would think all the settings could just be enhanced in this area as well with the same type of setup.
Half the battle is already there, just need the ability for our own choices. That's my 10 cents (inflation you know! :P )
P.S. Would be great if each of these had some presets (not just the default bootstrap colors) that would fully work that would be typically used often. Similar to how you've already added via Bootstraps default setups now, the Rounded, Thumbnail etc., but these would be combo settings like adding a 1px border to right/bottom with a small amount of shadow to mimic a little depth. Just an idea on this, not totally necessary, just a nice addition. This would also give newbies the ability to add some premade setups when they don't have any idea how to set it up otherwise, or until they do, and would give us old timers some quick shortcuts to save us a little time. Wouldn't have to be a lot of them, just a handful of typically used ones. :)
P.S.S. With the above presets I would envision they would be editable with the rest of the settings so if someone wanted to use one as a starting point (Such as adding depth and shadow to Text) they could alter the color, size of the shadow, etc.