4
 Followers
37
 Likes

Support CSS Variables in Service Studio

Frontend
Working on it
expected delivery in Q3 2018

CSS Variables (aka Custom Properties) makes it possible to organize and refactor stylesheets. They are already supported by every major browser, except for Edge, which will add it soon.

You can already use CSS variables in OutSystems applications. But Service Studio doesn't understand them, and the design-time preview will have low fidelity.


With this CSS module, you can declare custom variables, and then use them throughout the stylesheet. For example:

:root {
    --primary-color: #9E0616;
}

a {
    color: var(--primary-color);
}

/* ... and many other styles could use var(--primary-color) */

In such a stylesheet, changing the primary color requires only changing one line.


This would greatly simplify the instantiation of a theme, because the variable can be declared with a default value on the theme, and when a consumer inherits the theme, it simply overrides the variable value:

/* On the theme (e.g. LisbonTheme stylesheet): */
:root {
    --primary-color: /* default */ #000;
}

a {
    color: var(--primary-color);
}

/* On the application theme (e.g. MyApp stylesheet): */
:root {
    --primary-color: #9E0616;
}
Created on 8 Feb 2017
Comments (21)

Yup,


time to upgrade to the modern times!

if they incorporate this in silkui/themes it would be much easier to alter themes accordingly.


Interesting idea but maybe a little bit too soon to adopt an experimental technology as it states in CSS Variables in particular consider the very low adoption so far within browsers.

I beg to differ:

http://caniuse.com/#search=variables

(of course IE is slacking, but what is new)


J: Microsoft Edge recently got support for the standard, but it's still on insider preview (build 14986): https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6261292-css-variables


The W3C spec is on Candidate Recommendation level since Dec 2015 (first Working Draft being from 2012), and they are already working on the Proposed Recommendation. The experimental argument isn't going to last long. Besides, I really think that the SilkUI theming and components would benefit (as in be simplified) by this feature.


I also would like to link to Philip Walton's blog post explaining with great depth why CSS Variables are not equivalent (and in fact, very different) from CSS preprocessors.

This would be a nice one!

So, now every major browser supports CSS Variables: http://caniuse.com/#feat=css-variables

CSS variables already work inside the browser, but Service Studio seems to have a problem with it as it reverts back to the base theme's default colour scheme.  Has anyone been able to get the variables to display  correctly in Service stutio?

As far as I know, Service Studio doesn't support CSS variables, so there's no way to get it working in design time.

You might can use the -servicestudio tag in the stylesheet so show the right color in servicestudio

I have tried that, but it didn't work. Are you saying that you got it working? If so, could you please share a stylesheet demonstrating it?

No didn't tried it but Tjaart mentioned he got it working withing the browser but not in SS since it changes back to default theme. That problem might get solved with the servicestudio tag?

Yeah, it doesn't solve the problem. I think Service Studio uses an older version of WebKit that didn't have this feature yet, or had it under an experimental flag.

Well also don't like that solution since it would propable generate a lot of empty css files (I had some servicestudio tag on webblocks to make my layout in SS look good, OS doesn't generate that tag in the css, but it does creates the webblock css file (which is empty because only had the servicestudio tag in it). So in the end there were 15+ empty css files generated).

Hey Leonardo,

What do you mean by "supporting" these variables?

Is it being able to preview them inside Service Studio? Today you can already write all the css you want (you might have problems using this in runtime in old browsers).

Cheers!

Hey Vasco, that's right - I would like them to be supported in design-time.

My use case is to create a component that uses CSS variables for styling, and a consumer web block or web screen should be able to override the CSS variables for re-styling the component. I know that it's already possible at runtime, but it would not be a good development experience.

Hey Leonardo,

Just wanted to better understand the use case before giving you a quick preview on OutSystems 11: the internal browser that we use inside Service Studio to preview screens and blocks will be upgraded, thus supporting new css constructors such as css variables.

This means that this idea will be implemented in OutSystems 11 ;)

Cheers

I know! I have played with version 11 already, it was the first improvement I found :)

Can't wait for GA.

:))) Nice!

Changed the status to
Working on it
expected delivery in Q3 2018


Working on it, will be delivered in OutSystems 11!

Changed the status to
Working on it
expected delivery in Q3 2018


Working on it, will be delivered in OutSystems 11!

Will 11 include support for LESS?

views
883
Followers
4