Global / App-wide styling functionality


#1

Not sure if this has been requested before but I will like to make a feature request for global or app-wide styling of elements.
Especially buttons, text inputs and text labels.
Currently each element has to be styled independently. If you have your UI mockup set-in-stone before starting your development in dropsource you can use copy and paste elements to get a consistent style.
But in most cases you’re likely going to change your design especially colours.
When this happens its a real pain and huge time waster.

I just started working on an app which has several pages with several buttons due to the design.
Now i need to change all the buttons style and its a real pain.
Here is are some example of my pages. I have about 7 such pages with lots of these buttons which now i have to change the colors, size, font size, border radius, etc


It will really help if we could define a style for an element so that when you add an element to the canvas you can just choose a style.
This way if you need to make any change you just change the style once or change just one element and the style propagates.


#2

I will add this to our feature request tracker, @seanhoots… I understand where you’re coming from. Like the mobile element equivalent of a CSS style sheet sort of idea. It would be helpful. Much like the way in code we would subclass an element and modify the properties to different defaults in the subclass.


#3

Yes @wade.
In the meantime i think a simple implementation will be ability to set colors to a variable in an element’s property instead of statically typing the color code.
I kind of do this in my apps where i need to change color in an action.
Instead of hard coding the color i rather create device variables like primary_color, secondary_color, etc, and set the color to the variable.
This way if i want to change a color i only have make a change to the variable value once and its propagated.

The only issue with this approach is that it only works if you need to make color changes in an action
So another related feature request is to simply allow ability to set choose a variable wherever one can pick a color for an element.
This will at least address issues with colors which i think is one property that developers change a lot during development.
Giving that Dropsource is a WYSIWYG rapid prototype tool, i tend to do all my mockups straight in dropsource instead of using some external tool to create mockups and replicate them in dropsource.
This ensures i’m not using any design that won’t be supported in dropsource.

So ability to globally define properties of elements especially colours will really help.


#4

Yep we have discussed options for more reusable styles in the past and it’s still a real pain point, often I end up copying / pasting elements once I’ve set the style on the first one, but that only works if you do the styling up front rather than e.g. add your elements, get functionality working, and then style, which I know a lot of people do… Nothing for this in the pipeline at the moment but definitely something we want to improve in future.


#5

So what about simply the ability to set a colour to a page/device variable in the element property.
Color is something that people tend to change a lot.


#6

It’s possible to add this in the future and I love the ideation for how this can be integrated. It hits nicely on the broader topic of more ways to include more solutions to speed and reusability into the platform. I’ve added this item to our feature request tracker and linked this forum post to it so that we have context when project managers prioritize additions into the roadmap as well as engineers to research integration solutions.


#7

Just to clarify here, are we talking about the ability to dynamically update element style from a variable, i.e. similar to a request binding, if the variable changed, the element colors it was bound to would also change (without e.g. re-running set value actions to assign the color)?


#8

No Sue, i think that can be done currently.

What i was asking for was ability to define a style and assign an element to that style.
That way if all my buttons are assigned to a single style, and i decide to change say my colors, i will simply update the main style and all elements using that style will be updated.
Here is an example from bubble.
As yo can see the button has been assigned a style

And here is the style definition

The other simple suggestion i was making was ability to simply set a color (or other properties) in the element property to a variable value instead of entering it statically.
This was i can assign multiple elements color to the same variable and when i decide to update the color, all i will need to do is change the value for the variable once.
For example in the image below, instead of entering the color code, i will select a variable which contains the color value.
image


#9

Yep this is what I was getting at:

Thanks for the additional info though.