Grids and Css priority

  
Hello,

In the OutSystems Platform 8.0 we've introduced the grid systems inside ServiceStudio. These grid systems include a set of automatically generated css code that allows us to easily resize and manipulate our visual elements.

The css that is included in a simple application looks something like this:


First, we have the Basic.css, i.e., all the css classes such as OSInline and OSFillparent that don’t depend on the grid properties and help us, for example, to put widgets side-by-side or extend them to fill their parent widget’s width. These classes are also generated (and can be used) in applications that are not using grids and the platform will optimize the code to use them only when needed! Then, we have the theme’s and the webscreen’s css code. Finally, we have the grid css classes that state the margins and widths of the grid widgets.

Grid css code has a higher priority!
As stated before, the grid css file is the last to be included so that we are not compromising the ServiceStudio’s behavior by overriding it with other css classes. Therefore, we are considering that the element’s properties that help us creating the layouts, such as MarginLeft and Width, are more specific than other css classes (that can be applied to multiple widgets).

Having this said, let’s look into a simple example where we have an input with a “MyInput” css class:



Notice that, MarginLeft and Width were overridden by the grid css classes, since the grid css is being included after the page’s css. On the other hand, the MarginTop was not overridden since the OSAutoMarginTop class (that will set the element’s default margin top) is defined in the Basic.css file (if we use a specific value such as “10px” it would be dumped inline in the element overriding any css class).

Now, if we really want to set the width and marginLeft with our class (why?) we can do it by:

  1. Setting the Width property to “” (or fill-parent in containers) to comply with the browser default css


     
  2. Using a more complex selector (“input.MyInput”, “html .MyInput”, “.MainContent .MyInput”, etc…) that is more specific than the grid css classes


Finally, notice that ServiceStudio tells you the source of your margins properties in order to help you understand where these properties are coming from ;)

I hope this was helpful!!

Best Regards,
Vasco Pessanha
Hi, I need to integrate in outsystems a layout that was develop by us. I need to remove any css that outsystem put in one page stop the effect of this css. How can I do this?
Hi Alexandre,

If in the Theme you disable the grids and do not use a base theme there won't be any of the base css's sheets.

Just note that usually it's easyer to make the new css's to cooperate with the base styles so you don't lose the editor capabilities.

Regards,
João Rosado
Thanks João I buy a template for an e-commerce, this template is based in bootstrap 3 so I need to integrate it in platform.