Custom CSS for Properties Panel

Hi,
I was configuring and working with your tool to create custom fields.
Is it also possible to use custom css (Eg: Google’s material design css, bootstrap css, etc) as per user’s choice instead of the default css?
I tried it, but found it impossible, since too much of code in PropertiesPanel and EntryFactory uses “class” to do program logic instead of pure representation.
Most modern design languages (angularjs,etc) isolate class out of business logic to enable flexibility.
Can you provide me some direction on the changes I need to make to the properites-panel to make it .less independent?

Using the “class” attribute is not a problem (IMHO it’s even a good pattern).

However, if you want to use the pre-compiled CSS of Material Design, Foundation or Bootstrap, you will need to be able to add arbitrary class names and I don’t know if this is possible.

In the case it would be too complicated to add arbitrary class names, you can use the .less/.sass frameworks (of the projects mentioned above) to generate CSS files having the framework styles but with other selectors.
That solution is not especially trivial though.

Completely redesigned property panel with bootstrap css. Have a look!

Btw, you should not be adding “arbitrary” css classes. It should be the actual bootstrap css classes.

No fussing with less and sass. Deleted all of them. Didn’t touch program logic cores, but revamped presentation! :slight_smile:

1 Like