How to Use the Grid in Applications Created Before Version 8

Jaime Vasconcelos

Question

Hi,

The Grid is a functionality introduced in OutSystems Platform version 8 that allows you to design great Web pages in a very easy way. If you want to have this feature also available in eSpaces created before version 8, you have to do the following:

1. Find out the Theme you are using in the eSpace in the Default Theme property;

2. In the Interfaces layer, select the Theme and set its Use Grid property to 'Yes';

3. Open the Style Sheet Editor of the Theme (in the Style Sheet property) and add the following style:

div.ThemeGrid_Container {

padding: 0px;
width: 940px;

}

4. For the final step to adjust the screen layouts, identify the Web Blocks that are set in the Blank Screen/List Screen/Show Screen/Edit Screen properties of the Theme.

For each Web Block do the following:

4.1. Open it and find the MainContent placeholder in it;

4.2. Set the placeholder Style property to “MainContent ThemeGrid_Container” (without the quotation marks).

And that’s it. The Grid is on.
To finalize, just a couple of notes:

The Grid has a fixed width and after doing these steps it forces the MainContent of pages to have 940px of fixed width. If this interferes with the design you already have, you should do the following:
- Take advantage of having the Grid to adjust the pages design for the content to be better aligned and spaced, therefore, attain a better usability;
- Make adjustments to the Grid properties (in the Grid section of the Theme) and make it fit your case.
In more advanced scenarios, the layout of pages may be defined in more than one Theme (e.g.: per Web Flow) and, in this case, you have to find which Themes are in use and execute the steps above for them.

To learn more about the Grid (with examples) click here.

Kind regards,

Jaime Vasconcelos

10 May 2013

MVP

Quick question regarding the grid. how do I see the grid in service studio?

Found it, it only shows when you alter styling (or width for example)

(I wish I could see it permantly, like preview-mode)

10 May 2013

Tiago Simões

Staff

Hi,

I guess you have found it out, but the grid is shown when the width or left margin properties are selected or when you are resizing an widget with the mouse. This way we're making these visual helpers only show when needed, just like we're doing with the outlines of the widgets (e.g. when you move your mouse out of the web editor these boxes will disappear).

Or in another words, "(The grid) is like underwear: you wear it, but it’s not to be exposed." in https://vimeo.com/64811872
:)

Cheers,
Tiago Simões

10 May 2013

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines