[OutSystems UI Web Style Guide Preview] Remove hard-coded values of css variables from colors, typography, spaces, borders

Forge Component
(10)
Published on 5 Nov (9 days ago) by OutSystems R&D
10 votes
Published on 5 Nov (9 days ago) by OutSystems R&D

First of all,

Congrats for this HUGE and fine tune work enabling us to have a ready to user live style guide. It change some culture on our company!

But,

Here we created an application that is composed by a enterprise base theme, a enterprise template and this style guide( a clone) and if we change values of css in the theme them the Live Style Guide will show the presentation part correctly as it is based on theme, but ALL IT'D harded-code values will be wrong.


I don't know the better approach, but can think some partial solutions;


We can use getComputedStyle(documentElement).getPropertyValue('--css-variable') on each element;

Can get computed style once on preparation(i guess) and only use getPropertyValue on replace of fixed text elements;

We can create a structure on preparation do respresent color pallete, typo and soo on and populate it just after the screen renders.


This time if these few screens perform poor and show the correct values, it solves the problem until a second iteration waiting for free time;

I think that to the Live Style Guide to generate value it needs to be used for all people defining styles company broad wide.


If we can collaborate a bit more let us know!


Regards,

Márcio

Hi people!

Any news about our suggestion?

It would be great if we could count on this and we can make out enterprise Live Style Guide Preview more strong and a central point with values always following our enterprise theme.

If you don't plan do it now is there any diretion you could point us now?

Regards,

Hello Márcio!

Thank you for the support, it's great to hear about the value this component creates for you and about the actual mindset change for developing apps.


Regarding the topic you raised, the team has had a few discussions internally for possible solutions, including the ones you shared. Right now we can't commit to a date when this will be improved, but this issue is on our radar and we'll look into it as soon as we can. This feedback was also shared by other users and we're totally aligned to improve the process and make it easier for everyone :)


My regards



Hello Dinis!

Glad to see that you are looking for this.

We will postpone change this for now and make other little fixes and see what we have customized at the beginning and make our clone more simple to stay updated with your new versions.

As we have translated almost the whole clone the comparison is more hard.

I'll review our changes and if I found something useful and you want know I can post here.

For now I just remember:

To replace the login screen with the one we move to our theme and use an optional  parameter to show the login screen even if the user is logged in;

Include flags to change the current locale as we translate it to pt-BR;

Create a section for our company screen templates;


Márcio,

Hello Dinis!

Can you give us some hope?

Any news about it?

Regards,

Hi Márcio.

Not for the short term. We're considering several improvements for the Style Guide, including a mobile version, but no dates yet.


My regards

Thanks for your answer Dinis,


You are considering a new mobile version without solving this kind of problem. IMO, this kind of static solution overrides the larger proposal of the Live Style Guide, which is to be Live and not static.
I have already praised the initiative which is excellent, but with this static lock without responding to the theme for now it makes it almost nil.
Please consider prioritizing this even before we have the improvements you mentioned.


Regards,

Hi Márcio,

I understand your point, and indeed it's supposed to be live and easy to manage.

We'll discuss this improvement and try to understand if we can have an update for it soon.

My regards

Solution

Márcio Mônego Fonseca wrote:

Thanks for your answer Dinis,


You are considering a new mobile version without solving this kind of problem. IMO, this kind of static solution overrides the larger proposal of the Live Style Guide, which is to be Live and not static.
I have already praised the initiative which is excellent, but with this static lock without responding to the theme for now it makes it almost nil.
Please consider prioritizing this even before we have the improvements you mentioned.


Regards,

Hello Márcio,

Quick update, the last version includes a block that automatically generates the values of the CSS properties.

Besides the obvious improvement regarding the manual work on the styles pages, this block can be used in other applications if you need to.

Thank you for the feedback and let us know if there are other improvements you'd like to see.

Cheers

Solution

Hi Dinis!

Very nice news!!!!

Now we have a true "Live" Style Guide. "Kudos!"

Glad to see our needs being considered by you.

I gave a brief look on how you solve the problem.

I have some questions where you can bring some light.

SyntaxEditor Code Snippet

var propValue = window.getComputedStyle(_this.htmlElement).getPropertyValue(_this._defaultOptions.cssProperty);

returns "" on Firefox 72.0a1, on Border and Shadow pages, but works on Color page. Don't ask me why.

An doubt I have is why the Theme of OutSystems Ui Style Guide app have a huge part of BaseTheme duplicated with same values.

In my company on the beginning I structured things similarly, but:

We have a enterprise theme based almost entirely on BaseTheme of OuSystems Ui Web, we just override company stuff.

We have the company app template(just like you call Template_StyleGuide on OutSystems Ui Style Guide app).

And all of our apps are created based on this template with our theme defined in it.

Recently I saw that Users app were updated and now have almost all copied css definitions of BaseTheme without referenced it, because Silk Ui x Out UI x Reactive app, I think. Let me know if was wrong. We maintain a clone of Users too.

I'm asking things like this  because we are reviewing our strategy of maintain a clone of Outsystems Ui Live Style Preview. The last two updates brought changes almost all pages, given us a huge work merging it.

I was thinking about maintain a partial customization over your original version and separate things we added to our version. Like pt-Br translations, a page to show all RichWidgets icons similar to IconsForEveryOne(on forge) preview, and a page to show the values of a Message entity to our analysts and designers.

I need to know if you have some plan that could cause a huge refactor on this. If not I want to ask you if you are interested in receive the translations and create some form of locale chage similar or not with the one I choose. If yes let me know how can we collaborate on this. I will prefer send you what we evaluate and discard ours over yours and having a guide more cheap to maintain.

Again THANK YOU to hear us and to answer my question today early.

Regards,

Hi Márcio.

We're happy to see the improvements were well received. Let me try to answer your additional questions:

  1. Firefox not returning the values:
    This seems like an issue getting the computed styles, we'll follow up and try to fix it.
  2. Duplicated CSS for the variables definition:
    We provide this CSS because the idea of the Style Guide is to be customized and a big part of it is changing the variables, you can remove those you don't need, but we considered that it would be easier to have them already on your theme than having to copy from the Base theme.
  3. Reference to the Style Guide module:
    The Style Guide and the Preview are intended to be the customized for your needs, unfortunately when there are changes on our side for the original modules, they will not be reflected on yours, I don't see this changing anytime soon.

I hope this helps. Cheers