14
Views
5
Comments
Solved
Outsystems CSS Doc
Question

Does Outsystems has its own CSS doc for web and mobile? something like tailwind one that list down all the class and what it does.


Thank you

Rank: #1215
Solution

Hi Wenchester,

Is this what you're looking for? https://outsystemsui.outsystems.com/WebStyleGuidePreview/Styles.aspx


Rank: #1025

Hi Jeroen,

This is exactly what I need.

Many thanks!

Rank: #56

Hi Wenchester,


You can refer to OutSystems UI which is a framework for Reactive Web and Mobile apps with dozens of responsive UI patterns on top of a solid design system, fully customizable to your Style Guide needs. With dozens of responsive UI patterns, this framework is integrated with OutSystems and allows you to build the UI of your app using low code.


You can refer to this link where you can have a demo of the patterns and templates included, download a style guide to know how to use it or check the resources and documentation that will go in depth on the details of the patterns, including the CSS classes, its purpose and structure for each of the patterns.


Regards,
João

Rank: #1025

Hi Joao,

Thanks for the link for the pattern, it quite helpful. But what if for example I want to create a custom pattern and I want to utilize existing CSS classes in Outsystems? 

Scrolling manually in the Theme style sheet took too long, the search on top right also honestly doesn't help much in finding class name as it only return how many search returned and where are they not what are the class name and I still have to click the search result one by one.

It would be nice if there is a doc page that list down the classes and group them.

Rank: #56

Hi Wenchester,


I am not aware of any document for the CSS but when I browse through OutSystems UI CSS, I found it is consistent and well organized so I quickly understand the general patterns (e.g. padding-s, padding-m, padding-base, etc.) and make the distinction between those and the pattern-specific CSS. Besides it also takes advantage of CSS variables for rapid changing and overriding with a more specific Theme and easy maintenance.

When you are defining the CSS classes of a widget, Service Studio will help you with auto-complete suggestions of the CSS classes, perhaps it is a better way of finding the one you need, like in the image below:


Rank: #1215
Solution

Hi Wenchester,

Is this what you're looking for? https://outsystemsui.outsystems.com/WebStyleGuidePreview/Styles.aspx


Rank: #1025

Hi Jeroen,

This is exactly what I need.

Many thanks!