[OutSystems UI] Mobile Theme & CSS Custom Properties

Forge Component
Published on 1 Jun (yesterday) by OutSystems R&D
83 votes
Published on 1 Jun (yesterday) by OutSystems R&D

I am creating a custom style guide for mobile and I notice that the base and phone theme contained in Outsystems UI Mobile module does not make use of BEM, CSS Custom Properties and Flexbox. In creating my custom theme, can I make use of these features that were introduced in Web UI themes?  Are they supported in mobile themes?  Or should I avoid these new features because they will negatively impact performance?  I like these new features because they simplify the maintenance of themes. Thanks in advance for any answers you can provide.



We're considering an upgrade of the mobile CSS to use custom properties in the future, but we have no dates yet :)

You can use custom properties by overriding the defaults of OutSystems UI Mobile and also create the useful classes for flexbox like we did for Web. Many of the current mobile patterns already use flexbox.

Thank you!


Hi Dinis,

Thank you for your response.  I just need to confirm one detail.  The most efficient way to do the overrides is to create my own base theme.  I need to override all declarations with a CSS custom variable, make sense to just create my own base theme.  Correct?

Hi Emile,

I would say yes.
Your custom theme should be used for your overrides and also your custom CSS. 

Just remember to keep the CSS overrides short. 

So for example if you want to override the .Card border-radius property don't copy the entire .Card CSS for a single 1 line override.