Need a special offer?Find out if your project fits.
+

Use of css variables in standard theme for hexa colors

Answered
Antoine Bouquet asked on August 24, 2022

Hi,
 
FlexMonster is used as part of our product, which we provide to several Customers. The look'n feel varies based upon the Customer's brand.
Currently, every time there is a new version of FlexMonster that we aim to upgrade in our product, we need to go through the theme, identify discrepancies against the previous version we had, and adjust for all our Customers. That is cumbersome, also considering we can't use the LESS version of the theme.
Imho, this could be avoided if FlexMonster could provide with a generic theme, where color hexa codes would be css variables. In this case, we would simply have to set color values once, and speed up checks & adjustments on a new version.
Existing default FlexMonster themes would simply contain a refinement of the css variables + specific theme rules.
Could this request be considered in a next release?
 
Thanks for your time and your service in general.
Regards,
Antoine.

3 answers

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster August 26, 2022

Hello, Antoine,

Thank you for contacting us.

Currently, the Flexmonster theme has no CSS variables since those variables are not supported in the older versions of browsers. However, your suggestion sounds reasonable, and we have added it to our customers' wishlist. Our team will notify you in case of any updates on the matter.

Feel free to contact us if other questions arise.

Kind regards,
Nadia

Public
Antoine Bouquet September 7, 2022

Hi Nadia,
 
thanks for your reply and considering my proposal. Indeed, css variables are pretty standard nowadays in modern browsers - needless to mention they also are life-saviors for high-scale integrators!
Suggestion to address old browsers which do not support variables: FlexMonster might consider using fallback values in the css rules for those browsers. Ultimately, those could even be delivered as a separate / extra css resource in each theme, which the Customer would decide to include or not in their integration logic.
For the record, looking at caniuse, and considering that those browsers are no longer maintained (ex: IE) or not much used / popular, I wanted to know what FlexMonster's goals in terms of compatibility, were (which browsers and versions are supposed to be supported).
 
Thanks!
 
Regards,
Antoine.

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster September 8, 2022

Hi, Antoine,

Thank you for the response.

Yes, you are right that most of the popular browsers support CSS variables. We will consider your proposal in future updates.

Kindly note that Flexmonster provides an approach to easily make updates in the themes. We suggest using a custom theme builder to build new CSS files from changes you make in the flexmonster.less file. 
Feel free to adjust variable values and colors to your needs in the flexmonster.less file. For example, you can change font styles and the theme main color:

@font-family: serif;
@font-size: 15px;
...
@theme-color: antiquewhite;

Then you can generate CSS and minified CSS files for the theme. 

Please let us know if you have more questions.

Kind regards,
Nadia

Please login or Register to Submit Answer